Theme Customization

Glint is built with SCSS and follows Bootstrap's variable structure. This makes customizing theme colors, gradients, and other global styles simple and scalable. All overrides and custom variables are stored in the assets > scss > custom > custom-variables.scss file.

1. Color Variables

The theme uses a custom color palette aligned with Bootstrap’s default variables. You can modify any of these colors to instantly update the theme.

$blue: #2e6fa9 !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #c9463d !default;
$orange: #e1a32b !default;
$yellow: #ffd75d !default;
$green: #4cae4f !default;
$teal: #2a6f6b !default;
$cyan: #0dcaf0 !default;

// Bootstrap override mapping
$primary: $yellow !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $black !default;

For example, if you want your primary color to be blue instead of yellow, simply update:

// Before
$primary: $yellow !default;

// After
$primary: $blue !default;

2. Gradient Variables

Glint uses gradients in various widgets and UI sections. You can customize these from the theme-vars SCSS file.

// Default gradient
$default-gradient: linear-gradient(90deg, #e8e9eb 0%, #fdf6dc 100%);

To update, just replace the hex codes with your own gradient values.

After making changes, recompile your SCSS to apply the new theme. This will update colors across all components, widgets, and layouts consistently.

3. Light/Dark Theme

Glint supports light and dark themes using Bootstrap’s built-in data-bs-theme attribute along with a custom JavaScript function for flexibility. This means you can easily switch between light and dark modes, and your choice will persist across page reloads.

    const applyDarkMode = (enabled: boolean, emit = true) => {
      const html = document.documentElement;
      const newTheme = enabled ? 'dark' : 'light';
      html.setAttribute('data-bs-theme', newTheme);
    
      // Keep old .dark-mode class for compatibility if your CSS used it
      if (enabled) html.classList.add('dark-mode');
      else html.classList.remove('dark-mode');
    
      setIsDarkMode(enabled);
    
      try {
        localStorage.setItem('theme', newTheme);
      } catch {}
    
      if (emit) {
        // notify other parts of app (e.g., Header) that theme changed
        window.dispatchEvent(new CustomEvent('theme-changed', { detail: newTheme }));
      }
    };
    

Here’s what the function does:

• Uses data-bs-theme attribute (light or dark) to tell Bootstrap which theme to render.
• Adds or removes a legacy .dark-mode class for any custom CSS that still depends on it.
• Updates localStorage so the user’s choice persists across page reloads or new sessions.
• Emits a custom theme-changed event so other components (like Header or Customizer) can react instantly to theme changes.

This approach makes it very easy to extend. For example, you can listen for the theme-changed event anywhere in your app to adjust third-party widgets, charts, or custom styles.

  const applyDirection = (lang: string, dir: 'ltr' | 'rtl') => {
    setLoadingDirection(true);
  
    const html = document.documentElement;
    html.setAttribute('dir', dir);
    html.setAttribute('lang', lang);
  
    const link = document.getElementById('bootstrap-css') as HTMLLinkElement | null;
    if (link) {
      link.href = `/css/styles-${dir}.css`;
    }
  
    setTimeout(() => setLoadingDirection(false), 600);
  };