Alien Night Theme - A free Dark Theme for Discourse

theme
4

Alright :smiley_cat:

Sorry in advance for not doing it the 100% professional way ( using custom js templates from discourse? ) but for now it works very good for me this way:

The main idea is basically to append a modifier class to the html DOM and nest the dark styles in proper way in the CSS and store the user choice in the local storage.

So my HTML looks like this:

<span class="theme-switcher">Switch Theme:</span>
  <a class="theme-switcher-attr theme-switcher-light" href="#">Light</a>
  <a class="theme-switcher-attr theme-switcher-dark" href="#">Dark</a>

The theme switcher CSS and a snippet example with the modifier class

.theme-switcher-attr {
    color: #fff !important;
    font-weight: bold;
    padding: 5px;
    margin: 2px;
    display: inline-block;
}

.theme-switcher-light {
    background-color: #fff;
    color: #222 !important;
    border: 1px solid #333;
}

.theme-switcher-dark {
    background-color: #10161d;
    border: 1px solid #fff;
}

/*
CSS of the Dark Theme in combination with the modifier class from the theme switcher
 */
html.dark,
html.dark body {
    background-color: #10161d;
}

html.dark,
html.dark .top-navbar-links-title,
html.dark .nav-pills>li>a,
html.dark .topic-list a.title,
html.dark .topic-body .regular,
html.dark #topic-title h1 a,
html.dark #topic-title .topic-statuses,
html.dark .category-list tbody .category h3 a[href],
html.dark .timeline-container .topic-timeline .timeline-replies,
html.dark .discourse-no-touch .topic-body .actions .fade-out,
html.dark #suggested-topics,
html.dark .topic-list-bottom,
html.dark .user-main .nav-stacked li>a.active,
html.dark .theme-switcher,
html.dark div.poll li[data-poll-option-id],
html.dark aside.onebox header a[href],
html.dark .contents,
html.dark nav.post-controls button.create,
html.dark .directory .period-chooser,
html.dark .directory table,
html.dark .dashboard-stats table .title i.fa,
html.dark #topic-closing-info,
html.dark .content-list ul li a,
html.dark .topic-map .map .number, .topic-map .map i,
html.dark .topic-map h3,
html.dark .topic-map .buttons .btn:hover {
    color: #fff;
}

And the JS via async placed in the </head> customize field

<script async>
$(document).ready(function() {

    var darkTheme = localStorage.getItem("theme");

    if (darkTheme !== null){
        $('html').addClass('dark');
    }

    if (typeof(Storage) !== "undefined") {
        // Code for localStorage/sessionStorage.
        $('.theme-switcher-dark').on('click', function() {
            localStorage.setItem("theme", "dark");
            $('html').addClass('dark');
        });

        $('.theme-switcher-light').on('click', function() {
            localStorage.removeItem("theme");
            $('html').removeClass('dark');
        });

    } else {
        // Sorry! No Web Storage support..
        console.log('Upgrade to a better browser! Really!')
    }
});
</script>

I appreciate any feedback and for the complete package I updated the theme switcher also in Github and created an easy Release you can just download everything:

https://github.com/B-iggy/discourse-dark-theme/releases

14 Likes