Skip to content

Implement theme selector #48

@beefsack

Description

@beefsack

Having custom themes would be cool. I'm currently using a hack for a dark theme, but it might work something like (completely untested):

<label><input type="checkbox" onchange="toggleDarkTheme($(this).is(':checked'));" id="themeToggle" /> dark theme</label>
function toggleDarkTheme(on) {
    $('#themeToggle').prop('checked', on);
    $(body).toggleClass('theme-dark', on);
    if (on) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.removeItem('theme');
    }
}
$(document).ready(function() {
    if (localStorage.getItem('theme') === 'dark') {
        toggleDarkTheme(true);
    }
});
body.theme-dark {
    color: white;
    background-color: #1d1f21;
}
body.theme-dark div.pure-menu.pure-menu-open {
    background-color: #1d1f21;
}
body.theme-dark #command {
    background-color: #1d1f21;
}
body.theme-dark [style="color:rgb(0,0,0);"] {
    color: white;
}

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions