Themes

Dark mode is common in modern applications. While it can be implemented using CSS media queries, that approach only works when the browser or operating system theme is already set to dark.

In many applications, users should be able to choose between light mode, dark mode, or automatic mode without changing their browser settings. Nijor provides built-in support for this through theme-aware styles and the nijor/theme module.

In Nijor, themes are defined using the theme attribute on style tags. Styles inside an style block without a theme attribute are applied for all themes and are generally used as the base or light theme.


        <body>
            <div>
                <h1>Nomoskar</h1>
            </div>
        </body>

        <style>
            div {
                margin: 10px;
                padding: 10px;
                background-color: white;
            }

            h1 {
                color: black;
            }
        </style>

        <style theme="dark">
            div {
                background-color: black;
            }

            h1 {
                color: white;
            }
        </style>

        <style theme="dim">
            div {
                background-color: rgb(52, 74, 87);
            }

            h1 {
                color: white;
            }
        </style>

In this example, the unthemed style block provides the base styles. The themed style blocks override specific properties when the active theme matches their theme value.

The nijor/theme module provides functions for handling themes in a Nijor application. It exports two functions: autoTheme() and setTheme().


        import { autoTheme, setTheme } from "nijor/theme";

The autoTheme() function automatically applies the appropriate theme based on the browser or system preference. If the browser is in dark mode, Nijor applies the styles defined in <style theme="dark">. If the browser is in light mode, Nijor uses the default styles.


        import { autoTheme } from "nijor/theme";

        autoTheme();

The setTheme() function manually sets the active theme.


        import { setTheme } from "nijor/theme";

        setTheme("dark");
        setTheme("light");
        setTheme("cherry");

Once a theme is set manually, autoTheme() no longer controls the theme. To restore automatic theme handling, use setTheme("auto").


            setTheme("auto");

The currently selected theme is stored in localStorage. You can read it using :


        const theme = window.localStorage.getItem("theme");

If no theme has been set manually, this returns "auto".

Add the following code to App.js.


        import { autoTheme } from "nijor/theme";
        autoTheme();

Conditional Classes

Nijor allows classes to be added conditionally using the class:classname syntax. This syntax is used as an attribute on an element.

If the condition is true, the class is added to the element. If the condition is false, the class is not added.


        <body>
            <button class:active="{isActive}">Save</button>
        </body>

        <script>
            const isActive = true;
        </script>

        <style>
            .active{
                color : #0099ff;
            }
        </style>

In this example, the class active is added only when isActive is true.

This also works with reactive variables.


        <body>
            <button class:enabled="{$.enabled}" on:click="toggle()">Toggle</button>
        </body>

        <script>
            $.enabled = false;

            function toggle($) {
                $.enabled = !$.enabled;
            }
        </script>

        <style>
            .enabled{
                color : #0099ff;
            }
        </style>

Here, the active class is added and removed automatically as the value of $.enabled changes.

নিজৰ

নিজৰ

নিজৰ

Themes

Conditional Classes