palette UltraViolet Theme Color Palette
The UltraViolet theme features a dynamic color palette with full light and dark mode support. Dark mode uses vibrant, electric colors while light mode uses softer, more muted tones for optimal readability in any environment.
By using these css variables, you can easily create a huge number of themes, light or dark, w/o needing to write css for each case. .item { color: var(--uv-cyan) } versus [data-bs-theme='light'] {
.item { color: $cyan } } and [data-bs-theme='dark'] { .item { color: $cyan } }
Key Features:
- check_circleDual theme support (light/dark)
- check_circleCSS custom properties for dynamic theming
- check_circleHigh contrast ratios for accessibility
- check_circleConsistent semantic color mapping
Usage Guidelines:
- infoUse CSS variables (--ud-*) for theme switching
- infoDark mode: vibrant, electric colors
- infoLight mode: softer, muted tones
- infoSwitch views above to compare themes
star Primary Colors
category Semantic Colors
gradient Grayscale Palette
light_mode Light Background Examples
dark_mode Dark Background Examples
code SCSS Variables
// UltraViolet Theme Color Variables with Light/Dark Mode Support
// CSS Custom Properties for Light/Dark Mode
:root,
[data-bs-theme="light"] {
--ud-blue: #7cc5f9; // Light mode - softer
--ud-indigo: #9959f6;
--ud-purple: #a180d7;
--ud-pink: #f284d3;
--ud-red: #ee8d93;
--ud-orange: #f6d47f;
--ud-yellow: #ffd954;
--ud-green: #86f5af;
--ud-teal: #7eaec5;
--ud-cyan: #7efcee;
}
[data-bs-theme="dark"] {
--ud-blue: #1ba2f6; // Dark mode - vibrant
--ud-indigo: #6610f2;
--ud-purple: #6f42c1;
--ud-pink: #ea39b8;
--ud-red: #e44c55;
--ud-orange: #f1b633;
--ud-yellow: #ffc107;
--ud-green: #3cf281;
--ud-teal: #3f81a2;
--ud-cyan: #32fbe2;
}
// Sass variables (dark mode values for compilation)
$blue: #1ba2f6 !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #ea39b8 !default;
$red: #e44c55 !default;
$orange: #f1b633 !default;
$yellow: #ffc107 !default;
$green: #3cf281 !default;
$teal: #3f81a2 !default;
$cyan: #32fbe2 !default;
// Grayscale
$white: #ffffff !default;
$gray-100: #f5f6fa !default; // a bit cleaner and brighter
$gray-200: #ebedf0 !default;
$gray-300: #d7d9de !default;
$gray-400: #c2c5cc !default;
$gray-500: #9fa3ac !default;
$gray-600: #7a7f8c !default;
$gray-700: #4f5666 !default; // deeper for more contrast
$gray-800: #2c2f3a !default;
$gray-900: #17181f !default; // almost black but softer
$black: #0d0d0d !default;
// Semantic Colors
$primary: $green !default;
$secondary: $indigo !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-200 !default;
$dark: $gray-900 !default;
// Theme Mono Colors Map
$theme-mono-colors: (
"mono-100": $gray-100,
"mono-200": $gray-200,
"mono-300": $gray-300,
"mono-400": $gray-400,
"mono-500": $gray-500,
"mono-600": $gray-600,
"mono-700": $gray-700,
"mono-800": $gray-800,
"mono-900": $gray-900,
) !default;extension Usage Examples
HTML Classes
Primary
Secondary
Success
Info
Warning
Danger
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-warning text-dark">Warning</span>SCSS/CSS Usage
// Using CSS Custom Properties (theme-aware)
.my-component {
background-color: var(--ud-purple);
color: var(--bs-body-color);
border: 2px solid var(--ud-cyan);
&:hover {
opacity: 0.8;
}
}
// Using Sass variables (compile-time)
.legacy-component {
background-color: $primary;
border: 2px solid $secondary;
}