![]() 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 Animate Toggle Switch Button Based on Checkbox Value styles.css Added some styles to the switch-btn class, label tag, and icons to make the toggle switch button look good. Here in the above CSS code, we are hiding the checkbox input element using the display:none property. Transform: translate(-11px, 19px) rotate(120deg) ![]() Style the Toggle Button using CSS styles.css ![]() For icons, we are using google material symbols. Here we have added an input element of type checkbox and for creating a toggle switch we have a with class name switch-btn inside that we have tag followed by two icons (sun and moon icon). Change the Background Color using Javascriptĭesign a Custom Toggle Switch in HTML index.html.Animate Toggle Switch Button Based on Checkbox Value.Steps to Create Dark and Light Mode Toggle Switch Button in HTML CSS And we are also changing the body background color. If the user clicks on it we animate the switch to slide to the right and the sun icon changes to the moon icon. As shown in the above demo video, we have our custom dark/light toggle switch button with icons. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |