Dark-Mode is very popular these days. You can implement dark mode using CSS media queries. But, it has a little problem : dark mode will only get activated if your browser theme is set to dark.
So, what if you want to use dark-mode without your browser's dark-mode activated ? or What if you want the user to have the freedom to toggle between dark, light and automatic(based on browser's theme) modes without them changing the theme of the browser ?
You need to use Javascript for these use cases, and Nijor has got it covered !
Actually, with Nijor, you can not only implement dark mode, but also other themes. Example : Twitter (now X) has 3 color schemes : light, dark, dim.
In Nijor, we use the theme attribute on style tags to specify the compiler which styles to apply on which theme. The css code inside the style tag with no theme attribute is common code for all the themes and is generally used as the light theme.
<body>
<div>
<h1>Nomoskar</h1>
</div>
</body>
<style>
/* This style will be rendered irrespective of theme unless you tweak a few properties in other style tag*/
div{
margin: 10px;
padding: 10px;
background-color: white;
}
h1{
color: black;
}
</style>
<style theme="dark">
/* This style will be rendered when the theme is set to 'dark' */
div{
background-color: black;
}
h1{
color: white;
}
</style>
<style theme="dim">
/* This style will be rendered when the theme is set to 'dim' */
div{
background-color: rgb(52, 74, 87);
}
h1{
color: white;
}
</style>
The "nijor/theme" module imports 2 functions :
import { autoTheme } from 'nijor/theme';
autoTheme(); // Use this in the App.nijor file
/* autoTheme() automatically handles dark mode for the website.
If the browser's mode is dark mode, it applies the styles specified in <style theme="dark">*/
import { setTheme } from 'nijor/theme';
setTheme('dark'); // Applies the styles specified in <style theme="dark">
setTheme('light'); // Applies the styles specified in <style theme="light">
setTheme('cherry'); // Applies the styles specified in <style theme="cherry">
/* Once you manually set a theme, the autoTheme() function stops working */
setTheme('auto'); // Resets the theme ; autoTheme() works again as expected
/* In order to get the current theme */
const theme = window.localStorage.getItem('theme'); // Returns 'auto' if theme hasn't been set yet.