The issue of this design is close to caveat 1, it will have the blinking issue. Originally, my toggle dark mode button is under dark mode it will display the sun icon and display the moon icon under the light mode. 1 // The code I am using in my blog built with Next.js import Ĭaveat 2 - Transition of the toggle them button In this way, TailwindCSS can recognize what is the current theme. The ThemeContext will add class="dark" to the root HTML upon mounting the app. I wrote a ThemeContext to toggle dark mode in my blog built on top of Next.js. They use this philosophy to reduce bundle size and speed up the first paint of the browser, but it also brings lots of new challenges to the developer, such as toggling the dark theme button on the blog. I’d prefer a more ‘native’ way of achieving the same thing I did try searching for whether there were any standards, discussions or proposals in place, but couldn’t find any.įor my own purposes I am using this extension, it toggles the browser’s own light and dark mode preference.What Astro had brought to us is a world without Javascript as default. Looking at this from a high level, I feel that the work and modifications involved in providing a user toggle takes me a step too far from focusing on the content-first nature of a web page. I am still not convinced that offering an option to toggle dark mode is worth the complexity that it entails: possibly some custom CSS, a JavaScript kludge either way, and some additional CSS and further JavaScript band-aid patches to deal with edge cases. Another is to block and assign the dark mode as early as possible during page load. This is especially common on content heavy pages where certain elements are blocking but take a while to load (embedded YouTube videos).Ī workaround is to hide the body, use Javascript to apply the theme, and then make the body visible. What’s happening is that the browser is painting the page for a few cycles before the Javascript runs, the local storage is checked, and then the theme gets applied. In certain scenarios, when there is a lot of content on the page and the user has saved a dark theme preference for the site, there will briefly appear a blinding white flash before the dark theme activates. Sadly, the hackiness (or its lesser alternative) still isn’t enough. This can be done by adding a listener, window.matchMedia('(prefers-color-scheme: dark)').addListener(.) and reapplying the themes. However, it works, so it could be considered the best of both worlds: it respects the user’s choice at a granular site level, while still allowing the use of native CSS features.Ī further enhancement is to listen to any operating system or browser level preference changes and adjust the applied theme accordingly. The CSSStyleSheet and CSSRule APIs aren’t widely used nor are they well documented. The code involved is somewhat complicated and unoptimized and will probably be slow for heavy stylesheets. The code also includes storing the user’s preference in localStorage, so it remembers on page refresh. It requires looping through every stylesheet’s rules, inspecting the media of each one, and swapping the light and dark color themes out. I’ve managed to work out a way of using Javascript to toggle the light and dark themes, while still making use of the prefers-color-scheme feature, and without any custom classes. Still hacky Javascript, using CSS media features As a convenience, it’s also common to save the user’s toggled theme to local storage so that it is automatically loaded on their next visit. The CSS is messier, and grows unwieldy as the site’s style expands. The prefers-color-scheme feature is still used to start with, and clicking the button then applies the alternate class based on the current detected theme. The most common technique for offering a toggle is to use Javascript to apply a custom class at the body level. The hacky Javascript way, using custom classes For instance, a user might set a preference for dark mode in their browser, but would want to switch to light mode for a text-heavy page. Life is simple, but there’s one glaring omission - letting the user set this preference at a more granular website or page level. The user’s preference value is read from the operating system or the browser’s own setting. Design CSS for one color scheme, then override values for the other using the prefers-color-scheme media feature. The other involves a combination of CSS and Javascript and is usually accompanied by a sun/moon toggle that the user can click on. The first makes use of pure CSS and is managed natively by the browser. There are two ways that websites can offer users a choice between light and dark mode. The unpleasant hackiness of CSS dark mode toggles Mendhak / Code The unpleasant hackiness of CSS dark mode toggles
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |