brandbrandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout

Customization

Learn how to theme, customise, and extend the framework.

Theme colors

Regardless of the framework, all versions utilize the same variables.scss file to control the core look and feel. Changing these variables affects both Light and Dark modes automatically where Bootstrap CSS variables are used.

// 1. Theme Color Customization
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$error: #dc3545;
$light: #f8f9fa;
$dark: #343a40;
// 2. Font Family
$font-family-base: 'DM Sans', sans-serif;
// 3. Border Radius
$border-radius:               0.375rem;
$border-radius-lg:            0.5rem;
$border-radius-sm:            0.25rem;
// 4. Dark Mode Base Colors (mapped to CSS Vars)
$body-bg-dark:                #1c1c1c; // Main dark background
$body-color-dark:             #b0b0b0; // Main dark text
Framework Specific Setup

Select your framework below to see how to enable the theme provider and Dark Mode toggling.

Html
React
Next
Remix
Vue
Nuxt
Svelte
//src/main.js
    // Example function to toggle theme
    function toggleTheme() {
        const html = document.documentElement;
        if (html.getAttribute('data-bs-theme') === 'dark') {
            html.setAttribute('data-bs-theme', 'light');
        } else {
            html.setAttribute('data-bs-theme', 'dark');
        }
    }
// 1. Wrap your app with a Theme Provider (Context API)
import { ThemeProvider, useTheme } from './context/ThemeContext';
function App() {
  return (
  );
}
// 2. Toggle Button Component
const ThemeToggle = () => {
  const { theme, toggleTheme } = useTheme();
  return (
      Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
  );
};
// 1. Install next-themes: npm install next-themes
// 2. Wrap your app in layout.js (App Router)
import { ThemeProvider } from 'next-themes'
export default function RootLayout({ children }) {
  return (
          {children}
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var parent = elem.parentElement || head;
					parent.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|?)_cacheOverride=d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					parent.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
  )
}
// 3. Toggle Component
'use client'
import { useTheme } from 'next-themes'
export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  return (
     setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle Mode
  )
}
// root.tsx
export default function App() {
  const data = useLoaderData();
  // Use a cookie or session to store theme state
  return (
        ...
  );
}
// Use an action to set the cookie 'theme' to 'dark' or 'light'
// 1. Install VueUse: npm i @vueuse/core
// 2. In your component setup
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark({
  selector: 'html',
  attribute: 'data-bs-theme',
  valueDark: 'dark',
  valueLight: 'light',
})
const toggleDark = useToggle(isDark)
// 1. Install: npm install --save-dev @nuxtjs/color-mode
// 2. nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: '',
    dataValue: 'bs-theme', // Activate data-bs-theme="dark"
    storageKey: 'nuxt-color-mode'
  }
})
// 3. Component
const colorMode = useColorMode()
function toggle() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
// 1. themeStore.js
import { writable } from 'svelte/store';
const theme = writable('light');
export { theme };
// 2. In your Layout or Component
import { theme } from './themeStore.js';
function toggleTheme() {
    theme.update(current => {
        const newTheme = current === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-bs-theme', newTheme);
        return newTheme;
    });
}
Colors

You can edit all colors using variables presented in variable.scss file.

