Ben Halpern

for The DEV Team

Posted on Mar 15, 2019

New Feature: Personal Configuration (sans serif fonts/night mode beta)

#meta #changelog #webdev

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:

Learn about Dyslexia for the Web with me!

Lindsey Kopacz ・ Nov 14 '18

#a11y #discuss #content

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.

[WIP] Theme-able CSS Variables #1377

Link2Twenty posted on Dec 20, 2018

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.

Currently included:

Variable	Description	Default
`--theme-background`	Background color of the main body	`#f9f9fa`
`--theme-color`	Text color for the main body	`#0a0a0a`
`--theme-secondary-color`	Secondary text color for the main body	`#557de8`
`--theme-top-bar-background`	Background color of the top bar	`#fdf9f3`
`--theme-top-bar-color`	Text and icon color for the top bar	`#0a0a0a`
`--theme-top-bar-search-background`	Background color of the search box in the top bar	`#e8e7e7`
`--theme-top-bar-search-color`	Text color for the search box, and its placeholder, in the top bar	`#0a0a0a`
`--theme-top-bar-write-background`	Background color of the write button in the top bar	`#66e2d5`
`--theme-top-bar-write-color`	Text and border color for the write button in the top bar	`#0a0a0a`
`--theme-container-box-shadow`	Box shadow settings for articles and nav-elements	`3px 3px 0px #bababa`
`--theme-container-border`	border settings for articles and nav-elements	`1px solid #d6d6d6`
`--theme-container-background`	Background color of the articles and nav-elements	`#ffffff`
`--theme-container-background-hover`	Hover background for nav-elements	`#f5f6f7`
`--theme-container-color`	Text color for the articles and nav-elements	`#0a0a0a`

Pull request pending:

Variable	Description	Default

Proposed:

Variable	Description	Default

I think the best thing to do is leave a comment below of further proposals and I will update the main post.

Test theme:

Dark:

:root {
    --theme-background: #161f2b;
    --theme-color: #fff;
    --theme-secondary-color: #cedae2;
    --theme-top-bar-background: #141d26;
    --theme-top-bar-color: #fff;
    --theme-top-bar-search-background: #424a54;
    --theme-top-bar-search-color: #fff;
    --theme-top-bar-write-background: #00af81;
    --theme-top-bar-write-color: #fff;
    --theme-container-background: #27374c;
    --theme-container-background-hover: #37475c;
    --theme-container-color: #fff;
    --theme-container-box-shadow: none;
    --theme-container-border: 1px solid #141d26;
}

Also, feel free to do pull requests to help roll these out.

View on GitHub

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:

Future of CSS: Color Scheme

Andrew Bone ・ Dec 20 '18

#css #future #darkmode #design

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:

Considering changing to sans-serif for post body

Ben Halpern ・ Oct 18 '17

#discuss #meta

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:

Allow users to configure to use night mode (beta) and sans-serif article body #2072

benhalpern posted on Mar 15, 2019

What type of PR is this? (check all applicable)

[ ] Refactor
[x] Feature
[ ] Bug Fix
[ ] Documentation Update

Description

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 😄

Sans serif:

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.

View on GitHub

This also may not work across all pages on the site until some caches are cleared, but should work globally soon enough.

Happy coding!

Top comments (25)

Ben Halpern • Mar 15 '19

@link2twenty if you want to make a PR to provide a better path towards our ideal state with themes, go for it. Or we can chat more in the issue. We may want to tweak this approach a bit but I wanted to get something out there as a tangible proof of concept and some momentum in this direction.

Andrew Bone • Mar 18 '19

I'm about to be busy for a while, starting a new job (very exciting), but I think more discussion is needed. I don't know much about the backend so would need to hear from some people with some ideas on how to do it there. @rhymes maybe?

As for the front end simply having a style block at the top of the body with the correct style information would be enough.

<style>
    :root {
        --theme-background: #243447;
        --theme-color: #fff;
        --theme-top-bar-background: #141d26;
        --theme-top-bar-color: #fff;
        --theme-top-bar-search-background: #424a54;
        --theme-top-bar-search-color: #fff;
        --theme-top-bar-write-background: #c51f5d;
        --theme-top-bar-write-color: #fff;
        --theme-container-background: #324761;
        --theme-container-color: #fff;
        --theme-container-box-shadow: none;
        --theme-container-border: 1px solid #141d26;
    }
</style>

Provided that doesn't run into the caching issue.

Ben Halpern • Mar 18 '19

Putting that directly into the HTML wouldn't work per se, but along the lines of my initial implementation, this should work if done along the lines of how this has been implemented.

How this currently works:

User has stored config as attributes on the model's table
Config is served async and stored in localstorage, same as how we do other stuff like user profile
Inline script modifies html (render-blocking, but no network latency because inline).

Currently I quick-and-dirty did it via the body class. I should have waited but I was pretty excited to get something out and I was slightly confused about this part but have more clarity now. I'll modify this to use :root and explain how it's done.

I'll make a detailed DEV post once this is in place.

Ben Halpern • Mar 18 '19

And congrats on the new job Andrew!

Andrew Bone • Mar 18 '19

Another question we need to ask is will users be able to set all the variables themselves or just have a few premade themes to choose from?

There are bits that won't look quite right with this implementation but if people raise issues saying, 'this bit looks off', it will be easy enough to track down the style and sort it.

Thank you, it's my first 'real' development job, better late than never 😀

Ben Halpern • Mar 18 '19

I think we can build towards letting folks set their own variables, but let's start by collectively working towards a shared concept of night mode and open things up once we've crossed that bridge.