HelpBot Assistant

How can I help you?

About CSS variables in themes

4 Feb 202624 minutes to read

CSS variables, also known as custom properties, are author-defined entities that store values for reuse throughout a stylesheet. Variable names begin with two hyphens (–) followed by an identifier. Any valid CSS value can be assigned (colors, lengths, fonts, etc.). Retrieve a variable value using the var() function.

Syncfusion® provides four modern, highly customizable themes that use CSS variables to enable consistent styling across all Syncfusion® Vue components:

  • Material 3 Theme
  • Fluent 2 Theme
  • Bootstrap 5.3 Theme
  • Tailwind 3.4 Theme

CSS themes - Syncfusion® Vue components

Material 3, Fluent 2, Bootstrap 5.3, and Tailwind 3.4 themes are available across EJ2 controls. Each theme includes both light and dark variants and exposes CSS variables so control colors can be adjusted directly in CSS. This implementation enables easy switching between light and dark color schemes and simplifies theme customization across an application.

Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: –color-sf-primary: 98, 0, 238;.

Utilization of CSS variables in modern themes

Modern themes make it easy to change the colors of controls using CSS variables. Each theme has its own way of setting these variables, so it’s important to follow the specific instructions for each theme. Doing this helps keep the styling consistent and efficient across different parts of your application.

Below are examples of how CSS variables can be defined for these themes:

/* rgb() values of material3 theme */
:root {
    --color-sf-black: 0, 0, 0;
    --color-sf-white: 255, 255, 255;
    --color-sf-primary: 103, 80, 164;
    --color-sf-primary-container: 234, 221, 255;
    --color-sf-secondary: 98, 91, 113;
    --color-sf-secondary-container: 232, 222, 248;
    --color-sf-tertiary: 125, 82, 96;
    --color-sf-tertiary-container: 255, 216, 228;
    --color-sf-surface: 255, 255, 255;
    --color-sf-surface-variant: 231, 224, 236;
    --color-sf-background: var(--color-sf-surface);
    --color-sf-on-primary: 255, 255, 255;
    --color-sf-on-primary-container: 33, 0, 94;
    --color-sf-on-secondary: 255, 255, 255;
    --color-sf-on-secondary-container: 30, 25, 43;
    --color-sf-on-tertiary: 255, 255, 255;
  }
/* Hex values of fluent 2 theme */
:root {
    --color-sf-black: #000;
    --color-sf-white: #fff;
    --color-sf-primary: #0f6cbd;
    --color-sf-primary-text-color: #fff;
    --color-sf-primary-light: #b4d6fa;
    --color-sf-primary-lighter: #ebf3fc;
    --color-sf-primary-dark: #0f548c;
    --color-sf-primary-darker: #0c3b5e;
    --color-sf-success: #0e700e;
    --color-sf-info: #008aa9;
    --color-sf-warning: #bc4b09;
    --color-sf-danger: #d13438;
    --color-sf-success-light: #54b054;
    --color-sf-info-light: #56bfd7;
    --color-sf-warning-light: #fee5d7;
    --color-sf-danger-light: #eeacb2;
    --color-sf-success-dark: #54b054;
    --color-sf-info-dark: #56bfd7;
    --color-sf-warning-dark: #8a3707;
    --color-sf-danger-dark: #6e0811;
  }
:root {
    --color-sf-black: 0, 0, 0;
    --color-sf-white: 255, 255, 255;
    --color-sf-content-bg-color: #fff;
    --color-sf-content-bg-color-alt1: #f8f9fa;
    --color-sf-content-bg-color-alt2: #e9ecef;
    --color-sf-content-bg-color-alt3: #dee2e6;
    --color-sf-content-bg-color-alt4: #ced4da;
    --color-sf-content-bg-color-alt5: #adb5bd;
    --color-sf-content-bg-color-hover: #f8f9fa;
    --color-sf-content-bg-color-pressed: #e9ecef;
    --color-sf-content-bg-color-focus: #e9ecef;
    --color-sf-content-bg-color-selected: #0d6efd;
    --color-sf-content-bg-color-dragged: #ced4da;
    --color-sf-content-bg-color-disabled: #e9ecef;
    --color-sf-flyout-bg-color: #fff;
    --color-sf-flyout-bg-color-hover: #f8f9fa;
    --color-sf-flyout-bg-color-pressed: #0d6efd;
    --color-sf-flyout-bg-color-focus: #f8f9fa;
    --color-sf-overlay-bg-color: 0, 0, 0;
    --color-sf-table-bg-color-hover: rgba(0, 0, 0, .07);
}
:root{
  --color-sf-content-bg-color: rgba(255, 255, 255);
  --color-sf-content-bg-color-alt1: #f9fafb;
  --color-sf-content-bg-color-alt2: #f3f4f6;
  --color-sf-content-bg-color-alt3: #e5e7eb;
  --color-sf-content-bg-color-alt4: #9ca3af;
  --color-sf-content-bg-color-alt5: #6b7280;
  --color-sf-content-bg-color-hover: #f9fafb;
  --color-sf-content-bg-color-pressed: #f3f4f6;
  --color-sf-content-bg-color-focus: #f9fafb;
  --color-sf-content-bg-color-selected: #e5e7eb;
  --color-sf-content-bg-color-dragged: #f3f4f6;
  --color-sf-content-bg-color-disabled: #ffffff;
  --color-sf-flyout-bg-color: #ffffff;
  --color-sf-flyout-bg-color-hover: #f3f4f6;
  --color-sf-flyout-bg-color-pressed: #e5e7eb;
  --color-sf-flyout-bg-color-focus: #f3f4f6;
  --color-sf-flyout-bg-color-selected: #e5e7eb;
  --color-sf-flyout-bg-color-disabled: #fff;
  --color-sf-overlay-bg-color: rgba(107, 114, 128, 74.9);
  --color-sf-table-bg-color-hover: #f9fafb;
  --color-sf-table-bg-color-pressed: #f3f4f6;
  --color-sf-table-bg-color-selected: #e5e7eb;
  --color-sf-text-input-bg-color: #ffffff;
  --color-sf-treeview-item-active-hover-bg: #e5e7eb;
}

How to get these themes?

To access themes provided by Syncfusion®, you have two primary options,

  • Package
  • CDN links
  Light Dark
Package Material 3 Light Material 3 Dark
  Fluent 2 Light Fluent 2 Dark
  Bootstrap 5.3 Light Bootstrap 5.3 Dark
  Tailwind 3.4 Light Tailwind 3.4 Dark
CDN Material 3 Light Material 3 Dark
  Fluent 2 light Fluent 2 Dark
  Bootstrap5.3 light Bootstrap 5.3 Dark
  Tailwind 3.4 Light Tailwind 3.4 Dark

Color Customization in themes

CSS variables allows you to dynamically change color values in real-time using JavaScript. This flexibility enables you to create interactive experiences where colors can adjust based on user interactions or other dynamic factors.

Customization using CSS

Here you can find the example for Material 3 customization using CSS class.

<template>
    <div>
        <ejs-button cssClass='e-primary'>Button</ejs-button>
    </div>
</template>
    
<script>

import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
    name: "App",
    components: {
        "ejs-button": ButtonComponent
    },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';

button {
    margin: 25px 5px 20px 20px;
}

:root {
    --color-sf-primary: 104, 134, 164;
}
</style>

Default primary value

default primary value

Customized primary value

customized primary value

Example for Fluent 2 customization using CSS class.

<template>
<div>
    <ejs-button cssClass='e-primary'>Button</ejs-button>
</div>
</template>

<script>
import Vue from 'vue';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
    components: {
        "ejs-button": ButtonComponent,
    },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';

button {
  margin: 25px 5px 20px 20px;
}
:root {
	--color-sf-primary: #6886a4;
}
</style>

Default primary value

default primary value

Customized primary value

customized primary value

Example for Bootstrap 5.3 customization using CSS class.

<template>
  <div>
      <ejs-button cssClass='e-primary'>Button</ejs-button>
  </div>
  </template>
  
  <script>
  import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
  import { enableRipple } from '@syncfusion/ej2-base';
  
  enableRipple(true);
  
  export default {
    name: 'App',
    components: {
      'ejs-button': ButtonComponent
    }
  }
  </script>
  
  <style>
  @import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.3.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.3.css';
  
  button {
    margin: 25px 5px 20px 20px;
  }
  :root {
    --color-sf-primary: rgba(104, 134, 164, 1);
  }
  </style>

Default primary value

default primary value

Customized primary value

customized primary value

Example for Tailwind 3.4 customization using CSS class.

<template>
  <div>
      <ejs-button cssClass='e-primary'>Button</ejs-button>
  </div>
  </template>
  
  <script>
  import Vue from 'vue';
  import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
  import { enableRipple } from '@syncfusion/ej2-base';
  
  enableRipple(true);
  
  export default {
    name: 'App',
    components: {
      'ejs-button': ButtonComponent
    }
  }
  </script>
  
  <style>
  @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
  
  button {
    margin: 25px 5px 20px 20px;
  }
  :root {
    --color-sf-primary-bg-color: #a5b4fc;
  }
  </style>

Default primary value

default primary value

Customized primary value

customized primary value

With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion® Vue Components.

Switching Light and Dark mode with CSS variables

Modern themes provide light and dark variants and expose class-level variables to switch modes. Use the theme-provided classes or update root-level variables to toggle between light and dark palettes.

<template>
<div>
    <ejs-checkbox label='Default'></ejs-checkbox>
    <ejs-button cssClass='e-primary'>Button</ejs-button>
    <ejs-button cssClass='e-success'>Button</ejs-button>
    <ejs-button cssClass='e-info'>Button</ejs-button>
    <ejs-button cssClass='e-warning'>Button</ejs-button>
    <ejs-button cssClass='e-danger'>Button</ejs-button>
</div>
</template>

<script>

import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-checkbox":CheckBoxComponent,
"ejs-button":ButtonComponent
},
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';

.e-checkbox-wrapper {
  margin-top: 18px;
}
button {
  margin: 25px 5px 20px 20px;
}
.dark
{
  background-color:black;
}
</style>