Preview
HTML
Vue
Nuxt
Svelte
// Color variables
$red: #FF0000;
$green:#00D67F;
$pink:#E92990;
$purple:#C02FF3;
$violet:#7429F8;
$indigo:#0069F7;
$blue:#298DFF;
$sky:#00B0FF;
$cyan:#18DDEF;
$teal:#29E1B3;
$neon:#81E230;
$lime:#C2E939;
$sun:#FFEA00;
$yellow:#FFC400;
$orange:#FF9100;
$pumpkin:#FF5700;
$brown:#954D15;
$gold:#C39749;
$smoke:#5e7d8a;
$gray:#9e9e9e;
$black:#2F343A;
$white:#fff;
// Red color variables
$red_light_5: mix(white, $red, 92%);
$red_light_4: mix(white, $red, 78%);
$red_light_3: mix(white, $red, 60%);
$red_light_2: mix(white, $red, 42%);
$red_light_1: mix(white, $red, 24%);
$red_dark_1: mix(black, $red, 10%);
$red_dark_2: mix(black, $red, 20%);
$red_dark_3: mix(black, $red, 30%);
$red_dark_4: mix(black, $red, 40%);
$red_dark_5: mix(black, $red, 50%);
// Green color variables
$green_light_5: mix(white, $green, 92%);
$green_light_4: mix(white, $green, 78%);
$green_light_3: mix(white, $green, 60%);
$green_light_2: mix(white, $green, 42%);
$green_light_1: mix(white, $green, 24%);
$green_dark_1: mix(black, $green, 10%);
$green_dark_2: mix(black, $green, 20%);
$green_dark_3: mix(black, $green, 30%);
$green_dark_4: mix(black, $green, 40%);
$green_dark_5: mix(black, $green, 50%);
// Pink color variables
$pink_light_5: mix(white, $pink, 92%);
$pink_light_4: mix(white, $pink, 78%);
$pink_light_3: mix(white, $pink, 60%);
$pink_light_2: mix(white, $pink, 42%);
$pink_light_1: mix(white, $pink, 24%);
$pink_dark_1: mix(black, $pink, 10%);
$pink_dark_2: mix(black, $pink, 20%);
$pink_dark_3: mix(black, $pink, 30%);
$pink_dark_4: mix(black, $pink, 40%);
$pink_dark_5: mix(black, $pink, 50%);
// Purple color variables
$purple_light_5: mix(white, $purple, 92%);
$purple_light_4: mix(white, $purple, 78%);
$purple_light_3: mix(white, $purple, 60%);
$purple_light_2: mix(white, $purple, 42%);
$purple_light_1: mix(white, $purple, 24%);
$purple_dark_1: mix(black, $purple, 10%);
$purple_dark_2: mix(black, $purple, 20%);
$purple_dark_3: mix(black, $purple, 30%);
$purple_dark_4: mix(black, $purple, 40%);
$purple_dark_5: mix(black, $purple, 50%);
// Violet color variables
$violet_light_5: mix(white, $violet, 92%);
$violet_light_4: mix(white, $violet, 78%);
$violet_light_3: mix(white, $violet, 60%);
$violet_light_2: mix(white, $violet, 42%);
$violet_light_1: mix(white, $violet, 24%);
$violet_dark_1: mix(black, $violet, 10%);
$violet_dark_2: mix(black, $violet, 20%);
$violet_dark_3: mix(black, $violet, 30%);
$violet_dark_4: mix(black, $violet, 40%);
$violet_dark_5: mix(black, $violet, 50%);
// Indigo color variables
$indigo_light_5: mix(white, $indigo, 92%);
$indigo_light_4: mix(white, $indigo, 78%);
$indigo_light_3: mix(white, $indigo, 60%);
$indigo_light_2: mix(white, $indigo, 42%);
$indigo_light_1: mix(white, $indigo, 24%);
$indigo_dark_1: mix(black, $indigo, 10%);
$indigo_dark_2: mix(black, $indigo, 20%);
$indigo_dark_3: mix(black, $indigo, 30%);
$indigo_dark_4: mix(black, $indigo, 40%);
$indigo_dark_5: mix(black, $indigo, 50%);
// Blue color variables
$blue_light_5: mix(white, $blue, 92%);
$blue_light_4: mix(white, $blue, 78%);
$blue_light_3: mix(white, $blue, 60%);
$blue_light_2: mix(white, $blue, 42%);
$blue_light_1: mix(white, $blue, 24%);
$blue_dark_1: mix(black, $blue, 10%);
$blue_dark_2: mix(black, $blue, 20%);
$blue_dark_3: mix(black, $blue, 30%);
$blue_dark_4: mix(black, $blue, 40%);
$blue_dark_5: mix(black, $blue, 50%);
// Sky color variables
$sky_light_5: mix(white, $sky, 92%);
$sky_light_4: mix(white, $sky, 78%);
$sky_light_3: mix(white, $sky, 60%);
$sky_light_2: mix(white, $sky, 42%);
$sky_light_1: mix(white, $sky, 24%);
$sky_dark_1: mix(black, $sky, 10%);
$sky_dark_2: mix(black, $sky, 20%);
$sky_dark_3: mix(black, $sky, 30%);
$sky_dark_4: mix(black, $sky, 40%);
$sky_dark_5: mix(black, $sky, 50%);
// Cyan color variables
$cyan_light_5: mix(white, $cyan, 92%);
$cyan_light_4: mix(white, $cyan, 78%);
$cyan_light_3: mix(white, $cyan, 60%);
$cyan_light_2: mix(white, $cyan, 42%);
$cyan_light_1: mix(white, $cyan, 24%);
$cyan_dark_1: mix(black, $cyan, 10%);
$cyan_dark_2: mix(black, $cyan, 20%);
$cyan_dark_3: mix(black, $cyan, 30%);
$cyan_dark_4: mix(black, $cyan, 40%);
$cyan_dark_5: mix(black, $cyan, 50%);
// Teal color variables
$teal_light_5: mix(white, $teal, 92%);
$teal_light_4: mix(white, $teal, 78%);
$teal_light_3: mix(white, $teal, 60%);
$teal_light_2: mix(white, $teal, 42%);
$teal_light_1: mix(white, $teal, 24%);
$teal_dark_1: mix(black, $teal, 10%);
$teal_dark_2: mix(black, $teal, 20%);
$teal_dark_3: mix(black, $teal, 30%);
$teal_dark_4: mix(black, $teal, 40%);
$teal_dark_5: mix(black, $teal, 50%);
// Neon color variables
$neon_light_5: mix(white, $neon, 92%);
$neon_light_4: mix(white, $neon, 78%);
$neon_light_3: mix(white, $neon, 60%);
$neon_light_2: mix(white, $neon, 42%);
$neon_light_1: mix(white, $neon, 24%);
$neon_dark_1: mix(black, $neon, 10%);
$neon_dark_2: mix(black, $neon, 20%);
$neon_dark_3: mix(black, $neon, 30%);
$neon_dark_4: mix(black, $neon, 40%);
$neon_dark_5: mix(black, $neon, 50%);
// Lime color variables
$lime_light_5: mix(white, $lime, 92%);
$lime_light_4: mix(white, $lime, 78%);
$lime_light_3: mix(white, $lime, 60%);
$lime_light_2: mix(white, $lime, 42%);
$lime_light_1: mix(white, $lime, 24%);
$lime_dark_1: mix(black, $lime, 10%);
$lime_dark_2: mix(black, $lime, 20%);
$lime_dark_3: mix(black, $lime, 30%);
$lime_dark_4: mix(black, $lime, 40%);
$lime_dark_5: mix(black, $lime, 50%);
// Sun color variables
$sun_light_5: mix(white, $sun, 92%);
$sun_light_4: mix(white, $sun, 78%);
$sun_light_3: mix(white, $sun, 60%);
$sun_light_2: mix(white, $sun, 42%);
$sun_light_1: mix(white, $sun, 24%);
$sun_dark_1: mix(black, $sun, 10%);
$sun_dark_2: mix(black, $sun, 20%);
$sun_dark_3: mix(black, $sun, 30%);
$sun_dark_4: mix(black, $sun, 40%);
$sun_dark_5: mix(black, $sun, 50%);
// Yellow color variables
$yellow_light_5: mix(white, $yellow, 92%);
$yellow_light_4: mix(white, $yellow, 78%);
$yellow_light_3: mix(white, $yellow, 60%);
$yellow_light_2: mix(white, $yellow, 42%);
$yellow_light_1: mix(white, $yellow, 24%);
$yellow_dark_1: mix(black, $yellow, 10%);
$yellow_dark_2: mix(black, $yellow, 20%);
$yellow_dark_3: mix(black, $yellow, 30%);
$yellow_dark_4: mix(black, $yellow, 40%);
$yellow_dark_5: mix(black, $yellow, 50%);
// Orange color variables
$orange_light_5: mix(white, $orange, 92%);
$orange_light_4: mix(white, $orange, 78%);
$orange_light_3: mix(white, $orange, 60%);
$orange_light_2: mix(white, $orange, 42%);
$orange_light_1: mix(white, $orange, 24%);
$orange_dark_1: mix(black, $orange, 10%);
$orange_dark_2: mix(black, $orange, 20%);
$orange_dark_3: mix(black, $orange, 30%);
$orange_dark_4: mix(black, $orange, 40%);
$orange_dark_5: mix(black, $orange, 50%);
// Pumpkin color variables
$pumpkin_light_5: mix(white, $pumpkin, 92%);
$pumpkin_light_4: mix(white, $pumpkin, 78%);
$pumpkin_light_3: mix(white, $pumpkin, 60%);
$pumpkin_light_2: mix(white, $pumpkin, 42%);
$pumpkin_light_1: mix(white, $pumpkin, 24%);
$pumpkin_dark_1: mix(black, $pumpkin, 10%);
$pumpkin_dark_2: mix(black, $pumpkin, 20%);
$pumpkin_dark_3: mix(black, $pumpkin, 30%);
$pumpkin_dark_4: mix(black, $pumpkin, 40%);
$pumpkin_dark_5: mix(black, $pumpkin, 50%);
// Brown color variables
$brown_light_5: mix(white, $brown, 92%);
$brown_light_4: mix(white, $brown, 78%);
$brown_light_3: mix(white, $brown, 60%);
$brown_light_2: mix(white, $brown, 42%);
$brown_light_1: mix(white, $brown, 24%);
$brown_dark_1: mix(black, $brown, 10%);
$brown_dark_2: mix(black, $brown, 20%);
$brown_dark_3: mix(black, $brown, 30%);
$brown_dark_4: mix(black, $brown, 40%);
$brown_dark_5: mix(black, $brown, 50%);
// Gold color variables
$gold_light_5: mix(white, $gold, 92%);
$gold_light_4: mix(white, $gold, 78%);
$gold_light_3: mix(white, $gold, 60%);
$gold_light_2: mix(white, $gold, 42%);
$gold_light_1: mix(white, $gold, 24%);
$gold_dark_1: mix(black, $gold, 10%);
$gold_dark_2: mix(black, $gold, 20%);
$gold_dark_3: mix(black, $gold, 30%);
$gold_dark_4: mix(black, $gold, 40%);
$gold_dark_5: mix(black, $gold, 50%);
// Smoke color variables
$smoke_light_5: mix(white, $smoke, 92%);
$smoke_light_4: mix(white, $smoke, 78%);
$smoke_light_3: mix(white, $smoke, 60%);
$smoke_light_2: mix(white, $smoke, 42%);
$smoke_light_1: mix(white, $smoke, 24%);
$smoke_dark_1: mix(black, $smoke, 10%);
$smoke_dark_2: mix(black, $smoke, 20%);
$smoke_dark_3: mix(black, $smoke, 30%);
$smoke_dark_4: mix(black, $smoke, 40%);
$smoke_dark_5: mix(black, $smoke, 50%);
// gray color variables
$gray_light_5: mix(white, $gray, 92%);
$gray_light_4: mix(white, $gray, 78%);
$gray_light_3: mix(white, $gray, 60%);
$gray_light_2: mix(white, $gray, 42%);
$gray_light_1: mix(white, $gray, 24%);
$gray_dark_1: mix(black, $gray, 10%);
$gray_dark_2: mix(black, $gray, 20%);
$gray_dark_3: mix(black, $gray, 30%);
$gray_dark_4: mix(black, $gray, 40%);
$gray_dark_5: mix(black, $gray, 50%);
// Dark color variables
$black_1:mix(black, $black, 10%);
$black_2:mix(black, $black, 20%);
$black_3:mix(black, $black, 30%);
$black_4:mix(black, $black, 40%);
$black_5:mix(black, $black, 50%);
// Theme color variables
$primary : $blue;
$info : $cyan;
$success : $green;
$danger : $red;
$warning : $yellow;
$secondary : $gray_dark_3;
// Primary color variables
$primary_light_5: mix(white, $primary, 92%);
$primary_light_4: mix(white, $primary, 78%);
$primary_light_3: mix(white, $primary, 60%);
$primary_light_2: mix(white, $primary, 42%);
$primary_light_1: mix(white, $primary, 24%);
$primary_dark_1: mix(black, $primary, 10%);
$primary_dark_2: mix(black, $primary, 20%);
$primary_dark_3: mix(black, $primary, 30%);
$primary_dark_4: mix(black, $primary, 40%);
$primary_dark_5: mix(black, $primary, 50%);
// Info color variables
$info_light_5: mix(white, $info, 92%);
$info_light_4: mix(white, $info, 78%);
$info_light_3: mix(white, $info, 60%);
$info_light_2: mix(white, $info, 42%);
$info_light_1: mix(white, $info, 24%);
$info_dark_1: mix(black, $info, 10%);
$info_dark_2: mix(black, $info, 20%);
$info_dark_3: mix(black, $info, 30%);
$info_dark_4: mix(black, $info, 40%);
$info_dark_5: mix(black, $info, 50%);
// Sucess color variables
$success_light_5: mix(white, $success, 92%);
$success_light_4: mix(white, $success, 78%);
$success_light_3: mix(white, $success, 60%);
$success_light_2: mix(white, $success, 42%);
$success_light_1: mix(white, $success, 24%);
$success_dark_1: mix(black, $success, 10%);
$success_dark_2: mix(black, $success, 20%);
$success_dark_3: mix(black, $success, 30%);
$success_dark_4: mix(black, $success, 40%);
$success_dark_5: mix(black, $success, 50%);
// Danger color variables
$danger_light_5: mix(white, $danger, 92%);
$danger_light_4: mix(white, $danger, 78%);
$danger_light_3: mix(white, $danger, 60%);
$danger_light_2: mix(white, $danger, 42%);
$danger_light_1: mix(white, $danger, 24%);
$danger_dark_1: mix(black, $danger, 10%);
$danger_dark_2: mix(black, $danger, 20%);
$danger_dark_3: mix(black, $danger, 30%);
$danger_dark_4: mix(black, $danger, 40%);
$danger_dark_5: mix(black, $danger, 50%);
// Warning color variables
$warning_light_5: mix(white, $warning, 92%);
$warning_light_4: mix(white, $warning, 78%);
$warning_light_3: mix(white, $warning, 60%);
$warning_light_2: mix(white, $warning, 42%);
$warning_light_1: mix(white, $warning, 24%);
$warning_dark_1: mix(black, $warning, 10%);
$warning_dark_2: mix(black, $warning, 20%);
$warning_dark_3: mix(black, $warning, 30%);
$warning_dark_4: mix(black, $warning, 40%);
$warning_dark_5: mix(black, $warning, 50%);
// Secondary color variables
$secondary_light_5: mix(white, $secondary, 92%);
$secondary_light_4: mix(white, $secondary, 78%);
$secondary_light_3: mix(white, $secondary, 60%);
$secondary_light_2: mix(white, $secondary, 42%);
$secondary_light_1: mix(white, $secondary, 24%);
$secondary_dark_1: mix(black, $secondary, 10%);
$secondary_dark_2: mix(black, $secondary, 20%);
$secondary_dark_3: mix(black, $secondary, 30%);
$secondary_dark_4: mix(black, $secondary, 40%);
$secondary_dark_5: mix(black, $secondary, 50%);
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Dark Mode Color Overrides

