1232 lines
45 KiB
HTML
1232 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Dark Mode - Documentation | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<!-- bundlecss:vendor [..] -->
|
||
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<!-- bundlecss:theme [..] ?v=1.0 -->
|
||
|
||
|
||
|
||
<link rel="preload" href="../assets/css/theme.css" data-hs-appearance="default" as="style">
|
||
<link rel="preload" href="../assets/css/docs.css" data-hs-appearance="default" as="style">
|
||
<link rel="preload" href="../assets/css/theme-dark.css" data-hs-appearance="dark" as="style">
|
||
<link rel="preload" href="../assets/css/docs-dark.css" data-hs-appearance="dark" as="style">
|
||
|
||
<style data-hs-appearance-onload-styles>
|
||
* {
|
||
transition: unset !important;
|
||
}
|
||
|
||
body {
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
|
||
|
||
<script>
|
||
window.hs_config = {"autopath":"@@autopath","deleteLine":"hs-builder:delete","deleteLine:build":"hs-builder:build-delete","deleteLine:dist":"hs-builder:dist-delete","previewMode":false,"startPath":"/index.html","vars":{"themeFont":"https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap","version":"?v=1.0"},"layoutBuilder":{"extend":{"switcherSupport":true},"header":{"layoutMode":"default","containerMode":"container-fluid"},"sidebarLayout":"default"},"themeAppearance":{"layoutSkin":"default","sidebarSkin":"default","styles":{"colors":{"primary":"#377dff","transparent":"transparent","white":"#fff","dark":"132144","gray":{"100":"#f9fafc","900":"#1e2022"}},"font":"Inter"}},"languageDirection":{"lang":"en"},"skipFilesFromBundle":{"dist":["assets/js/hs.theme-appearance.js","assets/js/hs.theme-appearance-charts.js"],"build":["assets/css/theme.css","assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside-mini-cache.js","assets/js/demo.js","assets/css/theme-dark.css","assets/css/docs.css","assets/vendor/icon-set/style.css","assets/js/hs.theme-appearance.js","assets/js/hs.theme-appearance-charts.js","node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js"]},"minifyCSSFiles":["assets/css/theme.css","assets/css/theme-dark.css"],"copyDependencies":{"dist":{"*assets/js/theme-custom.js":""},"build":{"*assets/js/theme-custom.js":"","node_modules/bootstrap-icons/font/*fonts/**":"assets/css"}},"buildFolder":"","replacePathsToCDN":{},"directoryNames":{"src":"./src","dist":"./dist","build":"./build"},"fileNames":{"dist":{"js":"theme.min.js","css":"theme.min.css"},"build":{"css":"theme.min.css","js":"theme.min.js","vendorCSS":"vendor.min.css","vendorJS":"vendor.min.js"}},"fileTypes":"jpg|png|svg|mp4|webm|ogv|json"}
|
||
window.hs_config.gulpRGBA = (p1) => {
|
||
const options = p1.split(',')
|
||
const hex = options[0].toString()
|
||
const transparent = options[1].toString()
|
||
|
||
var c;
|
||
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
|
||
c= hex.substring(1).split('');
|
||
if(c.length== 3){
|
||
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||
}
|
||
c= '0x'+c.join('');
|
||
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + transparent + ')';
|
||
}
|
||
throw new Error('Bad Hex');
|
||
}
|
||
window.hs_config.gulpDarken = (p1) => {
|
||
const options = p1.split(',')
|
||
|
||
let col = options[0].toString()
|
||
let amt = -parseInt(options[1])
|
||
var usePound = false
|
||
|
||
if (col[0] == "#") {
|
||
col = col.slice(1)
|
||
usePound = true
|
||
}
|
||
var num = parseInt(col, 16)
|
||
var r = (num >> 16) + amt
|
||
if (r > 255) {
|
||
r = 255
|
||
} else if (r < 0) {
|
||
r = 0
|
||
}
|
||
var b = ((num >> 8) & 0x00FF) + amt
|
||
if (b > 255) {
|
||
b = 255
|
||
} else if (b < 0) {
|
||
b = 0
|
||
}
|
||
var g = (num & 0x0000FF) + amt
|
||
if (g > 255) {
|
||
g = 255
|
||
} else if (g < 0) {
|
||
g = 0
|
||
}
|
||
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
|
||
}
|
||
window.hs_config.gulpLighten = (p1) => {
|
||
const options = p1.split(',')
|
||
|
||
let col = options[0].toString()
|
||
let amt = parseInt(options[1])
|
||
var usePound = false
|
||
|
||
if (col[0] == "#") {
|
||
col = col.slice(1)
|
||
usePound = true
|
||
}
|
||
var num = parseInt(col, 16)
|
||
var r = (num >> 16) + amt
|
||
if (r > 255) {
|
||
r = 255
|
||
} else if (r < 0) {
|
||
r = 0
|
||
}
|
||
var b = ((num >> 8) & 0x00FF) + amt
|
||
if (b > 255) {
|
||
b = 255
|
||
} else if (b < 0) {
|
||
b = 0
|
||
}
|
||
var g = (num & 0x0000FF) + amt
|
||
if (g > 255) {
|
||
g = 255
|
||
} else if (g < 0) {
|
||
g = 0
|
||
}
|
||
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
|
||
}
|
||
</script>
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
|
||
<script src="../assets/js/hs.theme-appearance.js"></script>
|
||
|
||
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo" data-hs-theme-appearance="default">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos-light/logo.svg" alt="Logo" data-hs-theme-appearance="dark">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v2.0</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="docsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in docs" aria-label="Search in docs">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu navbar-dropdown-menu-borderless w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" data-hs-theme-appearance="default" style="width: 7rem;">
|
||
<img class="mb-3" src="../assets/svg/illustrations-light/oc-error.svg" alt="Image Description" data-hs-theme-appearance="dark" style="width: 7rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<div class="d-grid flex-grow-1 px-2">
|
||
<button type="button" class="navbar-toggler btn btn-white" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h3 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo" data-hs-theme-appearance="default">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos-light/logo.svg" alt="Logo" data-hs-theme-appearance="dark">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v2.0</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Documentation</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Getting started</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/getting-started.html">Getting Started</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/gulp.html">Gulp</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/darkmode.html">Dark Mode <span class="badge bg-soft-dark text-dark lh-base ms-1">New</span></a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/customization.html">Customization</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/credits.html">Credits</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/changelog.html">Changelog</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Design & Graphics</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/bs-icons.html">Bootstrap Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/illustrations.html">Illustrations</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Components</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/accordion.html">Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/alerts.html">Alerts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/avatars.html">Avatars</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/badge.html">Badge</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/buttons.html">Buttons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/button-group.html">Button Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/cards.html">Cards</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/collapse.html">Collapse</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/column-divider.html">Column Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/devices.html">Devices</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/divider.html">Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropdowns.html">Dropdowns</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/icons.html">Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/list-group.html">List Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/legend-indicator.html">Legend Indicator</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/modal.html">Modal</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/offcanvas.html">Offcanvas</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/page-header.html">Page Header</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/pagination.html">Pagination</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/popovers.html">Popovers</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/progress.html">Progress</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/profile.html">Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shapes.html">Shapes</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sliding-img.html">Sliding Image</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spinners.html">Spinners</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/steps.html">Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tab.html">Tab</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toasts.html">Toasts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tooltips.html">Tooltips</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typography.html">Typography</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Navbars</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navbar.html">Navbar</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navs.html">Navs</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/mega-menu.html">Mega Menu</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navbar-vertical-aside.html">Navbar Vertical Aside</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/scrollspy.html">Scrollspy</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Tables</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/datatables.html">Datatables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/table-sticky-header.html">Sticky Header</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Basic forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/basic-forms.html">Basic Forms</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/checks-and-switches.html">Checks & Switches</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-group.html">Input Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Advanced Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/select.html">Advanced Select</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/datepicker.html">Datepicker (Flatpickr)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/daterangepicker.html">Date Range Picker</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/calendar.html">Calendar (Fullcalendar)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/file-attachments.html">File Attachments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropzone.html">Drag’ n’ Drop File Uploads</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quill.html">WYSIWYG Editor</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quantity-counter.html">Quantity Counter</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/copy-to-clipboard.html">Copy to Clipboard</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-mask.html">Input Mask</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/step-forms.html">Step Forms (Wizards)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/add-field.html">Add Field</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-password.html">Toggle Password</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/count-characters.html">Count Characters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/form-search.html">Form Search</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-switch.html">Toggle Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/google-recaptcha.html">Google reCAPTCHA</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Charts</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/chartjs.html">Chart.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/counter.html">Counter</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/circles.html">Circles.js (Pie Chart)</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Others</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/fslightbox.html">Fullscreen Lightbox</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/maps-leaflet.html">Leaflet</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/maps-jsvectormap.html">JSVectorMap</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sortablejs.html">SortableJS</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sticky-block.html">Sticky Block</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/go-to.html">Go To</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Utilities</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/backgrounds.html">Backgrounds</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/borders.html">Borders</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/colors.html">Colors</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/links.html">Links</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/position.html">Position</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shadows.html">Shadows</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sizing.html">Sizing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spacing.html">Spacing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/z-index.html">Z-index</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/opacity.html">Opacity</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Dark Mode</h1>
|
||
<p class="docs-page-header-text">Learn how to use and style your side in dark mode.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="quick-setup" class="hs-docs-heading">
|
||
Quick Setup <a class="anchorjs-link" href="#quick-setup" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<ol>
|
||
<li>
|
||
<p>Add your initial stylesheet into the <code><head></code> after all other stylesheets. Like:</p>
|
||
<pre class="rounded mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<!-- CSS Front Template -->
|
||
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
||
<link rel="preload" href="@@autopath/assets/css/theme.css" data-hs-appearance="default" as="style">
|
||
<link rel="preload" href="@@autopath/assets/css/theme-dark.css" data-hs-appearance="dark" as="style">
|
||
|
||
<style data-hs-appearance-onload-styles>
|
||
* {
|
||
transition: unset !important;
|
||
}
|
||
|
||
body {
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
</code>
|
||
</pre>
|
||
</li>
|
||
|
||
<li>
|
||
<p>Include the <code>hs.theme-appearance.js</code> script right after the open <code><head></code> tag:</p>
|
||
<pre class="rounded mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script src="@@autopath/assets/js/hs.theme-appearance.js"></script>
|
||
</code>
|
||
</pre>
|
||
</li>
|
||
|
||
<li>
|
||
<p>Include HTML partial inside your content containing dropdown component for appearance picker:</p>
|
||
<pre class="rounded mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<!-- Style Switcher -->
|
||
@@include("@@autopath/layouts-components/darkmode-switcher.html", {
|
||
"dropup": "true"
|
||
})
|
||
<!-- End Style Switcher -->
|
||
</code>
|
||
</pre>
|
||
</li>
|
||
|
||
<li>
|
||
<p>Include HTML partial containing javascrit for dropdown component to pick appearance before the closing <code></body></code> tag:</p>
|
||
<pre class="rounded mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<!-- Style Switcher JS -->
|
||
@@if (layoutBuilder.extend.switcherSupport === true) {
|
||
@@include("@@autopath/partials/layouts-components/darkmode-switcher-js.html")
|
||
}
|
||
<!-- End Style Switcher JS -->
|
||
</code>
|
||
</pre>
|
||
</li>
|
||
</ol>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="hs-theme-appearance" class="hs-docs-heading">
|
||
HSThemeAppearance <a class="anchorjs-link" href="#hs-theme-appearance" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Set Appearance -->
|
||
<div class="card mb-4">
|
||
<div class="card-header">
|
||
<h5 class="card-header-title">setAppearance</h5>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Parameters</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td><code>appearance</code></td>
|
||
<td>Appearance name that appears in the <code>data-hs-appearance</code> attribute inside the <code><head></code> tag.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
|
||
<hr class="my-0">
|
||
|
||
<div class="card-body">
|
||
<h5>Overview</h5>
|
||
<p>A method of the <code>HSThemeAppearance</code> class that allows you to change appearance on the fly. This method takes the name appearance as a parameter.</p>
|
||
|
||
<h5>Examples</h5>
|
||
<p>Sets a dark appearance:</p>
|
||
|
||
<pre class="rounded prism-light mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
HSThemeAppearance.setAppearance('dark')
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
|
||
<p>Sets auto appearance (based on your system settings):</p>
|
||
|
||
<pre class="rounded prism-light mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
HSThemeAppearance.setAppearance('auto')
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark" role="alert">
|
||
<div class="d-flex align-items-baseline">
|
||
<div class="flex-shrink-0">
|
||
<i class="bi-info-circle me-1"></i>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-2">Make sure the <code><head></code> section includes style with <code>data-hs-appearance="dark"</code> attribute.</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Alert -->
|
||
</div>
|
||
</div>
|
||
<!-- End Set Appearance -->
|
||
|
||
<!-- Get Appearance -->
|
||
<div class="card mb-4">
|
||
<div class="card-header">
|
||
<h5 class="card-header-title">getAppearance</h5>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h5>Overview</h5>
|
||
<p>A method of the <code>HSThemeAppearance</code> class that returns the name of the current appearance.</p>
|
||
|
||
<h5>Example</h5>
|
||
<p>Get current appearance:</p>
|
||
|
||
<pre class="rounded prism-light mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
HSThemeAppearance.getAppearance() // dark
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark" role="alert">
|
||
<div class="d-flex align-items-baseline">
|
||
<div class="flex-shrink-0">
|
||
<i class="bi-info-circle me-1"></i>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-2">Make sure the <code><head></code> section includes style with <code>data-hs-appearance="dark"</code> attribute.</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Alert -->
|
||
</div>
|
||
</div>
|
||
<!-- End Get Appearance -->
|
||
|
||
<!-- Get Original Appearance -->
|
||
<div class="card mb-4">
|
||
<div class="card-header">
|
||
<h5 class="card-header-title">getOriginalAppearance</h5>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h5>Overview</h5>
|
||
<p>If the current appearance is set to auto (system settings), then dark/light will be returned from <code>HSThemeAppearance.getAppearance()</code>, but if we need to get the original name of the appearance state, then the <code>HSThemeAppearance.getOriginalAppearance()</code> method will help.</p>
|
||
|
||
<h5>Example</h5>
|
||
<p>Get current original name of the appearance:</p>
|
||
|
||
<pre class="rounded prism-light mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
HSThemeAppearance.getAppearance() // dark
|
||
HSThemeAppearance.getOriginalAppearance() // auto
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Get Original Appearance -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="images" class="hs-docs-heading">
|
||
Images <a class="anchorjs-link" href="#images" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>You can control the display of elements on different appearances with <code>data-hs-theme-appearance</code> attribute.</p>
|
||
|
||
<pre class="rounded mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<!-- Will be displayed on the default appearance -->
|
||
<img src="@@autopath/assets/svg/illustrations/oc-error.svg" alt="Image Description" data-hs-theme-appearance="default">
|
||
|
||
<!-- Will be displayed on the dark appearance -->
|
||
<img src="@@autopath/assets/svg/illustrations-light/oc-error.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="with-switcher" class="hs-docs-heading">
|
||
With switcher <a class="anchorjs-link" href="#with-switcher" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-gulpTab1" href="#nav-gulp1" data-bs-toggle="pill" data-bs-target="#nav-gulp1" role="tab" aria-controls="nav-gulp1" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab1" href="#nav-js1" data-bs-toggle="pill" data-bs-target="#nav-js1" role="tab" aria-controls="nav-js1" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent1">
|
||
<div class="tab-pane fade show active p-4" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<!-- Form Switch -->
|
||
<div class="form-check form-switch form-switch-dark form-switch-darkmode-with-icons">
|
||
<input class="form-check-input me-0" type="checkbox" id="darkSwitch">
|
||
</div>
|
||
<!-- End Form Switch -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-gulp1" role="tabpanel" aria-labelledby="nav-gulpTab1">
|
||
<pre>
|
||
<code class="language-html" data-lang="html">
|
||
<!-- Form Switch -->
|
||
<div class="form-check form-switch form-switch-dark">
|
||
<input class="form-check-input me-0" type="checkbox" id="darkSwitch">
|
||
</div>
|
||
<!-- End Form Switch -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js1" role="tabpanel" aria-labelledby="nav-jsTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="javascript">
|
||
<script>
|
||
// SWITHCER THEME APPEARANCE
|
||
// =======================================================
|
||
const $swithcer = document.querySelector('#darkSwitch')
|
||
|
||
if (HSThemeAppearance.getOriginalAppearance() === 'dark') {
|
||
$swithcer.checked = true
|
||
}
|
||
|
||
$swithcer.addEventListener('change', e => {
|
||
HSThemeAppearance.setAppearance(e.target.checked ? 'dark' : 'default')
|
||
})
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="chartjs" class="hs-docs-heading">
|
||
ChartJS <a class="anchorjs-link" href="#chartjs" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>For convenience and to save time, we have added the <code>addTheme</code> method.</p>
|
||
|
||
<!-- Add Chart Theme -->
|
||
<div class="card mb-4">
|
||
<div class="card-header">
|
||
<h5 class="card-header-title">addTheme</h5>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Parameters</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td><code>chart ID</code></td>
|
||
<td>ID is required for the chart to which you want to add a theme.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>appearance</code></td>
|
||
<td>Appearance name that appears in the <code>data-hs-appearance</code> attribute inside the <code><head></code> tag.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>options</code></td>
|
||
<td>Chart options for the specified <code>appearance</code>.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
|
||
<hr class="my-0">
|
||
|
||
<div class="card-body">
|
||
<h5>Overview</h5>
|
||
<p>Allows you to add a chart theme and then apply the theme automatically when the appearance changes using the <code>HSThemeAppearance.setAppearance</code> method.</p>
|
||
|
||
<h5>Examples</h5>
|
||
<p>Add a dark theme:</p>
|
||
|
||
<pre class="rounded prism-light mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
HSCore.components.HSChartJS.addTheme('referrals-chart', 'dark', {
|
||
options: {
|
||
scales: {
|
||
yAxes: [{
|
||
gridLines: {
|
||
color: '#2f3235',
|
||
zeroLineColor: '#2f3235'
|
||
},
|
||
ticks: {
|
||
fontColor: '#c5c8cc',
|
||
}
|
||
}],
|
||
xAxes: [{
|
||
gridLines: {
|
||
color: '#2f3235'
|
||
},
|
||
ticks: {
|
||
fontColor: '#c5c8cc',
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
|
||
<p>Add a dark theme for matrix chart:</p>
|
||
|
||
<pre class="rounded prism-light mb-4">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
HSCore.components.HSChartMatrixJS.addTheme('chartjs-matrix', 'dark', {
|
||
options: {
|
||
scales: {
|
||
xAxes: [{
|
||
ticks: {
|
||
"fontColor": '#c5c8cc'
|
||
}
|
||
}],
|
||
yAxes: [{
|
||
ticks: {
|
||
"fontColor": '#c5c8cc'
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark" role="alert">
|
||
<div class="d-flex align-items-baseline">
|
||
<div class="flex-shrink-0">
|
||
<i class="bi-info-circle me-1"></i>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-2">Make sure the <code><head></code> section includes style with <code>data-hs-appearance="dark"</code> attribute.</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Alert -->
|
||
</div>
|
||
</div>
|
||
<!-- End Add Chart Theme -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="events" class="hs-docs-heading">
|
||
Events <a class="anchorjs-link" href="#events" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Events -->
|
||
<div class="card mb-4">
|
||
<div class="card-header">
|
||
<h5 class="card-header-title">on-hs-appearance-change</h5>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h5>Overview</h5>
|
||
<p>Event fires on appearances change.</p>
|
||
|
||
<h5>Examples</h5>
|
||
|
||
<pre class="rounded prism-light">
|
||
<code class="language-html" data-lang="html">
|
||
<script>
|
||
window.addEventListener('on-hs-appearance-change', e => {
|
||
console.log(e.detail === 'dark' ? '#25282a' : '#fff')
|
||
})
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Events -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
<!-- JS Global Compulsory hs-builder:build-delete -->
|
||
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [..] -->
|
||
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
<script src="../node_modules/list.js/dist/list.min.js"></script>
|
||
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||
<script src="../assets/vendor/prism/prism.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<!-- bundlejs:theme [..] -->
|
||
<script src="../assets/js/hs.core.js"></script>
|
||
<script src="../assets/js/hs.list.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
HSCore.components.HSList.init('#docsSearch');
|
||
const docsSearch = HSCore.components.HSList.getItem('docsSearch');
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/docs-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
docsSearch.add(data)
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
|
||
|
||
// SWITHCER THEME APPEARANCE
|
||
// =======================================================
|
||
const $swithcer = document.querySelector('#darkSwitch')
|
||
|
||
if (HSThemeAppearance.getOriginalAppearance() === 'dark') {
|
||
$swithcer.checked = true
|
||
}
|
||
|
||
$swithcer.addEventListener('change', e => {
|
||
HSThemeAppearance.setAppearance(e.target.checked ? 'dark' : 'default')
|
||
})
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|