Update: Night mode is coming along nicely and looks awesome! It was not as far along when I first wrote this.
We just shipped a new feature: Display customization.
It is available in your /settings/misc page.
The two available configs are "theme" and "font" (for post bodies). These are customizations that individual users can make to achieve their preferred experience without having to rely on browser extensions or other non-native hacks. There is one available non-default configuration for each config. In the future, perhaps there will be more variety.
This configuration will naturally work across all devices while you're logged in.
There are both personal preference and accessibility issues at play, and it's exciting to offer better options for everyone. Serif fonts are particularly difficult for folks with dyslexia.
More info here:
The night theme is still sort of a work in progress in terms of getting the colors right. So what you are seeing now is sort of a temporary implementation, but I think it will kickstart the progress towards full-on themes. @link2twenty from the community has done an awesome job leading the way in making CSS themes possible.
I thought we ought to have a place where we keep a note of the current CSS Variables and also propose different variables that should be included.
||Background color of the main body||
||Background color of the top bar||
Pull request pending:
||Text and icon color for the top bar||
||Background color of the search box in the top bar||
||Text color for the search box, and its placeholder, in the top bar||
||Text color for the main body||
||Background color of the articles and nav-elements||
||Text color for the articles and nav-elements||
I think the best thing to do is leave a comment below of further proposals and I will update the main post.
Also feel free to do pull requests to help roll these out.
You may find you don't actually want to use night mode until more progress is made with themes. I think the font customization will be more immediately valuable.
Great read on the CSS theme approach:
Again, go here to make this change: /settings/misc.
We considered changing universally to sans serif a long time ago, but nobody agreed on what was best. It doesn't really make sense for this choice to be up to the author—it's really a matter of personal taste for the readers.
Here's the old post mulling over the topic:
Regarding implementation: We don't serve most requests from our origin server, but instead serve cached pages that don't have an understanding of the user's context. Because of this constraint, the individual config is stored in
localstorage, and modifies the page at render time. I'd overcomplicated things by trying to make this work via serviceworkers, and that might still be the longterm solution, but for now this works pretty well in all environments.
Here was the pull request from this morning:
What type of PR is this? (check all applicable)
- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Documentation Update
Some users may want night mode for reading or sans-serif fonts for any number of reasons: personal preference, accessibility, etc.
This config gives that option
There's still work to be done to get night mode looking just right, but this PR should speed that up, as more folks will start using it. Thanks to @Link2Twenty for the great work on themes.
The implementation of the sans serif css could be done theme style but I wasn't sure, so I did it this way. We can change later.
This also may not work across all pages on the site until some caches are cleared, but should work globally soon enough.