For more on the science behind dark mode, check out this article in The Observer. Aside from looking pretty cool, dark mode can help with device-energy conservation and reducing eye strain.
#REACT DARK MODE SWITCH WITH CSS SOFTWARE#
Dark mode is becoming increasingly popular in app and software design.
While working on a React app, I wanted to implement a day/night mode feature that allows the user to select whether or not they want to use a light or dark theme. The first task is to make the button a circle and remove the default button styles. This parent context will hold adaptive colors and sizes to pass down to SVG. The element is the container for the icon shapes and styles.
Instead, SVG positioning and CSS transforms are used. The theme switch component has little surface area, so you don’t need grid or flexbox for layout. This makes for nice defensive styles against network turbulence.
#REACT DARK MODE SWITCH WITH CSS PLUS#
The inline height and width attributes on the SVG plus the use of currentColor give minimal style rules for the browser to use if CSS doesn't load. It can be nice to test your SVG as if CSS didn't load to ensure the result isn't super large or causing layout issues. The sun icon will be eclipsed by a moon shape with an SVG mask, simply by moving a circle shape in and out of a mask area. Masks with SVG are powerful, allowing the colors white and black to either remove or include parts of another graphic. To create the illusion of a seamless transition between light (sun) and dark (moon), the moon is an augmentation of the sun icon, using an SVG mask.
Icon SVG sourced from with minor adjustments made. The lines plus the circle shapes create a nice sun with beams. This time, instead of the value of fill being currentColor, each line's stroke is set. Next, the sunbeam lines are added just below the circle, inside of a group element group. Īdditionally, the mask property points to an SVG element's ID, which you will create next, and finally given a fill color that matches the page's text color with currentColor. The is centered by setting the cx and cy properties to 12, which is half of the viewport size (24), and then given a radius ( r) of 6 which sets the size. The sun graphic consists of a circle and lines which SVG conveniently has shapes for. In addition to the required viewBox attribute on the element, add height and width for similar reasons that images should get inline sizes. This is great to do for visual decorations, like the icon inside a button. The following SVG markup goes inside the : Īria-hidden has been added to the SVG element so screen readers know to ignore it as it's marked presentational. Interacting with the button can trigger new visual states for the vectors, making SVG great for icons. SVG provides a way to create high-quality, scalable shapes with minimal markup. In the case of this button, it will announce "light" or "dark" depending on what the aria-label has become. This markup addition signals to screen readers to politely, instead of aria-live="assertive", tell the user what changed. To indicate to screen readers that changes to aria-label should be announced, add aria-live="polite" to the button. Last, add an to hold the state of the icon button, so screen readers can share the state of the theme to folks who are visually impaired. Additionally, since the button content is an icon rather than text, add a title attribute to provide information about the button's purpose. The button needs a class for use from CSS and an ID for use from JavaScript. Diagram shows a preview of JavaScript page load and document interaction events to overall show there's 4 paths to setting the theme Markup #Ī should be used for the toggle, as you then benefit from browser-provided interaction events and features, such as click events and focusability. For example, the browser should be made aware of the preference as soon as possible to prevent page color flashes, and the control needs to first sync with the system then allow client-side stored exceptions. There are several web engineering considerations when building this feature. For example, a user's system is in a light theme, but the user prefers the website to display in the dark theme. This means that users may browse in a mode other than their system preferences. A website may provide settings for controlling the color scheme instead of relying entirely on the system preference.
0 kommentar(er)
