Theme

Vue Bootstrap 5 Theme

Theming system enables you to customize the appearance of all MDB components.

Appearance customization options enable you to create skins for your Bootstrap 5 project. Use predefined dark theme, light theme or create custom themes.

See an example of a dark-theme created using our theme system.

Create a new theme

Creating a theme requires recompiling the scss styles, for this purpose we recommend using Vue CLI with CSS Pre-processor (e.g. dart-sass).

Creating a new theme requires that you define primary and secondary colors for your application. We prepared functions and mixins that will help you to create a ready to use theme using these colors.

Go to your project created with Vue CLI, open App.vue file located in /src directory and add the following code: 

<style lang="scss">
  @import "mdb-vue-ui-kit/src/scss/index.pro.scss";

  $my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
  $my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme

  $my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and
  secondary colors

  // include theme styles
  @include mdb-theme($my-theme);
</style>

Light theme

It's possible to create a light theme using mdb-light-theme function. You just need to define primary and secondary colors, all other parameters will be adjusted automatically. 

<style lang="scss">
  @import "mdb-vue-ui-kit/src/scss/index.pro.scss";

  $my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
  $my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme

  $my-light-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new light theme using primary and secondary colors

  // include theme styles
  @include mdb-theme($my-light-theme);
</style>

Dark theme

It's possible to create a dark theme using mdb-dark-theme function. You just need to define primary and secondary colors, all other parameters will be adjusted automatically. 

<style lang="scss">
  @import "mdb-vue-ui-kit/src/scss/index.pro.scss";

  $my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
  $my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme

  $my-dark-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary); // create the new dark theme using primary and secondary colors

  // include theme styles
  @include mdb-theme($my-dark-theme);
</style>

Ready-to-use dark skin

For your convenience, we added a ready-to-use dark skin to our UI KIT. Installation is very easy, because you just need to replace the current mdb.min.css stylesheet path with mdb.dark.min.css. The files are located in the css folder. 

import 'mdb-vue-ui-kit/css/mdb.dark.min.css';

Skin toggler

It's possible to create a skin toggler. Create a dark theme inside your main scss file, but this time wrap @include rule with any custom class. Then add the button switch to toggle this class for the body element. 

<style lang="scss">
  @import "src/scss/index.pro.scss";

  // DARK SKIN
  $my-theme-dark-primary: #12f137; // theme primary color, change this value to customize theme
  $my-theme-dark-secondary: #fd3c3c; // theme secondary color, change this value to customize theme
  $my-dark-theme: mdb-dark-theme(
    $my-theme-dark-primary,
    $my-theme-dark-secondary
  );

  // LIGHT SKIN
  $my-theme-light-primary: #9c27b0;
  $my-theme-light-secondary: #d2ee33;
  $my-light-theme: mdb-light-theme(
    $my-theme-light-primary,
    $my-theme-light-secondary
  ); // create the new light theme using primary and secondary colors

  // include default theme
  @include mdb-theme($my-light-theme);

  // include dark theme
  .dark {
    @include mdb-theme($my-dark-theme);
  }
</style>
<template>
  <MDBBtn @click="toggleTheme">Toggle theme</MDBBtn>
</template>
<script>
  import { MDBBtn } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBBtn
    },
    setup() {
      const toggleTheme = () => {
        document.body.classList.toggle("dark");
      };

      return { toggleTheme };
    },
  }
</script>
<script setup lang="ts">
  import { MDBBtn } from "mdb-vue-ui-kit";

  const toggleTheme = () => {
    document.body.classList.toggle("dark");
  };

</script>
Instead of making changes to the scss file, you can also use compiled css files and switch between <link rel="stylesheet" href="css/mdb.min.css" /> and <link rel="stylesheet" href="css/mdb.dark.min.css" /> after clicking the toggle button.