Documentation - Color Admin

Follow the following step to install the laravel in your localhost
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 >= v10.x has been installed on your localhost / server

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

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" 
  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>

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

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)

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.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
  });
  
  onDestroy(() => {
    // set to default before leave the page
    $appOptions.appFooter = false;
  });
</script>

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}

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'
  }]
}

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.

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>

<!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.

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>

Apple Design

Change variable from template_svelte/src/scss/svelte.scss.
```
@import 'apple/styles';
```

Add the following code to template_svelte/src/app.html.

<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.

<div class="menu-icon">
  <ion-icon name="pulse-outline" class="bg-gradient-blue"></ion-icon>
</div>

Facebook Design

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

Transparent Design

Change variable from template_svelte/src/scss/svelte.scss.
```
@import 'transparent/styles';
```

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

Change variable from template_svelte/src/scss/svelte.scss.
```
@import 'google/styles';
```

Change the sidebar icon from Fontawesome to Material Icons.

<div class="menu-icon">
  <i class="material-icons">home</i>
</div>

Enable app sidebar wide & light from template_svelte/src/stores/appOptions.js.

...
appSidebarWide: true,   // LINE 23
appSidebarLight: true,  // LINE 24
...

Add the navbar desktop toggler to the /src/components/app/AppHeader.svelte.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler">
      ...
    </button>
    <a class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

Change variable from template_svelte/src/scss/svelte.scss.
```
@import 'material/styles';
```

Change the sidebar icon from Fontawesome to Material Icons.

<div class="menu-icon">
  <i class="material-icons">home</i>
</div>

Enable app sidebar wide from template_svelte/src/stores/appOptions.js.
```
...
appSidebarWide: true,  // LINE 23
...
```

Add the navbar desktop toggler to the /src/components/app/AppHeader.svelte.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler">
      ...
    </button>
    <a class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Add the floating navbar form to the /src/components/app/AppHeader.svelte AND REMOVE the default .navbar-form.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item">
      <a href="#" class="navbar-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div class="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="navbar-floating-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>

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 -->

To enable RTL mode, follow these steps:

Navigate to the /src/scss/default/_variables.scss file in your code editor.
Find the $enable-rtl variable and change its value to true:
```
$enable-rtl: true;
```
This will enable RTL mode for your application.

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

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>

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>

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": "5.4.2",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@iconify/svelte": "^4.0.2",
    "@sveltejs/adapter-auto": "^3.3.1",
    "@sveltejs/adapter-static": "^3.0.6",
    "@sveltejs/kit": "^2.8.4",
    "svelte": "^5.2.8",
    "vite": "^5.0.0"
  },
  "type": "module",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.7.1",
    "@fullcalendar/bootstrap": "^6.1.15",
    "@fullcalendar/common": "^5.11.5",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/list": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@picmo/popup-picker": "^5.8.5",
    "@tiptap/core": "^2.10.2",
    "@tiptap/pm": "^2.10.2",
    "@tiptap/starter-kit": "^2.10.2",
    "apexcharts": "4.1",
    "awesomplete": "^1.1.7",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.4.6",
    "datatables.net-bs5": "^2.1.8",
    "datatables.net-buttons": "^3.2.0",
    "datatables.net-buttons-bs5": "^3.2.0",
    "datatables.net-fixedcolumns": "^5.0.4",
    "datatables.net-fixedcolumns-bs5": "^5.0.4",
    "datatables.net-responsive": "^3.0.3",
    "datatables.net-responsive-bs5": "^3.0.3",
    "flag-icons": "^7.2.3",
    "flatpickr": "^4.6.13",
    "imask": "^7.6.1",
    "jquery": "^3.7.1",
    "jsvectormap": "^1.6.0",
    "jszip": "^3.10.1",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "pdfmake": "^0.2.15",
    "perfect-scrollbar": "^1.5.6",
    "photoswipe": "^5.4.4",
    "quill": "^2.0.2",
    "sass": "1.75.0",
    "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.7.0",
    "svelte-select": "^5.8.3",
    "svelte-tags-input": "^6.0.1"
  }
}

Color Admin

A) Installation - top

B) File Structure - top

C) Layout Structure - top

D) Components - top

E) Svelte Store - top

F) Svelte Store - App Options - top

G) Svelte Store - App Variable - top

H) Svelte Store - App Sidebar Menus - top

I) Theme Color - top

J) Dark Mode - top

Here's an example:

K) Switch Design - top

Apple Design

Facebook Design

Transparent Design

Google Design

Material Design

L) RTL Mode - top

M) SCSS Configuration - top

N) Bootstrap Components - top

O) Bootstrap Javascript - top

P) NPM Package - top