Documentation

Color Admin

“Svelte + Vite JS Version” Documentation by “Sean Ngu” v6.0.0

Updated on: 25/August/2026
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very much!

A) Installation - top

Follow the following steps to install Svelte with Vite in your local development environment.
You may refer to their official documentation for how to setup the development environment.
Setup Guide 

<!-- run the following command --> 
cd /your-path-url/template_svelte
npm install
npm run dev

<!-- browse the url --> 
http://localhost:5173/

Make sure node.js >= v22.x and npm >= v11.x has been installed on your localhost / server

B) File Structure - top

File structure overview for Svelte Version

template_svelte/
  ├── package.json
  ├── README.md
  ├── static/
  ├── src/
  │   ├── app.html
  │   ├── components/
  │   ├── lib/
  │   ├── routes/
  │   ├── scss/
  │   └── stores/
  ├── svelte.config.js
  └── vite.config.js

C) Layout Structure - top

Below is the code from /routes/+layout.svelte which include the app header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.

<script>
  import '/src/scss/svelte.scss';
  import 'bootstrap-icons/font/bootstrap-icons.min.css';
  import '@fortawesome/fontawesome-free/css/all.min.css';
  import 'perfect-scrollbar/css/perfect-scrollbar.css';
  import { Body, classList, style } from 'svelte-body';
  import AppLoader from '/src/components/app/AppLoader.svelte';
  import AppHeader from '/src/components/app/AppHeader.svelte';
  import AppSidebar from '/src/components/app/AppSidebar.svelte';
  import AppSidebarRight from '/src/components/app/AppSidebarRight.svelte';
  import AppTopMenu from '/src/components/app/AppTopMenu.svelte';
  import AppThemePanel from '/src/components/app/AppThemePanel.svelte';
  import { onMount } from 'svelte';
  import { appOptions } from '/src/stores/appOptions.js';
  import { appVariables, generateVariables } from '/src/stores/appVariables.js';
  import { setPageTitle } from '$lib/utils';
  
  function handleResize() {
    $appOptions.isMobile = window.innerWidth <= 768; // Adjust the threshold as needed
  }
  
  function handleScroll() {
    var scrollPosition = window.scrollY || window.pageYOffset;
    if (scrollPosition > 0) {
      $appOptions.hasScroll = true;
    } else {
      $appOptions.hasScroll = false;
    }
  }
  
  onMount(async () => {
    import('bootstrap');
    
    $appVariables = generateVariables();
    $appOptions.isInit = true;
    $appOptions.isMobile = window.innerWidth <= 768;
    
    window.addEventListener('resize', handleResize);
    window.addEventListener('scroll', handleScroll); 
  });
</script>

<AppLoader />

<svelte:body use:classList={($appOptions.isInit ? 'app-init ' : '') + ($appOptions.appBoxedLayout ? 'boxed-layout ' : '')} />

<div id="app" class="app{($appOptions.appClass) ? ' '+ $appOptions.appClass : ''}" 
  class:app-gradient-enabled={$appOptions.appGradientEnabled}
  class:app-header-fixed={$appOptions.appHeaderFixed && !$appOptions.appHeaderHide}
  class:app-sidebar-fixed={$appOptions.appSidebarFixed && !$appOptions.appSidebarHide}
  class:app-sidebar-minified={$appOptions.appSidebarMinified && !$appOptions.appSidebarHide}
  class:app-sidebar-mobile-toggled={$appOptions.appSidebarMobileToggled}
  class:app-content-full-height={$appOptions.appContentFullHeight}
  class:app-without-sidebar={$appOptions.appSidebarHide}
  class:app-without-header={$appOptions.appHeaderHide}
  class:app-with-top-menu={$appOptions.appTopMenu}
  class:app-with-wide-sidebar={$appOptions.appSidebarWide}
  class:app-with-end-sidebar={$appOptions.appSidebarEnd}
  class:app-with-two-sidebar={$appOptions.appSidebarTwo}
  class:app-with-hover-sidebar={$appOptions.appSidebarHover}
  class:app-sidebar-end-toggled={$appOptions.appSidebarEndToggled && !$appOptions.isMobile}
  class:app-sidebar-end-mobile-toggled={$appOptions.appSidebarEndMobileToggled && $appOptions.isMobile}
  class:app-footer-fixed={$appOptions.appFooterFixed}
  class:has-scroll={$appOptions.hasScroll}
