Colors & Themes

Themes

Light

The light theme enhances readability and visibility in bright environments, making it ideal for users who prefer a clean and fresh aesthetic.

Dark

A dark theme reduces eye strain in low-light environments creates a sleek, modern aesthetic that helps content stand out, enhancing focus and immersion for users.

System Theme

Devices usually feature light and dark themes. Onomis Dashboard respects the system theme and automatically adjusts to it.

To enable this feature, change the value of the theme in app.config.js to system.

How to change the theme

The default value of theme in the app.config.js is set to light. Additionally, we've created a toggleThemeaction in src/store/themeSlice, allowing you to change the theme dynamically.

// Redux Imports
import {useDispatch, useSelector} from "react-redux"

// Hooks
import useTheme from "@hooks/useTheme"

// Actions
import {toggleTheme} from "@/store/themeSlice"

// Custom Components Imports
import EBtn from "@components/Elements/EBtn"

export const themSwitcherExample = () => {
    // Hooks
    const dispatch = useDispatch();
    const {theme} = useTheme() // @values : dark, light

    // Toggle Theme
    const toggleThemeHandler = () => {
        if (theme === "dark") dispatch(toggleTheme('light'))
        else dispatch(toggleTheme('dark'))
    }


    return (
        <EBtn onClick={toggleThemeHandler}>
            The theme is {theme}. Tap to change!
        </EBtn>
    )
}

Note

We auto store the theme in local storage for later usage.

Semi Dark Layout

Onomis offer a semi-dark layout to enhances readability, a modern, balanced design without being fully dark.

The default value of semiDark in the app.config.js is set to 'false'. We've created a toggleSemiDarkaction in src/store/themeSlice, allowing you to change the theme dynamically.

// Redux Imports
import {useDispatch, useSelector} from "react-redux"

// Actions
import {toggleSemiDark} from "@/store/themeSlice"

// Custom Components Imports
import EBtn from "@components/Elements/EBtn"

export const themSwitcherExample = () => {
    // Hooks
    const dispatch = useDispatch();
    
    // This is how you can get the semiDark value
    const {semiDark} = useSelector((state) => state.themeSlice);

    // Toggle Theme
    const semiDarkToggler = () => {
        dispatch(toggleSemiDark(true)) // @possible-values: true, false
    }

    return (
        <EBtn onClick={semiDarkToggler}>
            The semi-dark value is false. Tap to change!
        </EBtn>
    )
}

• We auto store the semi-dark in local storage for later usage.

Colors

You can simply customize the theme/colors in our template.

File: src/styles/_vars.scss

Our color variables live in the src/styles/_vars.scss file where you can update the primary colors to your desired color.

$primary: 85, 132, 255; 
$primary: 134, 104, 217; 

$secondary: 103, 144, 197; 
$secondary: 31, 55, 49; 

Dark Theme Vars

The dark color palettes start with $dark_theme-[shade] :

$dark_theme-300: 35, 39, 48; 
$dark_theme-300: 31, 35, 43; 
/* ... */

Related: NavbarThemeSwitcher component

Light Theme Vars

The light color palettes start with $light_theme-[shade] :

$light_theme-300: 233, 235, 239; 
$light_theme-300: 223, 225, 229; 
/* ... */

Custom skin colors

The custom skin palette start with $skin_custom_dark_theme-[shade] :

$skin_custom_dark_theme-100: 78, 78, 78; 
$skin_custom_light_theme-100: 255, 255, 255; 
/* ... */

Related: NavbarThemeSwitcher component

Tailwind CSS

our predefined colors are added in tailwind.config.js under the theme.color section and are available everywhere in the framework where you use colors, like text color utilities, border color utilities, background color utilities, and more.

<div class="dark:bg-dark_theme-200 bg-light_theme-200 text-color-primary">
    <!-- ... -->
</div>

Related: Tailwind CSS

Contextual Utility Classes

Since Tailwind CSS doesn't support dynamic colors like bg-${color} directly, We have included contextual utilities for maximum flexibility, adaptability, maintenance, and theme-ability. You can find them in src/src/@core/scss/abstracts/_colors.scss. Our color variables are inherently contextual according to their names.

  <div class={`bg-${color}`}> {/* ... */} </div> 
  <div class={`BG-${color}`}> {/* ... */} </div> 

Here's the list of our custom utility classes:

• BG-${color}
• text-color-${color}
• after-BG-${color}
• before-BG-${color}
• hover-BG-${color}
• hover-enabled-BG-${color}
• focus-visible-BG-${color}
• focus-visible-enabled-BG-${color}
• hover-text-${color}
• focus-visible-text-${color}
• hover-shadow-${color}
• border-color-${color}
• after-border-color-${color}
• before-border-color-${color}
• shadow-color-${color}
• placeholder-color-${color}
• fill-color-${color}

Note

You can add the -important suffix to enhance the specificity of the class.