Mode switching in Fluent 2 theme

Similar to Material 3, we offer both Light and Dark variants with Fluent 2. In the Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below.

<template>
<div>
    <ejs-checkbox label='Default'></ejs-checkbox>
    <ejs-button cssClass='e-primary'>Button</ejs-button>
    <ejs-button cssClass='e-success'>Button</ejs-button>
    <ejs-button cssClass='e-info'>Button</ejs-button>
    <ejs-button cssClass='e-warning'>Button</ejs-button>
    <ejs-button cssClass='e-danger'>Button</ejs-button>
</div>
</template>

<script>
import Vue from 'vue';
import { ButtonComponent, CheckBoxComponent  } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
    components: {
        "ejs-button": ButtonComponent,
        "ejs-checkbox": CheckBoxComponent
    },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';

.e-checkbox-wrapper {
  margin-top: 18px;
}
button {
  margin: 25px 5px 20px 20px;
}
.dark
{
  background-color:black;
}
</style>

Mode switching in Bootstrap 5.3 theme

Similar to Fluent 2, we offer both Light and Dark variants with Bootstrap 5.3. In the Bootstrap 5.3 theme, there are distinct class variables for light and dark modes, as shown in the preview below.

<template>
  <div>
    <div>
      <ejs-checkbox
        label="Default"
        v-model="isCheckboxChecked"
        @change="toggleBodyClass"
      ></ejs-checkbox
      ><br />
      <ejs-button cssClass="e-primary">Button</ejs-button>
      <ejs-button cssClass="e-success">Button</ejs-button>
      <ejs-button cssClass="e-info">Button</ejs-button>
      <ejs-button cssClass="e-warning">Button</ejs-button>
      <ejs-button cssClass="e-danger">Button</ejs-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {
  ButtonComponent,
  CheckBoxComponent,
} from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: 'App',
  components: {
    'ejs-button': ButtonComponent,
    'ejs-checkbox': CheckBoxComponent,
  },
  data() {
    return {
      isCheckboxChecked: false,
    };
  },
  methods: {
    toggleBodyClass() {
      if (this.isCheckboxChecked) {
        document.body.classList.add('e-dark-mode', 'dark'); // Add your desired classes here
      } else {
        document.body.classList.remove('e-dark-mode', 'dark'); // Remove your desired classes here
      }
    },
  },
};
</script>

<style>
.e-checkbox-wrapper {
  margin-top: 18px;
}
button {
  margin: 25px 5px 20px 20px;
}
.dark {
  background-color: black;
}
</style>

Mode switching in Tailwind 3.4 theme

Similar to Fluent 2, we offer both Light and Dark variants with Tailwind 3.4. In the Tailwind 3.4 theme, there are distinct class variables for light and dark modes, as shown in the preview below.

<template>
  <div>
      <div>
        <ejs-checkbox label='Default' v-model="isCheckboxChecked" @change="toggleBodyClass"></ejs-checkbox><br/>
        <ejs-button cssClass='e-primary'>Button</ejs-button>
        <ejs-button cssClass='e-success'>Button</ejs-button>
        <ejs-button cssClass='e-info'>Button</ejs-button>
        <ejs-button cssClass='e-warning'>Button</ejs-button>
        <ejs-button cssClass='e-danger'>Button</ejs-button>
      </div>
  </div>
  </template>
  
  <script>
  import Vue from 'vue';
import {
  ButtonComponent,
  CheckBoxComponent,
} from '@syncfusion/ej2-vue-buttons';
  import { enableRipple } from '@syncfusion/ej2-base';
  
  enableRipple(true);
  
  export default {
    name: 'App',
      components: {
        'ejs-button': ButtonComponent,
        'ejs-checkbox': CheckBoxComponent,
      },
  data() {
    return {
      isCheckboxChecked: false,
    };
  },
  methods: {
    toggleBodyClass() {
      if (this.isCheckboxChecked) {
        document.body.classList.add('e-dark-mode', 'dark'); // Add your desired classes here
      } else {
        document.body.classList.remove('e-dark-mode', 'dark'); // Remove your desired classes here
      }
    },
  },
  }
  </script>
  
  <style>
  @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
  
  .e-checkbox-wrapper {
    margin-top: 18px;
  }
  button {
    margin: 25px 5px 20px 20px;
  }
  .dark
  {
    background-color:black;
  }
  </style>

How to switch dark mode?

To enable dark mode for Material 3, Fluent 2, Bootstrap 5.3, or Tailwind 3.4 themes, append the e-dark-mode class to the application’s body element. Applying the class switches the theme to its dark variant.

Material 3 dark mode

dark mode

Fluent 2 dark mode

dark mode

Bootstrap 5.3 dark mode

dark mode

Tailwind 3.4 dark mode

dark mode

ThemeStudio Application

The ThemeStudio application now includes seamless integration with the Material 3, Fluent 2 and Bootstrap 5.3 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.

Access the Syncfusion® ThemeStudio application, featuring our themes, via the following link: Link to Syncfusion® ThemeStudio