# 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:** 20
**Page:** 1

<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 13, 2016, 10:36am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/1 "2016-12-13T10:36:07Z")

</div>

| :discourse2: | Summary | Discourse Alien Night is a dark focused clean theme with the Dark/Light toggle component in mind to enhance your forum! |
| --- | --- | --- |
| 👓 | **Preview** | [Preview on theme-creator.discourse.org](https://theme-creator.discourse.org/theme/B-iggy/alien-night-theme) |
| 🛠 | Repository Link | [GitHub - B-iggy/alien-night-discourse-dark-theme: A night friendly dark Discourse theme - dark/light switcher inclusive · GitHub](https://github.com/B-iggy/alien-night-discourse-dark-theme) |
| 📖 | New to Discourse Themes? | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

 ![dark](https://global.discourse-cdn.com/meta/original/4X/c/4/9/c4946692e769ea1a20a52367a264b151f6f35f9b.jpeg)

> **Note** : with the release 4.0.0 I redesigned/refactored the theme from ground up. It’s more contrast friendly, it uses CSS variables and is overall more slick.

Hi there 👋  
I want to share a free dark theme for discourse called “ **Alien Night** ”.  
I made it for my server game community.

Since I have people from all over the world playing on my servers and reading the forum at any time I wanted to have a dark and a bright theme people can choose from. Especially the night one should be eye friendly in the night.

# Implemented [Dark/Light Mode Toggle](https://meta.discourse.org/t/dark-light-mode-toggle/215585)

Even though the component is labeled as broken, it works in my theme, if you follow some guidelines:

1. Make the Light theme selectable for your users

2. Select the Dark color here ( /admin/site\_settings/category/all\_results?filter=dark%20m )

3. Include the Dark-Light-Toggle component for this theme and check the box at the bottom:  

If everything set correctly, you have on a right sidebar the Dark/Light Toggle:

Enjoy and let me know if you have any feedback or questions. 🙂

Iggy

---

<div class="post-metadata">

### Author: ![DanteZii](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dantezii/32/81726_2.png) [@DanteZii](https://meta.discourse.org/u/DanteZii)
#### Post date: [December 13, 2016, 7:27pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/2 "2016-12-13T19:27:25Z")

</div>

wow so cool!!!👍

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [December 13, 2016, 9:24pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/3 "2016-12-13T21:24:51Z")

</div>

> [@B-iggy](#):
>
> So I also implemented a theme switcher via JQuery, CSS and local storage.(if you need more information about it I will happily share)

Very interested, share it please ![](https://global.discourse-cdn.com/meta/original/3X/c/f/cfe485edac717db8e69bd3d67438d49d0a2d271b.gif)

---

<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

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [December 14, 2016, 10:38am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/5 "2016-12-14T10:38:59Z")

</div>

It works perfectly, thanks @B-iggy!

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [January 9, 2017, 2:52pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/6 "2017-01-09T14:52:53Z")

</div>

@B-iggy I find a little bug  
When you enter a topic (sometimes, not always) the link in navigation bar change in  
`https://forum.empyrion-homeworld.net/#`  
instead to e.g.  
`https://forum.empyrion-homeworld.net/t/griefing-and-cheating-report/3520`

So, when you try to go in another page, or return to the home page (clicking the logo), the site is not responding.

Or the link does not match the title of the topic, e.g.

 ![](https://global.discourse-cdn.com/meta/original/4X/8/4/8/848ec1889be975dcee25fc94a83ee71ce72d6eae.png)  
I need to press Ctrl and F5 to refresh all.

It also happens on my forum from yesterday, since I enabled the switcher themes.

Removing the strings `href="#"` in Html code seems to resolve the problems.  
Can you try and confirm please?

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [January 14, 2017, 5:10pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/7 "2017-01-14T17:10:23Z")

</div>

After few days I can confirm that[this bug](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/6) is fixed by deleting `href="#"` from the Html code, e.g.

```
  <a class="theme-switcher-attr theme-switcher-light">Light</a>
  <a class="theme-switcher-attr theme-switcher-dark">Dark</a>

```

If anyone is interested I changed the position and shape of the buttons making them “fixed” on the page, so users can change from dark to light (or viceversa) without going back to top.

On **CSS** I add:

```
#top-navbar {
    position: fixed;
    top: 90px;
    left: 0;
    z-index: 90000;
    width: 70px;
    overflow: hidden;
    margin: 0;
    text-align: center;
    box-shadow: 0px 0px 4px #070708;
    border-radius: 0px 10px 10px 0px;
}

```

according to my Html code.

and this line (both here `.theme-switcher-light` and here `.theme-switcher-dark`) to make the round buttons  
`border-radius: 100%;`

In **Html/Top** :

```
<div id="top-navbar">
  <span class="theme-switcher">Tema:</span>
  <a class="theme-switcher-attr theme-switcher-light"><i class="fa fa-sun-o fa-lg"></i></a>
  <a class="theme-switcher-attr theme-switcher-dark"><i class="fa fa-moon-o fa-lg"></i></a> 
</div>

```

I preferred to use the FontAwesome’s icons instead of a text for buttons.

![](https://global.discourse-cdn.com/meta/original/4X/c/f/6/cf6727924ea70387adeeef85dc6b5e91ab412afe.gif)

---

<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: [January 14, 2017, 5:28pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/8 "2017-01-14T17:28:59Z")

</div>

Hey @Trash,

just today I got feedback from the community regarding this too so I wanted to tackle it. Thank you for your fix. Will try it out. Nice to see it in action by someone else 🙂

---

<div class="post-metadata">

### Author: ![alehman](https://avatars.discourse-cdn.com/v4/letter/a/b38774/32.png) [@alehman](https://meta.discourse.org/u/alehman)
#### Post date: [March 3, 2017, 4:37am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/9 "2017-03-03T04:37:23Z")

</div>

Thanks for the terrific theme and switcher. This is perfect for my astronomy club.

Question - the background of the header bar (I’m using the default bar for now) does not change color when the dark theme is selected. It stays at the default white. Can the script be modified to include changing the header?

Thanks,  
Alan

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [March 3, 2017, 7:43pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/10 "2017-03-03T19:43:22Z")

</div>

> [@alehman](#):
>
> Question - the background of the header bar (I’m using the default bar for now) does not change color when the dark theme is selected. It stays at the default white. Can the script be modified to include changing the header?

You don’t need to modify the script, but add some lines on your css:

```
html.dark .d-header {
    background: #1c1c1c; /*change it with the hex color you want*/
}

```

to change the background color

Instead, to change the color of the title (if you need) add somenthing like this:

```
html.dark .extra-info-wrapper .topic-link {
    color: #ffffff; /*change it with the hex color you want*/
}

```

---

<div class="post-metadata">

### Author: ![alehman](https://avatars.discourse-cdn.com/v4/letter/a/b38774/32.png) [@alehman](https://meta.discourse.org/u/alehman)
#### Post date: [March 5, 2017, 5:45am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/11 "2017-03-05T05:45:27Z")

</div>

The lines for the header work perfectly. Thanks!

---

<div class="post-metadata">

### Author: ![Pawel\_Kosiorek](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pawel_kosiorek/32/75785_2.png) [@Pawel\_Kosiorek](https://meta.discourse.org/u/Pawel_Kosiorek)
#### Post date: [July 10, 2017, 6:42pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/12 "2017-07-10T18:42:31Z")

</div>

Hi there @Trash and @B-iggy !

I’m trying to apply your brilliant dark theme with switch bar, but I’m afraid that I messed up something…  
Dark theme is working, also I can se the switch buttons, but they are just not working… Also colour is fixed to white.

 ![](https://global.discourse-cdn.com/meta/original/3X/d/8/d8aa708441f21e6255eae6b3c2b5bef9758cf7a2.jpg)  
I’m not really sure where should I paste the HTML code (sorry about that, I’m greenhorn in that matter).  
Should I put it in Head or Body? Or in all of it?  
 ![](https://global.discourse-cdn.com/meta/original/3X/9/f/9ff0335b5910ef06a1494f3bfddb548d9930c58f.png)  
Thanks!

---

<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: [July 10, 2017, 6:58pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/13 "2017-07-10T18:58:21Z")

</div>

Hey @Pawel_Kosiorek,

glad you like my theme! 🙂

You only showed the html code and I guess the CSS is right. But did you apply the JS also in the head?

This code here:

[https://github.com/B-iggy/discourse-dark-theme/blob/master/alien-night-theme--theme-switcher.js](https://github.com/B-iggy/discourse-dark-theme/blob/master/alien-night-theme--theme-switcher.js)

Needs to be put in the section (Common).  
The HTML goes to the “After Header” for Desktop and Mobile independently since they are a bit different.

---

<div class="post-metadata">

### Author: ![Pawel\_Kosiorek](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pawel_kosiorek/32/75785_2.png) [@Pawel\_Kosiorek](https://meta.discourse.org/u/Pawel_Kosiorek)
#### Post date: [July 10, 2017, 7:23pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/14 "2017-07-10T19:23:17Z")

</div>

Hi! Thanks for reply!  
Now I can switch between Dark And Darker 😃  
This is happening when I’m clicking to the moon:

 ![](https://global.discourse-cdn.com/meta/original/3X/a/4/a458ffd879404d4b16c8ea4682c10f327b38cc92.png)  
And this is after click to the sun:  
 ![](https://global.discourse-cdn.com/meta/original/3X/7/4/742f368587745b526fe10ab5f94c7b1bbd1303ce.jpg)  
I think it’s related to naming of dark and light theme?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [July 10, 2017, 8:04pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/15 "2017-07-10T20:04:14Z")

</div>

@B-iggy I would like to move this to the #plugin:theme , was wondering if you can orgnaise the the theme per:

> [@Structure of themes and theme components](https://meta.discourse.org/t/how-to-develop-custom-themes/60848):
>
> Discourse supports [native themes](https://meta.discourse.org/t/native-theme-support/47494/26) that can be sourced from a .tar.gz archive or from a remote git repository including [private repositories](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). An example theme is at: [GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub](https://github.com/SamSaffron/discourse-simple-theme) The git repository will be checked for updates ([once a day](https://github.com/discourse/discourse/blob/main/app/jobs/scheduled/check_out_of_date_themes.rb)), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to foll…

---

<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: [July 11, 2017, 9:29am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/16 "2017-07-11T09:29:13Z")

</div>

Hello @sam

thank you very much for this opportunity - I feel honored 🙂

I have reorganized all files and made it ready to use over native themes.  
I updated / cleaned up everything and should be ready to go 🙂

[https://github.com/B-iggy/alien-night-discourse-dark-theme](https://github.com/B-iggy/alien-night-discourse-dark-theme)

Thanks again!

Iggy

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [July 11, 2017, 11:58am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/17 "2017-07-11T11:58:15Z")

</div>

Cool, moving this to the theme category please update the first post 🌝

---

<div class="post-metadata">

### Author: ![Pawel\_Kosiorek](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pawel_kosiorek/32/75785_2.png) [@Pawel\_Kosiorek](https://meta.discourse.org/u/Pawel_Kosiorek)
#### Post date: [July 11, 2017, 2:15pm UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/18 "2017-07-11T14:15:05Z")

</div>

Hi!  
After your update everything works just fine! Congrats!  
I found just one minor bug, from time to time switcher just stops working. There’s no effect when you’re trying to change from one to another theme. Site refresh helps.

One more thing, is it possible to change colour of top of the page and the switcher to night mode, when it’s switched to night mode 😉 Now it’s white on night mode.

 ![](https://global.discourse-cdn.com/meta/original/3X/6/7/67959969a9a9d2588bc45819c45bcbc204e6c718.png)

---

<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: [July 12, 2017, 11:36am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/19 "2017-07-12T11:36:02Z")

</div>

Hey @Pawel_Kosiorek,

glad it worked with the native theme installation 🙂  
I will check why it is sometimes not working. Guess some internal JS call conflicts.

Yes, since I am using a background image for the header I left it accidentally white - will fix it.  
Will adjust the color for the theme switcher too.

---

<div class="post-metadata">

### Author: ![grahamtrump](https://avatars.discourse-cdn.com/v4/letter/g/df788c/32.png) [@grahamtrump](https://meta.discourse.org/u/grahamtrump)
#### Post date: [June 28, 2018, 4:39am UTC](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175/20 "2018-06-28T04:39:39Z")

</div>

Love it!!!😘

[Next page](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175.md?page=2)