>
  {#if !$appOptions.appHeaderHide}<AppHeader />{/if}
  {#if !$appOptions.appSidebarHide}<AppSidebar />{/if}
  {#if $appOptions.appSidebarTwo}<AppSidebarRight />{/if}
  {#if $appOptions.appTopMenu}<AppTopMenu />{/if}
  <AppThemePanel />
  
  <div id="content" class="app-content{($appOptions.appContentClass) ? ' '+ $appOptions.appContentClass : ''}">
    <slot />
  </div>
</div>

D) Components - top

List of components inside the components folder

/src/components/
├── app/
│   ├── AppFooter.svelte
│   ├── AppHeader.svelte
│   ├── AppHeaderMegaMenu.svelte
│   ├── AppLoader.svelte
│   ├── AppSidebar.svelte
│   ├── AppSidebarRight.svelte
│   ├── AppThemePanel.svelte
│   ├── AppTopMenu.svelte
│   └── NavScrollTo.svelte
├── bootstrap/
│   ├── Card.svelte
│   ├── CardBody.svelte
│   ├── CardExpandToggler.svelte
│   ├── CardFooter.svelte
│   ├── CardGroup.svelte
│   ├── CardHeader.svelte
│   ├── CardImgOverlay.svelte
│   ├── CardSubtitle.svelte
│   ├── CardText.svelte
│   ├── CardTitle.svelte
│   ├── Panel.svelte
│   ├── PanelBody.svelte
│   ├── PanelExpandToggler.svelte
│   ├── PanelFooter.svelte
│   ├── PanelGroup.svelte
│   ├── PanelHeader.svelte
│   ├── PanelImgOverlay.svelte
│   ├── PanelTitle.svelte
│   └── PanelToolbar.svelte
└── plugins/
    ├── Apexcharts.svelte
    ├── Chartjs.svelte
    ├── HighlightJs.svelte
    └── PerfectScrollbar.svelte

E) Svelte Store - top

This template used svelte to create the store and share the states variable between the components. Store files can be found via /src/stores/

/src/stores/
├─ appOptions.js            // global app option states
├─ appSidebarMenus.js       // global app sidebar menu list
├─ appTopMenuMenus.js       // global app top menu menu list
└─ appVariables.js          // global app variable (fetched from css / font variables)

F) Svelte Store - App Options - top

You can use the global app option from /stores/appOptions.js

<script>
  import { onMount, onDestroy } from 'svelte';
  import { appOptions } from '/src/stores/appOptions.js';

  onMount(async () => {
    // available app option
    $appOptions.appClass = '';
    
    $appOptions.appHeaderHide = false;
    $appOptions.appHeaderFixed = true;
    $appOptions.appHeaderInverse = false;
    $appOptions.appHeaderMegaMenu = false;
    $appOptions.appHeaderLanguageBar = false;
    
    $appOptions.appSidebarHide = false;
    $appOptions.appSidebarFixed = true;
    $appOptions.appSidebarGrid = false;
    $appOptions.appSidebarToggled = false;
    $appOptions.appSidebarMobileToggled = false;
    $appOptions.appSidebarTwo = false;
    $appOptions.appSidebarEnd = false;
    $appOptions.appSidebarEndToggled = false;
    $appOptions.appSidebarEndMobileToggled = false;
    $appOptions.appSidebarWide = false;
    $appOptions.appSidebarLight = false;
    $appOptions.appSidebarTransparent = false;
    $appOptions.appSidebarHover = false;
    
    $appOptions.appTopMenu = false;
    
    $appOptions.appContentFullHeight = false;
    $appOptions.appContentClass = '';
    
    $appOptions.appFooterFixed = false;
    
    $appOptions.appBoxedLayout = false;
    $appOptions.appGradientEanbled = false;
    $appOptions.appThemePanelToggled = false;
    $appOptions.appRtlEnabled = false;
  });
  
  onDestroy(() => {
    // set to default before leave the page
    $appOptions.appFooter = false;
  });
</script>

G) Svelte Store - App Variable - top

You can use the global app variables (css color / font family) from /stores/appVariables.js

