Dark Theme

Now with this release of Jumbo 6.1 and later versions, you can either set the dark theme as your default theme when your web app loads or can set this dynamically as per your requirement during runtime. Both of these implementation are explained in the below sections:

Note: This feature is only available for the version 6.1 and above. You can

Setup Dark Theme as your default theme

To setup Dark Theme as your default theme, open the /app/config/main.js file.

It will look something like shown below:

//... some import statements

import {mainTheme} from "../themes/main/default";
import {headerTheme} from "../themes/header/default";
import {sidebarTheme} from "../themes/sidebar/default";
import {footerTheme} from "../themes/footer/default";

//... more import statements

const config = {   

    //... other props of config object
    
    theme: createJumboTheme(mainTheme, headerTheme, sidebarTheme, footerTheme),
    
    //... other props of config

};

export {config};

Now, all you need to do is rather than importing theme objects from default/ folder, import these from dark/ folder. So, after changes your main.js file will look something like presented below:

//... some import statements

import {mainTheme} from "../themes/main/dark";
import {headerTheme} from "../themes/header/dark";
import {sidebarTheme} from "../themes/sidebar/dark";
import {footerTheme} from "../themes/footer/dark";

//... more import statements

const config = {   

    //... other props of config object
    
    theme: createJumboTheme(mainTheme, headerTheme, sidebarTheme, footerTheme),
    
    //... other props of config

};

export {config};

That is all you need to do to setup the Dark Theme as your default theme.

Set Dark Theme dynamically

Today's user experience guidelines asks for the light and dark mode implementation for the apps to give user a comfort of using the app during day and night time to ease their eyes.

Jumbo delivers that feature out-of-the-box and can easily be implemented dynamically as presented by following code where a two buttons "Apply Default" and "Apply Dark" are given to switch between Default and Dark themes.

Creating a component ThemeSwitcher with a file ThemeSwitcher.js:

import React from "react";

import {mainTheme as defaultMainTheme} from "/path-to-themes-folder/main/default";
import {headerTheme as defaultHeaderTheme} from "/path-to-themes-folder/header/default";
import {footerTheme as defaultFooterTheme} from "/path-to-themes-folder/footer/default";
import {sidebarTheme as defaultSidebarTheme} from "/path-to-themes-folder/sidebar/default";

import {mainTheme as darkMainTheme} from "/path-to-themes-folder/main/dark";
import {headerTheme as darkHeaderTheme} from "/path-to-themes-folder/header/dark";
import {footerTheme as darkFooterTheme} from "/path-to-themes-folder/footer/dark";
import {sidebarTheme as darkSidebarTheme} from "/path-to-themes-folder/sidebar/dark";

import useJumboTheme from "@jumbo/hooks/useJumboTheme";
import {createJumboTheme} from "@jumbo/utils";

const ThemeSwitcher = () => {
    const [isDarkMode, setIsDarkMode] = React.useState(false);
    const {setTheme} = useJumboTheme();
    
    React.useEffect(() => {
        if(isDarkMode) {
            setTheme(createJumboTheme(darkMainTheme, darkHeaderTheme, darkSidebarTheme, darkFooterTheme));
        } else {
            setTheme(createJumboTheme(defaultMainTheme, defaultHeaderTheme, defaultSidebarTheme, defaultFooterTheme));
        }        
    }, [mode]);
    
    return (
        <Div>
        <Button onClick={() => setIsDarkMode(false)}>Apply Default Theme</Button>
        <Button onClick={() => setIsDarkMode(true)}>Apply Dark Theme</Button>
        </Div>        
    )
}