Then along all your CSS instead of declaring colors the normal way, you refer to the CSS variable: body ĬSS variables do not need a page refresh (this will be useful later when the user could switch theme), once you change the value of a variable the page will change automatically. You define, for example, the background color to white, but if the :root element (HTML tag) got a class dark the background will be black. After this, we are going to implement a Component that we can use in our site that allows the user to switch mode and save the preference. What are we going to implementįirst of all, we are coding a script that will be injected in our header during site building, it will take care of reading user preference from LocalStorage, or from OS color schema preference if needed, in case the user want a dark theme, it will add the class dark at level, the class can then be used to switch between CSS variables or to implement dark them with a CSS framework (for example Tailwind supports Dark Theme using the class strategy). We also need to be sure that our injected script is really performant since we are blocking render while we read/write user preferences.
#Bootstrap 5 dark mode switch code
In Gatsby (but in general in every static generator) we do not have access to this part of the page, so we need to inject the code at compiling time using gatsby-ssr.js. We need to implement the checks with blocking scripts before the body starts to render. If the site checks the client when the DOM already is already rendered (or is rendering) and then activates the Dark Mode (if necessary), the screen will flicker from default mode to Dark Mode (yes, Youtube flicker from light mode to dark mode!). It also should give the user to change its preference. When you visit a site, the site itself should check if you have a stored preference and according to it, showing the right Mode, if you don’t have a preference, it should check if your OS supports Dark Mode and you have it enabled, activate the correct Mode (or the default one) and save the preference on the client. Many companies are now requesting this feature to be present in their interfaces since dark mode can reduce battery drainage (especially on OLED mobile phones), can be read better in low light, it’s believed to help people with visual impairments to read better, and more.
Done.One of the latest trends in websites (and apps) is Dark Mode, in Dark Mode websites (and apps) look dark(!!!), usually dark background, light text, and some accent color. Add the Dark & Light Mode Switcher to the page. Insert the main script switch.js into your Bootstrap 5 project.
If the switch is off then it is light mode so, switch the theme and remove ‘lightSwitch’ key from local storage.ġ. If the switch is on then set ‘lightSwitch’ local storage key and call darkmode.
Light Mode: Check whether the switch is on (checked) or not.Basically, It replaces/toggles every CSS class that has ‘-light’ class with ‘-dark’. Dark Mode: It checks if browser local storage has ‘lightSwitch’ key, if the key has ‘dark’ value then changes the theme to ‘dark mode’.Just another dark & light mode switcher component for the latest Bootstrap 5 framework.
0 kommentar(er)