<script>
  import { onMount, onDestroy } from 'svelte';
  import { appVariables } from '/src/stores/appVariables.js';
  
  let chart;
  
  function renderChart(appVariables) {
    // available font
    appVariables.font.bodyFontFamily;
    appVariables.font.bodyFontSize;
    appVariables.font.bodyFontWeight;
    appVariables.font.bodyLineHeight;
    
    // available color
    appVariables.color.theme;
    appVariables.color.themeRgb;
    appVariables.color.themeColor;
    appVariables.color.themeColorRgb;
    
    appVariables.color.default;
    appVariables.color.defaultRgb;
    
    appVariables.color.primary;
    appVariables.color.primaryRgb;
    appVariables.color.primaryBgSubtle;
    appVariables.color.primaryText;
    appVariables.color.primaryBorderSubtle;
    
    appVariables.color.secondary;
    appVariables.color.secondaryRgb;
    appVariables.color.secondaryBgSubtle;
    appVariables.color.secondaryText;
    appVariables.color.secondaryBorderSubtle;
    
    appVariables.color.success;
    appVariables.color.successRgb;
    appVariables.color.successBgSubtle;
    appVariables.color.successText;
    appVariables.color.successBorderSubtle;
    
    appVariables.color.warning;
    appVariables.color.warningRgb;
    appVariables.color.warningBgSubtle;
    appVariables.color.warningText;
    appVariables.color.warningBorderSubtle;
    
    appVariables.color.info;
    appVariables.color.infoRgb;
    appVariables.color.infoBgSubtle;
    appVariables.color.infoText;
    appVariables.color.infoBorderSubtle;
    
    appVariables.color.danger;
    appVariables.color.dangerRgb;
    appVariables.color.dangerBgSubtle;
    appVariables.color.dangerText;
    appVariables.color.dangerBorderSubtle;
    
    appVariables.color.light;
    appVariables.color.lightRgb;
    appVariables.color.lightBgSubtle;
    appVariables.color.lightText;
    appVariables.color.lightBorderSubtle;
    
    appVariables.color.dark;
    appVariables.color.darkRgb;
    appVariables.color.darkBgSubtle;
    appVariables.color.darkText;
    appVariables.color.darkBorderSubtle;
    
    appVariables.color.inverse;
    appVariables.color.inverseRgb;
    
    appVariables.color.white;
    appVariables.color.whiteRgb;
    
    appVariables.color.black;
    appVariables.color.blackRgb;
    
    appVariables.color.teal;
    appVariables.color.tealRgb;
    
    appVariables.color.indigo;
    appVariables.color.indigoRgb;
    
    appVariables.color.purple;
    appVariables.color.purpleRgb;
    
    appVariables.color.yellow;
    appVariables.color.yellowRgb;
    
    appVariables.color.pink;
    appVariables.color.pinkRgb;
    
    appVariables.color.cyan;
    appVariables.color.cyanRgb;
    
    appVariables.color.gray100;
    appVariables.color.gray200;
    appVariables.color.gray300;
    appVariables.color.gray400;
    appVariables.color.gray500;
    appVariables.color.gray600;
    appVariables.color.gray700;
    appVariables.color.gray800;
    appVariables.color.gray900;
    appVariables.color.gray100Rgb;
    appVariables.color.gray200Rgb;
    appVariables.color.gray300Rgb;
    appVariables.color.gray400Rgb;
    appVariables.color.gray500Rgb;
    appVariables.color.gray600Rgb;
    appVariables.color.gray700Rgb;
    appVariables.color.gray800Rgb;
    appVariables.color.gray900Rgb;
    
    appVariables.color.muted;
    appVariables.color.mutedRgb;
    
    appVariables.color.emphasisColor;
    appVariables.color.emphasisColorRgb;
    
    appVariables.color.bodyBg;
    appVariables.color.bodyBgRgb;
    
    appVariables.color.bodyColor;
    appVariables.color.bodyColorRgb;
    
    appVariables.color.headingColor;
    
    appVariables.color.secondaryColor;
    appVariables.color.secondaryColorRgb;
    appVariables.color.secondaryBg;
    appVariables.color.secondaryBgRgb;
      
    appVariables.color.tertiaryColor;
    appVariables.color.tertiaryColorRgb;
    appVariables.color.tertiaryBg;
    appVariables.color.tertiaryBgRgb;
      
    appVariables.color.linkColor;
    appVariables.color.linkColorRgb;
    appVariables.color.linkHoverColor;
    appVariables.color.linkHoverColorRgb;
      
    appVariables.color.borderColor;
    appVariables.color.borderColorTranslucent;
  }

  onMount(async () => {
    unsubscribe = appVariables.subscribe(value => {
      if (value.color) {
        chart = renderChart(value);
      }
    });
  });
  
  onDestroy(() => {
    if (unsubscribe) {
      unsubscribe();
    }
  });
