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.

How to change the theme

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

<template>
  <EBtn @click="toggleTheme">
    The theme is {{theme}}. Tap to change!
  </EBtn>
</template>

<script>
  import {useThemeStore} from "@/store/ThemeStore";

  const themeStore = useThemeStore();
  const {selectedTheme} = storeToRefs(themeStore); // @values : dark, light

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

</script>

Note

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

Semi Dark Layout

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

<template>
  <EBtn @click="toggleSemiDark">
    The semi-dark value is false. Tap to change!
  </EBtn>
</template>
<script setup>
  import {useThemeStore} from "@/store/ThemeStore"

  const layoutStore = useLayoutStore()

  // This is how you can get the semiDark value
  const {semiDark} = storeToRefs(themeStore)

  const toggleSemiDark = () => {
    themeStore.toggleSemiDark(true)
  }
</script>

• 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

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.

<template>
  <div :class="bg-${color}"> <!-- ... --> </div>

  <div class="BG-${color}"> <!-- ... --> </div>

</template>

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.