Documentation

if (!document.querySelector('link[rel="manifest"]')) {
	var manifestLink = document.createElement("link");
	manifestLink.rel = "manifest";
	manifestLink.href = "pwa-manifest.json";
	document.head.appendChild(manifestLink);
}

if ("serviceWorker" in navigator) {
	window.addEventListener("load", function () {
		var swFile = document.querySelector(".doc-wrapper, .pwa-install-bar") ? "pwa-sw.js" : "service-worker.js";
		navigator.serviceWorker.register(swFile);
	});
}

Each worker pre-caches its own list of pages, styles and images under a versioned CACHE_NAME (e.g. static-cache-v3). To cache an additional page or asset, add its path to the FILES_TO_CACHE array and bump the cache name so returning visitors pick up the new list. assets/js/offline.js complements this by reloading the page automatically once the connection comes back online, and assets/js/install.js listens for the browser's beforeinstallprompt event to drive the "Add to Home Screen" button.

Replace the logo image at assets/img/logo.png, or edit the markup directly - the same brand link appears at the top of the sidebar on every page:

<a href="index.html" class="side-brand">
	<img src="assets/img/logo.png" alt="Smarthr">
</a>

Remember to also refresh the install/home-screen icons in assets/images/icons/ (referenced from manifest.json) and assets/images/favicon.png if you change the branding.

The default font is Plus Jakarta Sans, imported and mapped to Sass variables in assets/scss/_variables.scss:

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

$font-family-primary: 'Plus Jakarta Sans', 'poppinsregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

After editing the SCSS, recompile it to assets/css/style.css with the Dart Sass CLI:

sass --watch main.scss:../css/style.css in scss folder

Every color used across the template is a CSS custom property, defined once at the top of assets/scss/utils/_variables.scss (compiled straight through into :root):

:root {
	--primary: #3a57c4;
	--primary-hover: #2f48a8;
	--primary-soft: #eef1fb;
	--accent: #6c4fd6;
	--success: #28a745;
	--warning: #ffc107;
	--danger: #dc3545;
	--info: #009efb;
}

Changing a Color

Update the value in _variables.scss and recompile Sass - because every component (buttons, badges, cards, tabs) references these custom properties instead of hard-coded hex values, one change re-tints the whole app.