Sometimes you need specific colors just for dark mode that differ from the automatic variable calculation. You can override CSS variables specifically for the dark theme context.

/* src/scss/global.scss or _user-variables.scss */
[data-bs-theme="dark"] {
    /* Override Bootstrap Variables for Dark Mode */
    --bs-body-bg: #0f0f0f;
    --bs-body-color: #e0e0e0;
    --bs-border-color: #333333;
    /* Override Custom Theme Variables */
    --hk-sidebar-bg: #121212;
    --hk-card-bg: #1e1e1e;
}
/* Example: Specific class override */
.my-custom-card {
    background-color: #fff; /* Light mode */
    color: #000;
}
[data-bs-theme="dark"] .my-custom-card {
    background-color: #2a2a2a; /* Dark mode override */
    color: #fff;
}
Table Colors

You can edit table's contextual colors using below varaibles presented in variable.scss file.

Preview
HTML
Vue
Nuxt
Svelte
// scss-docs-start table-loop
$table-variants: (
 "primary":    $primary,
 "secondary":  $secondary,
 "success":    $success,
 "info":       $info,
 "warning":    $warning,
 "danger":     $danger,
 "light":      $gray_light_5,
 "dark":       $black_2,
) !default;
// scss-docs-end table-loop
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Font family

The font family can be changed by using the —bs-body-font-family. Variables are displayed in the variable.scss file.

Preview
HTML
Vue
Nuxt
Svelte
:root {
 --bs-body-font-family: 'DM Sans', sans-serif;
 --bs-text-opacity:1;
 --bs-bg-opacity: 1;
 }
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Jump to