Neon Mode: Building a New Dark UI

Neon Mode: Building a New Dark UI codista.com2 years ago in #Dev Love49

Dark modes have become a very popular feature for apps and operating systems in recent years, and many users prefer the inverted colors because they’re easier on the eyes. Our new dark UI looks gorgeous and has a few extra tricks up its sleeve too – here’s how we made it. Setting the Mood First things first: the basis of most dark modes on the web these days are CSS custom properties – they let us define all our colors as variables we can change at runtime. There are many good tutorials on how to use them already, so we’ll skip over that. For an existing site, the initial switch to custom properties can be a bit cumbersome, but find & replace is very helpful 😉. We are working with Sass here, so it’s a good idea to define the color schemes as mixins, so they’re easier to reuse in different selectors. When it comes to naming the properties, try to stay away from visual names like “light” or “gray” – the other color scheme might invert that or use different hues, and things can get confusing. In our case, we went with a “color scale” from background to foreground, and three highlight colors for our brand. // define the color vars as a mixin so we can reuse it @mixin color-scheme-dark { –color-scale-0: #001e2f; –color-scale-25: #143044; –color-scale-50: #576975; –color-scale-75: #e6f1f8; –color-scale-100: #ffffff; –color-brand-primary: #7a27ff; –color-brand-secondary: #26ffae; –color-brand-tertiary: #ed667b; } // default to light colors… :root { @include color-scheme-light; } // …except if no theme is set and the system preference is dark @media (prefers-color-scheme: dark) { :root:not([data-theme]) { @include color-scheme-dark; } } // override defaults through the data-theme attribute. :root[data-theme=’dark’] { @include color-scheme-dark; } We apply the light color scheme per default, and then override that based on other conditions. It’s a good idea to check for the system preference in the prefers-color-scheme media query, but still give users the choice to toggle modes themselves, to adjust for whatever situation they’re currently in. To do that, we need to expose the dark mode variable through our website’s UI. Build the Light Switch The light switch to toggle modes is just a simple button. We can define it as a thing with an on/off state by using role=”switch” and the aria-checked attribute. We put an SVG icon in there that has an accessible title and two paths for the “on” and “off” icons respectively. We show/hide these in CSS based on the documents data-theme attribute. toggle dark mode Wire up the Power The switch looks good, but still needs some Javascript to actually do something. The main task here is to check which mode of the UI the user is currently seeing, and then to toggle the data-theme attribute to trigger the changes in CSS. We use a cookie to save the current theme setting, so we can persist the choice when somebody navigates through multiple pages, or even closes their browser and comes back later. If no cookie is set, we fall back to the system default again by checking the prefers-color-scheme media query. class DarkMode { constructor() { // define some properties this.isActive = false; this.cookieTimeoutDays = 30; this.cookieName = “darkMode”; this.toggleBtn = document.querySelectorAll(“.js-darkmode-toggle”); this.init(); } init() { // get initial setting, add event listeners this.isActive = this.getPreference(); this.toggleBtn.addEventListener(“click”, this.toggle); } getPreference() { // read if the user has selected a theme before, // otherwise fall back to media query for system defaults.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply