Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Night Mode #134

Closed
ghost opened this issue Jan 10, 2018 · 18 comments

Comments

Projects
None yet
9 participants
@ghost
Copy link

commented Jan 10, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Jan 16, 2018

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

@Zhao-Andy Zhao-Andy removed their assignment Jan 31, 2018

maestromac pushed a commit that referenced this issue Aug 8, 2018

@CanNuhlar

This comment has been minimized.

Copy link

commented Aug 13, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Aug 14, 2018

@CanNuhlar Nice! I like what you did there.

@CanNuhlar

This comment has been minimized.

Copy link

commented Aug 14, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Aug 15, 2018

@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

This comment has been minimized.

Copy link

commented Oct 31, 2018

What's the status of this feature ?

@maestromac

This comment has been minimized.

Copy link
Collaborator

commented Oct 31, 2018

Hey @dimensi0n , this issue is up for grab!

@joybhallaa

This comment has been minimized.

Copy link

commented Dec 3, 2018

Can I work on this?

@maestromac

This comment has been minimized.

Copy link
Collaborator

commented Dec 3, 2018

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

@Link2Twenty

This comment has been minimized.

Copy link
Contributor

commented Dec 10, 2018

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

image

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

@Link2Twenty

This comment has been minimized.

Copy link
Contributor

commented Dec 10, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Dec 26, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Dec 26, 2018

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

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

@Link2Twenty

This comment has been minimized.

Copy link
Contributor

commented Dec 27, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Dec 27, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jan 3, 2019

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

This comment has been minimized.

Copy link

commented Apr 3, 2019

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!

@stale stale bot added the stale label Apr 3, 2019

@maestromac

This comment has been minimized.

Copy link
Collaborator

commented Apr 3, 2019

Resolved with #2072

@maestromac maestromac closed this Apr 3, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.