Themes & Colors

Theme System Overview

Bimble Chat Vue uses a comprehensive theming system built on Vuetify 3 with dynamic color schemes and dark/light mode support.

Dynamic Color Schemes

The application supports 5 predefined color schemes (Blue, Aqua, Purple, Green, Cyan) with real-time theme switching and automatic dark mode adaptations.

Available Color Schemes

Choose from 5 carefully crafted color schemes, each with light and dark mode variations:

Blue (Default)

Primary: #2687e5

Secondary: #49BEFF

Light Primary: #ECF2FF

Light Secondary: #E8F7FF

Dark Mode Colors:

Light Primary (Dark): #253662

Light Secondary (Dark): #1C455D

Aqua

Primary: #0074BA

Secondary: #47D7BC

Light Primary: #EFF9FF

Light Secondary: #EDFBF7

Dark Mode Colors:

Light Primary (Dark): #103247

Light Secondary (Dark): #0C4339

Purple

Primary: #763EBD

Secondary: #95CFD5

Light Primary: #F2ECF9

Light Secondary: #EDF8FA

Dark Mode Colors:

Light Primary (Dark): #26153C

Light Secondary (Dark): #09454B

Green

Primary: #0A7EA4

Secondary: #CCDA4E

Light Primary: #F4F9FB

Light Secondary: #FAFBEF

Dark Mode Colors:

Light Primary (Dark): #05313F

Light Secondary (Dark): #282917

Cyan

Primary: #01C0C8

Secondary: #FB9678

Light Primary: #EBF9FA

Light Secondary: #FFF5F2

Dark Mode Colors:

Light Primary (Dark): #003638

Light Secondary (Dark): #40241C

Theme Management System

The theming system consists of several key components working together:

Color Scheme Store

Pinia store managing the active color scheme state with 5 predefined schemes

src/stores/colorSchemeStore.ts

Settings Store

Manages theme mode (light/dark), language, and layout settings

src/stores/settingsStore.ts

Theme Utilities

Dynamic theme color application and dark mode color generation

src/utils/themeUtils.ts

Theme Initializer

Composable for initializing and watching theme changes

src/composables/useThemeInitializer.ts

Using Color Schemes

// Using the color scheme store
import { useColorSchemeStore } from '@/stores/colorSchemeStore'

export default {
  setup() {
    const colorSchemeStore = useColorSchemeStore()
    
    // Get available color schemes
    const availableSchemes = computed(() => colorSchemes)
    
    // Get current color scheme
    const currentScheme = computed(() => colorSchemeStore.currentColorScheme)
    
    // Change color scheme
    const changeColorScheme = (schemeName) => {
      colorSchemeStore.setColorScheme(schemeName)
    }
    
    return {
      availableSchemes,
      currentScheme,
      changeColorScheme
    }
  }
}

// Using the settings store for dark mode
import { useSettingsStore } from '@/stores/settingsStore'

export default {
  setup() {
    const settings = useSettingsStore()
    
    // Check if dark mode is active
    const isDarkMode = computed(() => settings.isDarkMode)
    
    // Toggle dark mode
    const toggleDarkMode = () => {
      settings.SET_DARK_MODE(!settings.isDarkMode)
    }
    
    // Set specific theme
    const setTheme = (themeName) => {
      settings.SET_THEME(themeName) // 'LIGHT_THEME' or 'DARK_THEME'
    }
    
    return {
      isDarkMode,
      toggleDarkMode,
      setTheme
    }
  }
}

// Initialize theming in your app
import { useThemeInitializer } from '@/composables/useThemeInitializer'

export default {
  setup() {
    // Initialize theme system
    const { initializeTheme } = useThemeInitializer()
    
    // Theme will be automatically initialized and watched for changes
    // - Default: Blue color scheme in light mode
    // - Watches for color scheme changes
    // - Watches for dark/light mode changes
    // - Applies colors dynamically to Vuetify theme
    
    return {}
  }
}

Light Theme Colors

The following colors are used in the light theme configuration:

Primary & Secondary Colors

Primary #2687e5 primary

Secondary #49BEFF secondary

Light Primary #ECF2FF lightprimary

Light Secondary #E8F7FF lightsecondary

Status Colors

Success #13DEB9 success

Warning #FFAE1F warning

Error #F44336 error

Info #539BFF info

Accent #FFAB91 accent

Light Status Colors

Light Success #E6FFFA lightsuccess

Light Warning #FEF5E5 lightwarning

Light Error #FDEDE8 lighterror

Light Info #EBF3FE lightinfo

Text & Border Colors

Text Primary #2A3547 textPrimary

Text Secondary #2A3547 textSecondary

Border Color #e5eaef borderColor

Input Border #A0AFC7 inputBorder

Background Colors

Surface #ffffff surface

Background #ffffff background

Container Bg #ffffff containerBg

Hover Color #f6f9fc hoverColor

Grey Scale Colors

Grey 100 #F2F6FA grey100

Grey 200 #EAEFF4 grey200

Soft Background #F8FAFC softBg

Dark Theme Colors

The following colors are used in the dark theme configuration (showing key differences):

Primary & Secondary Colors

Light Primary (Dark) #253662 lightprimary

Light Secondary (Dark) #1C455D lightsecondary

Accent (Dark) #FA896B accent

Light Status Colors (Dark)

Light Success (Dark) #1B3C48 lightsuccess

Light Warning (Dark) #4D3A2A lightwarning

Light Error (Dark) #4B313D lighterror

