# Alien Night Theme - A free Dark Theme for Discourse

**URL:** https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175
**Category:** Theme
**Created:** [December 13, 2016, 10:36am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175 "2016-12-13T10:36:07Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy)
#### Post date: [December 14, 2016, 8:28am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/4 "2016-12-14T08:28:23Z")

</div>

Alright 😺

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:

> **[Releases · B-iggy/alien-night-discourse-dark-theme](https://github.com/B-iggy/alien-night-discourse-dark-theme/releases)**
>
> A night friendly dark Discourse theme - dark/light switcher inclusive - B-iggy/alien-night-discourse-dark-theme

---

_[View the full topic](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175)._