</script>

<!-- html -->
{#if chart}
	// do your thing here
{/if}

H) Svelte Store - App Sidebar Menus - top

Set the app sidebar menu list from from /stores/appSidebarMenus.js

// single level structure
{
  'url': '/',
  'icon': 'fa fa-sitemap',
  'text': 'Dashboard'
},

// multi level structure 
{
  'icon': 'fa fa-envelope',
  'text': 'Email',
  'children': [{
    'url': '/email/inbox',
    'action': 'Inbox',
    'text': 'Inbox'
  }, {
    'url': '/email/compose',
    'action': 'Compose',
    'text': 'Compose'
  }, {
    'url': '/email/detail',
    'action': 'Detail',
    'text': 'Detail'
  }]
}

I) Theme Color - top

The default theme color is set to the teal color. You may change it from /src/scss/default/_variables.scss 

// LINE 100
$theme:        $teal !default;
***IMPORTANT***
You might need to remove the <AppThemePanel /> component from /routes/+layout.svelte.

This is because app-theme-panel will store a localStorage variable and append the theme class automatically when page load if you have select any theme color before from theme panel.

J) Dark Mode - top

If you wish to enable the dark mode instead, you can easily do so by adding the data-bs-theme="dark" attribute to the HTML tag in /src/app.html.

Here's an example:

change from 
<!DOCTYPE html>
<html lang="en">
</html>
to 
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
</html>

With this example, the data-bs-theme="dark" attribute has been added to html tag. This will enable the dark mode to the entire page.

OR

If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="dark|light" attribute to that component. 

<Panel data-bs-theme="dark">
  <PanelBody>
    <!-- your component content here -->
  </PanelBody>
</Panel>

K) RTL Mode - top

Add the dir="rtl" attribute to <html> for /src/app.html in order to enable Right-To-Left (RTL) layout direction.

<html lang="en" dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

L) Switch Design - top

Replace the existing @import 'default/styles'; line in template_svelte/src/scss/svelte.scss with the selected theme import below, then restart the Vite development server.

Apple Design

  1. Change variable from template_svelte/src/scss/svelte.scss.
    @import 'apple/styles';
  2. No additional icon script is required for the current Iconify-based components.
    <!-- No additional icon script is required. -->
  3. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:pulse-bold-duotone"></iconify-icon>
</div>

Facebook Design

  1. Change variable from template_svelte/src/scss/svelte.scss.
    @import 'facebook/styles';
  2. Enable app header inverse from template_svelte/src/stores/appOptions.js.
    ...
appHeaderInverse: true,     // LINE 10
...

Transparent Design

  1. Change variable from template_svelte/src/scss/svelte.scss.
    @import 'transparent/styles';
  2. Add the .app-cover next to the <body> tag in template_svelte/src/app.html.
    <body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  ...
</body>

Google Design

  1. Change variable from template_svelte/src/scss/svelte.scss.
    @import 'google/styles';
  2. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
</div>
  3. Enable app sidebar wide & light from template_svelte/src/stores/appOptions.js.
    ...
appSidebarWide: true,   // LINE 23
appSidebarLight: true,  // LINE 24
...
  4. Add the navbar desktop toggler to the /src/components/app/AppHeader.svelte.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN brand -->
  <div class="brand">
    <button type="button" class="menu-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="menu-toggler">
      ...
    </button>
    <a class="brand-logo">
      Color Admin
    </a>
  </div>
  <!-- END brand -->
  ...
</div>

Material Design

  1. Change variable from template_svelte/src/scss/svelte.scss.
    @import 'material/styles';
  2. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
</div>
  3. Enable app sidebar wide from template_svelte/src/stores/appOptions.js.
    ...
appSidebarWide: true,  // LINE 23
...
  4. Add the navbar desktop toggler to the /src/components/app/AppHeader.svelte.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN brand -->
  <div class="brand">
    <button type="button" class="menu-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="menu-toggler">
      ...
    </button>
    <a class="brand-logo">
      Color Admin
    </a>
  </div>
  <!-- END brand -->
  ...
