Theming

Theming

The library includes a custom Bootstrap 5 theme that can be easily customised using CSS variables and SCSS.

CSS Variables

Always use CSS variables from Bootstrap or the theme instead of hardcoding colour values for better maintainability and theme consistency.

Good Practice

<style scoped>
.custom-component {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border-color: var(--bs-border-color);
}
</style>

Bad Practice

<style scoped>
.custom-component {
  background-color: #4f46e5;  /* Never do this! */
  color: #ffffff;
}
</style>

Common CSS Variables

Colours

From Bootstrap 5:

--bs-primary
--bs-secondary
--bs-success
--bs-danger
--bs-warning
--bs-info
--bs-light
--bs-dark
--bs-white
--bs-nav-link-color
--bs-nav-link-hover-color
--bs-nav-link-active-color

Borders

--bs-border-color
--bs-border-radius

Spacing

--bs-gutter-x
--bs-gutter-y

Customising the Theme

To customise the theme, create your own SCSS file that overrides Bootstrap variables:

// custom-theme.scss

// Override Bootstrap variables
$primary: #your-color;
$secondary: #your-color;

// Import Bootstrap
@import 'bootstrap/scss/bootstrap';

// Custom styles
.custom-class {
  color: var(--bs-primary);
}

Theme Structure

The library’s theme is located in resources/css/theme.scss:

// Override Bootstrap variables
$primary: #4f46e5;
$secondary: #64748b;

// Import Bootstrap
@import 'bootstrap/scss/bootstrap';

// Custom component styles
.custom-class {
  color: var(--bs-primary);
}

Dark Mode Support

Bootstrap 5.3 includes built-in dark mode support. The library components automatically support dark mode:

<!-- Enable dark mode -->
<html data-bs-theme="dark">
  <!-- Your app -->
</html>

You can toggle dark mode dynamically:

<script setup lang="ts">
import { ref } from 'vue'

const darkMode = ref(false)

const toggleDarkMode = () => {
  darkMode.value = !darkMode.value
  document.documentElement.setAttribute(
    'data-bs-theme',
    darkMode.value ? 'dark' : 'light'
  )
}
</script>

<template>
  <DButton @click="toggleDarkMode">
    Toggle Dark Mode
  </DButton>
</template>

Component-Specific Styling

DashboardSidebar

The sidebar uses CSS variables for colours:

.sidebar {
  background-color: var(--bs-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link {
  color: var(--bs-nav-link-color);
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

DashboardNavbar

The user avatar styling:

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bs-dark);
  color: var(--bs-white);
}

Responsive Design

Use Bootstrap’s responsive utilities:

<template>
  <!-- Hidden on mobile, visible on desktop -->
  <div class="d-none d-md-block">
    Desktop content
  </div>

  <!-- Visible on mobile, hidden on desktop -->
  <div class="d-md-none">
    Mobile content
  </div>
</template>

Tips

  • Use CSS variables - Avoid hardcoding colour values for better maintainability
  • Follow Bootstrap conventions - Use Bootstrap classes when available
  • Scope your styles - Use scoped in Vue components
  • Test dark mode - Components should work in both light and dark modes

Troubleshooting

Styles not applying

Make sure you’ve imported the theme CSS:

import '@omnitend/dashboard-for-laravel/theme.css'

Component styles missing

You must import theme.css (built CSS), not theme.scss (source). See the Installation guide for details.

Dark mode not working

Ensure you’re setting the data-bs-theme attribute on the <html> element:

<html data-bs-theme="dark">

Next Steps