It's a dark theme!

(Kane York) #1

Now that we have the recoloring section …almost working perfectly, how’s about a dark theme?

There’s still a few things wrong, and it requires this PR, but I think it looks pretty good so far!

Known issues:

  • Gradual highlights are done in JS, and look really bright Fixed!
  • The buttons on the new topic composer are hidden for some reason
  • “All Categories” selector is colored in JS
  • ACE Editor is still white
  • Not exactly the best quaternary color (Suggestions welcome!)


primary: eeeeee
secondary: 222222
quaternary: dd6f54
header_background: 222222
header_primary: eeeeee
highlight: 888818
love: b43050


html {
    ::-webkit-scrollbar {
        width: 10px;
::-webkit-scrollbar-track {
    width: 10px;
    background-color: #222;
    border-left: 2px solid #444;

::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: #444;

Coming soon to Meta :new_moon: DARKNESS :new_moon:
Dark Material Design
Adding unique class names to to the elements in the topic map
(Sam Saffron) #2

Why is scale color not working for us here?

cc @awesomerobot

(Anthony Giovannetti) #3


This looks great, I cannot wait.

(Kane York) #4

Basically, when you switch the white/black, all of a sudden the function is trying to lighten white and darken black. And all the spots where it was already lightening white and darkening black (basically a no-op) now look wrong, because they were never fixed because nobody noticed.

(Sam Saffron) #5

I want to take in this PR, but first want @awesomerobot to review, hold tight.

(Erlend Sogge Heggen) #6

This is great. My fanciful dream of a “user’s choice dark/light theme” is looking very feasible.


This is awesome :smile:

(Kris) #8

I’m not super familiar with sass’ mix (simply mixes colors though, right?) - but wouldn’t the use here potentially cause problems with colors outside of black/white? I understand the necessity to solve for dark themes right now (scaling black to 90% and scaling white to 90% are obviously too different), but if my palette is HOT DOG STAND…

in a lot of places the mix becomes 50% red and 50% yellow… which isn’t really desired outcome if I wanted to scale the tone of red, rather than produce orange… right?

(Kane York) #9

Working reasonably well for me here. Needs a bit more contrast with a few of the colors (esp. success and quaternary), but looks just fine! Nothing’s unusable at all.

(Kris) #10

It’s not unusable - but from my perspective as a user… I may be frustrated if I want a red and blue theme but can’t control the fact that some purple shows up.

I think the light/dark theme issues that currently exist probably need to be handled more programmatically. (Thanks for sending this my way @zogstrip )

(Kane York) #11

I did find myself going, “I want something that’s like saturate/desaturate, except for LUM” – move away or towards the center (towards grey or towards white/black) of luminescence – a lot while doing this.

Also, I make it so that the [Save] button on the colors page applies the changes instantly.

(Neil Lalonde) #12

No I don’t want that to happen. Mistakes to the colors can make the UI unusable. And a sudden page reload is surprising and annoying, imo.

(Régis Hanol) #13

You could potentially make it work without needing a page reload (only a page flicker as the browser repaint the whole page with the new css) but I agree, we don’t want any mistake to break the UI.

(probus) #14

How about simply having the now mixed colors as editable values? And the color of the “All Categories” selector as well. There are bound to be color combinations that break the defaults and you can’t please everyone.

(Travis) #15

I can not wait for the color theming update! :smile:

(Neil Lalonde) #16

Give it a try now!

(Kane York) #17

Well, the current behavior was really, really weird - you ended up with a strange mix of the two themes until tmp/cache was nuked and the server restarted. I don’t really want to deal with that when changing colors.

EDIT Reverted the reloading @neil.

(Michael Downey) #18

Personally I really like dark themes, so happy to see this. (Probably won’t be using it for my site though.)

I’d encourage folks working on the theme to remember accessibility via contrast ratios. The current out of the box theme is pretty bad for those with less-than-perfect vision.

(Daniel Ritchie) #19

This is why I’m watching these topics. My users are gamers and often are IT pros who tell me that their eyes just get too tired for the white background shining at them when they play at night.

I wouldn’t mind manually tweaking more than 10 color values, if I were given more granular access to the palette. I would have already done so through CSS, if UI weren’t working from the 10 base colors to produce the expanded palette. Particularly, the lack of direct access to color values used in animations, has me waiting to see what the work on your end produces.

For color palette changes, use the same preview mechanism already in place for the CSS/HTML changes.

(Tomo Vukasović) #20

Can you please explain this part?

Is this still functioning with the new version?