Light Info (Dark) #223662 lightinfo

Text & Border Colors (Dark)

Text Primary (Dark) #EAEFF4 textPrimary

Text Secondary (Dark) #7C8FAC textSecondary

Border Color (Dark) #333F55 borderColor

Input Border (Dark) #465670 inputBorder

Background Colors (Dark)

Surface (Dark) #2a3447 surface

Background (Dark) #2a3447 background

Hover Color (Dark) #333f55 hoverColor

Soft Background (Dark) #13171e softBg

Grey Scale Colors (Dark)

Grey 100 (Dark) #333F55 grey100

Grey 200 (Dark) #465670 grey200

Theme Configuration Files

LightTheme.ts

Light theme configuration with bright colors and clean aesthetics

src/theme/LightTheme.ts

DarkTheme.ts

Dark theme configuration optimized for low-light environments

src/theme/DarkTheme.ts

colorSchemeStore.ts

Pinia store managing theme state and switching logic

src/stores/colorSchemeStore.ts

useThemeInitializer.ts

Composable for initializing and managing theme settings

src/composables/useThemeInitializer.ts

Implementation Examples

                                
                                
                                Using Vuetify Theme Colors
/* Using Vuetify theme colors in your CSS */
.custom-component {
  background-color: rgb(var(--v-theme-surface));
  color: rgb(var(--v-theme-on-surface));
  border: 1px solid rgb(var(--v-theme-outline));
}

.success-message {
  background-color: rgb(var(--v-theme-success));
  color: rgb(var(--v-theme-on-success));
  padding: 1rem;
  border-radius: 8px;
}
                            

Theme Store Usage

// Using the theme store in a Vue component
import { useColorSchemeStore } from '@/stores/colorSchemeStore'

export default {
  setup() {
    const colorSchemeStore = useColorSchemeStore()
    
    const toggleTheme = () => {
      colorSchemeStore.toggleScheme()
    }
    
    return {
      isDarkMode: computed(() => colorSchemeStore.isDarkMode),
      currentTheme: computed(() => colorSchemeStore.getColorScheme),
      toggleTheme
    }
  }
}

// Using with Options API
import { mapStores } from 'pinia'
import { useColorSchemeStore } from '@/stores/colorSchemeStore'

export default {
  computed: {
    ...mapStores(useColorSchemeStore),
    isDarkMode() {
      return this.colorSchemeStore.isDarkMode
    },
    currentTheme() {
      return this.colorSchemeStore.getColorScheme
    }
  },
  methods: {
    toggleTheme() {
      this.colorSchemeStore.toggleScheme()
    }
  }
}

Vuetify Theme Configuration
// src/plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import { LightTheme } from '@/theme/LightTheme'
import { DarkTheme } from '@/theme/DarkTheme'

export default createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: LightTheme,
      dark: DarkTheme
    },
    variations: {
      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
      lighten: 5,
      darken: 5
    }
  }
})
                            

Customization Guide

1

Add New Color Scheme

Add a new color scheme to the colorSchemeStore.ts

// src/stores/colorSchemeStore.ts
export const colorSchemes: ColorScheme[] = [
  // ... existing schemes
  {
    name: 'custom',
    displayName: 'Custom',
    primary: '#YOUR_PRIMARY_COLOR',
    secondary: '#YOUR_SECONDARY_COLOR',
    lightprimary: '#YOUR_LIGHT_PRIMARY',
    lightsecondary: '#YOUR_LIGHT_SECONDARY'
  }
];

2

Update Dark Mode Colors

Add dark mode color mappings in themeUtils.ts

// src/utils/themeUtils.ts
const darkColorMap: { [key: string]: { lightprimary: string; lightsecondary: string } } = {
  // ... existing mappings
  custom: { 
    lightprimary: '#YOUR_DARK_PRIMARY', 
    lightsecondary: '#YOUR_DARK_SECONDARY' 
  }
};

3

Test Your Custom Theme

Run the development server and test your new color scheme

npm run dev

# Use the color scheme in your component:
colorSchemeStore.setColorScheme('custom')

Best Practices

Accessibility

Ensure sufficient contrast ratios for text readability in both themes

Consistency

Use CSS variables consistently across all components and pages

Responsive

Test theme colors across different screen sizes and devices

Performance

Minimize CSS reflows when switching between themes

Theme System Overview

Dynamic Color Schemes

Available Color Schemes

Blue (Default)

Dark Mode Colors:

Aqua

Dark Mode Colors:

Purple

Dark Mode Colors:

Green

Dark Mode Colors:

Cyan

Dark Mode Colors:

Theme Management System

Color Scheme Store

Settings Store

Theme Utilities

Theme Initializer

Using Color Schemes

Light Theme Colors

Primary & Secondary Colors

Status Colors

Light Status Colors

Text & Border Colors

Background Colors

Grey Scale Colors

Dark Theme Colors

Primary & Secondary Colors

Light Status Colors (Dark)

Text & Border Colors (Dark)

Background Colors (Dark)

Grey Scale Colors (Dark)

Theme Configuration Files

LightTheme.ts

DarkTheme.ts

colorSchemeStore.ts

useThemeInitializer.ts

Implementation Examples

Using Vuetify Theme Colors

Theme Store Usage

Vuetify Theme Configuration

Customization Guide

Add New Color Scheme

Update Dark Mode Colors

Test Your Custom Theme

Best Practices

Accessibility

Consistency

Responsive

Performance

What's Next?

Icons

Vuetify Config

Internationalization