</div>
  5. Add the floating navbar form to the /src/components/app/AppHeader.svelte . Do not add a second search form.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="menu">
    <div class="menu-item">
      <a href="#" class="menu-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- EXISTING SEARCH FORM -->
      <div class="menu-item menu-item-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="menu-item-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_svelte/src/app.html.
    <!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->

M) RTL Mode - top

Add the dir="rtl" attribute to <html> for /src/app.html in order to enable Right-To-Left (RTL) layout direction.

<html dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

M) SCSS Configuration - top

Global Variables

The /src/scss/default/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /src/scss/default/_variables.scss file in your code editor and modify the values of the variables to suit your needs. 

<!-- global variable -->
/src/scss/default/_variables.scss

Dark Mode Variables

The /src/scss/default/_variables-dark.scss file contains the variables that control the styles for dark mode. These variables are used in conjunction with the variables in the /src/scss/default/_variables.scss file to provide different values for light and dark modes. 

<!-- dark mode variable -->
/src/scss/default/_variables-dark.scss

N) Bootstrap Components - top

We have created the common re-usable Panel bootstrap component for this template. You may found the panel component via /src/components/bootstrap/

//usage 
<Panel>
  <PanelHeader>...</PanelHeader>
  <PanelBody>...</PanelBody>
  <PanelFooter>...</PanelFooter>
</Panel>

O) Bootstrap Javascript - top

You may use the default bootstrap data attribute like data-bs-toggle="dropdown" OR import the required modules from bootstrap. 

// usage example
<script>
  import { onMount } from 'svelte';
  
  onMount(async () => {
    let bootstrap = await import('bootstrap');
    new bootstrap.ScrollSpy(document.body, {
      target: '#sidebar-bootstrap',
      offset: 200
    });
  });
</script>

P) NPM Package - top

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/bootstrap 

{
  "name": "color-admin",
  "version": "6.0.0",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@iconify/svelte": "^5.0.0",
    "@sveltejs/adapter-auto": "^6.0.1",
    "@sveltejs/adapter-static": "^3.0.8",
    "@sveltejs/kit": "^2.22.2",
    "svelte": "^5.56.8",
    "vite": "^8.2.1"
  },
  "type": "module",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^7.3.1",
    "@fullcalendar/bootstrap": "^6.1.21",
    "@fullcalendar/common": "^5.11.5",
    "@fullcalendar/core": "^6.1.21",
    "@fullcalendar/daygrid": "^6.1.21",
    "@fullcalendar/interaction": "^6.1.21",
    "@fullcalendar/list": "^6.1.21",
    "@fullcalendar/timegrid": "^6.1.21",
    "@picmo/popup-picker": "^5.8.5",
    "@tiptap/core": "^2.25.0",
    "@tiptap/pm": "^2.25.0",
    "@tiptap/starter-kit": "^2.25.0",
    "apexcharts": "^3.54.1",
    "awesomplete": "^1.1.7",
    "bootstrap": "^5.3.8",
    "bootstrap-icons": "^1.13.1",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.5.0",
    "datatables.net-bs5": "^2.3.2",
    "datatables.net-buttons": "^3.2.4",
    "datatables.net-buttons-bs5": "^3.2.4",
    "datatables.net-fixedcolumns": "^5.0.4",
    "datatables.net-fixedcolumns-bs5": "^5.0.4",
    "datatables.net-responsive": "^3.0.5",
    "datatables.net-responsive-bs5": "^3.0.5",
    "flag-icons": "^7.5.0",
    "flatpickr": "^4.6.13",
    "imask": "^7.6.1",
    "jquery": "^3.7.1",
    "jsvectormap": "^1.7.0",
    "jszip": "^3.10.1",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "pdfmake": "^0.2.20",
    "perfect-scrollbar": "^1.5.6",
    "photoswipe": "^5.4.4",
    "quill": "^2.0.3",
    "sass": "1.77.7",
    "simple-line-icons": "^2.5.5",
    "svelte-apexcharts": "^1.0.2",
    "svelte-autocomplete": "^0.0.4",
    "svelte-body": "^2.0.0",
    "svelte-color-picker": "^1.0.7",
    "svelte-highlight": "^7.8.3",
    "svelte-select": "^5.8.3",
    "svelte-tags-input": "^6.0.2"
  }
}