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 !
To implement dark-mode in your Nijor website :
File : App.js
import "nijor";
import "nijor/theme"; // Add this line of code to your App.js file
File : App.js
import "nijor";
import "nijor/theme"; // Add this line of code to your App.js file
<script src="/assets/modules/app.js" type="module" onload="window.nijor.RenderTheme()" async defer></script>
<!--
You need to onload="window.nijor.RenderTheme()"
so that dark mode automatically gets rendered if the browser color scheme is set to dark
-->
You can write separate CSS code for dark mode inside a Nijor Component by writing the CSS code for dark mode inside another style
tag with the dark
attribute.
<template>
<div>
<p>Hello !</p>
</div>
</template>
<style>
div{
background-color : white;
padding : 0.5rem;
color : black;
}
</style>
<style dark>
div{
background-color : rgb(31, 31, 31);
color : rgb(0, 153, 255);
}
</style>
window.nijor.getTheme()
: This method returns the value of current theme (light, dark, auto) of website.
window.nijor.getColorScheme()
: This method returns the value of current theme (light, dark, auto) of browser.
window.nijor.setTheme(theme)
: This method changes the theme of the website according to the value of parameter theme. Accepted values are "dark", "light", "auto"(browser's theme).