Alien Night Theme - A free Dark Theme for Discourse

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*/
}
3 Likes

The lines for the header work perfectly. Thanks!

1 Like

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.

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?


Thanks!

Hey @Pawel_Kosiorek,

glad you like my theme! :slight_smile:

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

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.

1 Like

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

And this is after click to the sun:

I think it’s related to naming of dark and light theme?

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

5 Likes

Hello @sam

thank you very much for this opportunity - I feel honored :slight_smile:

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 :slight_smile:

Thanks again!

Iggy

5 Likes

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

4 Likes

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 :wink: Now it’s white on night mode.

Hey @Pawel_Kosiorek,

glad it worked with the native theme installation :slight_smile:
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.

4 Likes

Love it!!!:kissing_heart:

1 Like

@here Keep in mind that the #4 post is not up to date anymore.

I’m using now a complete new method for the Theme Switcher. It’s nicely put in the Discourse Header now :slight_smile:

(hopefully it has no issues with other Discourse Header components)

Could you share that switch as a seperate theme component? I’m looking for this feature for months.

1 Like

Hey @Anatolia

I tried my best to make it happen :smiley:

Go here:

3 Likes

I added to our forum. Thank you so much :slightly_smiling_face:

1 Like

There is something wrong in the header when you open the hamburger menu:

A part of the menu moves to the top right and partially covers the buttons on the header

However great rework!

5 Likes

Back from vacation. Sorry for the delay!
I fixed it now :slight_smile: (legacy from my own sub theme header component)
Thanks for the report!

3 Likes

Thanks for the theme. I like how you have both dark and light colors in the same stylesheet. I don’t know any other theme that does that.

There are lot of hard coded colors, I was wondering if you have any plans for making those customizable using color variables and functions?

There are some colors that do not change between dark and light mode resulting in low contrast such as the tags. it would be great if we could overwrite all colors in the UI so they are customizable as well.

Also if some users decide on different color palette, it would be easier to adjust the unwanted color variations.

I am working on a fork of Alien Night and replaced all hard coded colors with variables so they could be organized and possibly derived from the color_schemes.

If you find it beneficial I could post the color list here or as an issue or pr to your repo.

Thank you.

2 Likes

Out of curiosity, I see a large list of items whose colors are changed with the dark class, did you find the elements that needed a color change one by one or you used another strategy?

1 Like

Hey @ahmadabdolsaheb

thanks for your feedback - appreciated!

Right, for now they are hardcoded “by eye and taste” :wink:
Currently quite busy so can’t work on a customizable setup. I would like a Pull Request or whatever way you like to integrate it, so everyone can benefit from it.

2 Likes