Feature Request: Night Mode

[ghost]

Feature Request

It would be awesome if there was a "night mode" which would switch the site's colors to a darker version which would look better under some conditions.

[Zhao-Andy]

Hey Mebin, thanks for bringing this up. We're gonna backlog this for now as we prepare to open source.

[CanNuhlar]

I've made a userstyle for myself recently, been using it for a while. Uploaded to userstyles.org now so you can check it out, nothing fancy but It'll do the job until we have a official night mode. https://userstyles.org/styles/163294/dev-to-night-mode

[maestromac]

@CanNuhlar Nice! I like what you did there.

[CanNuhlar]

Thanks, @maestromac ! I'd like to add this feature as a PR but it looks like a devious work and would require work from multiple people I guess, also I don't know if @benhalpern and his team would approve the color scheme or the feature itself... The color scheme is complete ripoff from Twitter's night mode.

[benhalpern]

@CanNuhlar super in favor of the color scheme. I think it needs to be refined, but we can do that.

What I care more about is how this will technically work.

We'll have a setting on the user's profile, but we don't render the page from origin based on the user. Basically we load straight from the CDN and then load user data.

So I think this should be inserted at either:

• The CDN layer on Fastly via custom VCL
• Service worker layer.

I'd prefer service worker I think because it would be modestly more scalable. It's slightly less clear to me exactly how we'd do it but I'd love to go down that road and figure it out.

This is sort of separate from the concerns at the CSS layer. So we could start with just making this work some how with the CSS and go from there.

[dimensi0n]

What's the status of this feature ?

[maestromac]

Hey @dimensi0n , this issue is up for grab!

[joybh98]

Can I work on this?

[maestromac]

Hey @joybhallaa , someone already submitted a PR (#1104) for this issue. You are welcomed and encouraged to review it!

[Link2Twenty]

I like the colours #303030 and #424242 which would produce something like this

For the border I used #1f1f1f, the shadow is #1d1d1d and I inverted the colours of the selected nav-chronofiter-link

[Link2Twenty]

And for my 2 cents, I think we should use CSS variables for themes, then load in a theme css file

body {
  background: var(--theme-body-background, #FFFFFF)
}

:root {
  --theme-body-background: #303030;
  --theme-container-background: #424242;
  --theme-container-color: #FFFFFF;
}

This would be a lot of effort to start with but it does mean we could offer many themes, down the line, or even let users come up with their own.

[abraham]

It would be neat if this could be automatically enabled for @media (prefers-color-scheme: dark).

https://medium.freecodecamp.org/how-to-get-dark-mode-working-with-css-740ad31e22e

[Link2Twenty]

@abraham agreed, I think that's probably the path we'll take 😁

https://dev.to/link2twenty/future-of-css-color-scheme-10of

[Link2Twenty]

Speaking of how to do this, I think, as a default, we should have it change with the system theme but also let users pick a theme and stick with it.

I don't know much about ruby on rails but is it possible to generate a css file based on user preferences?

[maestromac]

I'm not familiar with that feature but i know it's possible to pass instance variable. I'm also wondering if edge caching might have an issue with this.

[Link2Twenty]

It's possible to set and change css variables with javascript though I think it would be preferable to try and load in the CSS from the back end but if it's not possible this may be a solution.

Set variable:

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.documentElement.style.setProperty('--theme-background', user.background)

Detect media query:

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange

const theme = window.matchMedia("(prefers-color-scheme: dark)");

theme.onchange = e => {
  if (e.matches) {
    /* The computer has a dark theme set */
  } else {
    /* The computer has not got a dark theme set */
  }
}

[stale]

Thanks for contributing to this issue. As it has been 90 days since the last activity, we are automatically closing the issue in 7 days. This is often because the request was already solved in some way and it just wasn't updated or it's no longer applicable. If this issue still requires attention, please respond with a comment. Happy Coding!

[maestromac]

Resolved with #2072