Notes on implementing dark mode
The article explores refining dark mode implementation on websites using Tailwind for styling. It emphasizes a tri-state setting (dark, light, system default), local storage usage, and technical considerations for a seamless experience.
Read original article
The article discusses the implementation of dark mode on a website, specifically focusing on the refinements needed for a great dark mode experience. It mentions using Tailwind for styling and covers key concepts like the prefers-color-scheme CSS media selector and local storage for storing user preferences. The author emphasizes the importance of a tri-state setting for dark mode (dark, light, or system default) and provides code snippets for achieving this functionality. Additionally, it addresses common issues like avoiding theme flicker on page load by checking the theme initially with inline JavaScript. The article highlights the benefits of using local storage for persistent user settings and explains the technical considerations for a smooth dark mode implementation.
Related
Exposition of Front End Build Systems
Frontend build systems are crucial in web development, involving transpilation, bundling, and minification steps. Tools like Babel and Webpack optimize code for performance and developer experience. Various bundlers like Webpack, Rollup, Parcel, esbuild, and Turbopack are compared for features and performance.
Microfeatures I love in blogs and personal websites
The article explores microfeatures for blogs and websites inspired by programming concepts. It highlights sidenotes, navigation tools, progress indicators, and interactive elements to improve user experience subtly. Examples demonstrate practical implementations.
Local First, Forever
Local-first software emphasizes storing data on the user's device, occasionally syncing with the internet. Benefits include data control, but challenges like syncing between devices and company reliability exist. Using cloud services like Dropbox for syncing, including CRDT for conflict handling, is recommended for simplicity and reliability.
Google no longer developing Material Web Components
Material Web is a library of web components based on Material 3 for creating attractive and accessible web apps. Components are in maintenance mode, seeking new maintainers. Visit the Material Web GitHub for details.
HSL: An Intuitive Way to Represent Color in CSS
HSL in CSS simplifies color representation by breaking it into hue, saturation, and lightness components. It enables easy color manipulation and transparency adjustments, aiding dynamic effects without external tools or JavaScript.
9 commentsYou can read more about it here: https://github.com/WICG/web-preferences-api
Feedback is welcome
So there's still some work left here until I'd call the implementation "great".
(A simple css check for prefers-color-scheme handles this.)
It's a shame there isn't a standard high contrast setting, though. That seems more important than dark mode. Oh well.
The extra effort is only needed on Firefox and Safari, though. Chromium already handles this somehow.
Now I have to check if my implementation supports cross-tab changes...
Related
Exposition of Front End Build Systems
Frontend build systems are crucial in web development, involving transpilation, bundling, and minification steps. Tools like Babel and Webpack optimize code for performance and developer experience. Various bundlers like Webpack, Rollup, Parcel, esbuild, and Turbopack are compared for features and performance.
Microfeatures I love in blogs and personal websites
The article explores microfeatures for blogs and websites inspired by programming concepts. It highlights sidenotes, navigation tools, progress indicators, and interactive elements to improve user experience subtly. Examples demonstrate practical implementations.
Local First, Forever
Local-first software emphasizes storing data on the user's device, occasionally syncing with the internet. Benefits include data control, but challenges like syncing between devices and company reliability exist. Using cloud services like Dropbox for syncing, including CRDT for conflict handling, is recommended for simplicity and reliability.
Google no longer developing Material Web Components
Material Web is a library of web components based on Material 3 for creating attractive and accessible web apps. Components are in maintenance mode, seeking new maintainers. Visit the Material Web GitHub for details.
HSL: An Intuitive Way to Represent Color in CSS
HSL in CSS simplifies color representation by breaking it into hue, saturation, and lightness components. It enables easy color manipulation and transparency adjustments, aiding dynamic effects without external tools or JavaScript.