https://www.nas-stik.si/Portals/_default/skins/nasstik/Plugins/DarkMode/dark-mode.js

1function detectColorScheme()
2{
3	var theme = "light";
4
5	//local storage is used to override OS theme settings
6	if(localStorage.getItem("theme"))
7	{
8		if(localStorage.getItem("theme") === "dark")
9		{
10			theme = "dark";
11		}
12	}
13	else if(window.matchMedia("(prefers-color-scheme:dark)").matches)
14	{
15		//OS theme setting detected as dark
16		theme = "dark";
17	}
18	else if(!window.matchMedia)
19	{
20		//matchMedia method not supported
21		return false;
22	}
23
24	//dark theme preferred, set document with a `data-theme` attribute
25	if (theme === "dark")
26	{
27		document.documentElement.setAttribute("data-theme", "dark");
28	}
29	else
30	{
31		document.documentElement.setAttribute("data-theme", "light");
32	}
33}
34
35/*Dark Mode - Init*/
36detectColorScheme();
37
38//identify the toggle switch HTML element
39const toggleSwitch = document.querySelector('.js-dark-mode-toggle #darkModeToggle');
40
41//function that changes the theme, and sets a localStorage variable to track the theme between page loads
42function switchTheme(e)
43{
44	if (e.target.checked)
45	{
46		localStorage.setItem('theme', 'dark');
47		document.documentElement.setAttribute('data-theme', 'dark');
48		toggleSwitch.checked = true;
49		//Gradient Canvas reInit
50		gradient.connect();
51	}
52	else
53	{
54		localStorage.setItem('theme', 'light');
55		document.documentElement.setAttribute('data-theme', 'light');
56		toggleSwitch.checked = false;
57		//Gradient Canvas reInit
58		gradient.connect();
59	}
60}
61
62//check if item exists on page
63var element =  document.getElementById('darkModeToggle');
64if (typeof(element) !== 'undefined' && element !== null)
65{
66	//listener for changing themes
67	toggleSwitch.addEventListener('change', switchTheme, false);
68
69	//pre-check the dark-theme checkbox if dark-theme is set
70	if (document.documentElement.getAttribute("data-theme") === "dark")
71	{
72		toggleSwitch.checked = true;
73	}
74}
75
76//Remove animation on toggler load
77$(window).on('load', function()
78{
79	$('.js-dark-mode-toggle').removeClass('js-preload');
80});