diff --git a/about.html b/about.html index 12d08a7..a880c1e 100644 --- a/about.html +++ b/about.html @@ -13,9 +13,6 @@ - - - @@ -29,12 +26,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/assets/js/display-mode.js b/assets/js/display-mode.js index 3777c29..7d70729 100644 --- a/assets/js/display-mode.js +++ b/assets/js/display-mode.js @@ -1,17 +1,76 @@ -// Get mode from local storage -function getDisplayMode() { return localStorage.getItem('mode') || 'system'; } -// Save mode to local storage -function setDisplayMode(mode) { localStorage.setItem('mode', mode); } -// Determine theme from mode name +"use strict"; +const DISPLAY_MODE_STORAGE_KEY = 'mode'; + +// Get mode from local storage. +function getDisplayMode() { return localStorage.getItem(DISPLAY_MODE_STORAGE_KEY) || 'system'; } + +// Save mode to local storage. +function setDisplayMode(mode) { localStorage.setItem(DISPLAY_MODE_STORAGE_KEY, mode); } + +// Determine theme from mode name. function modeToTheme(mode) { - if (mode === 'light' || mode === 'dark') { return mode; } - if (matchMedia('(prefers-color-scheme: light').matches) { return 'light'; } - return 'dark'; + if(mode === 'light' || mode === 'dark') { return mode; } + if(matchMedia('(prefers-color-scheme: light)').matches) { return 'light'; } + return 'dark'; } -// Change the mode + +// Change the mode. function changeMode(mode) { - document.documentElement.dataset.appliedTheme = modeToTheme(mode); - setDisplayMode(mode); + document.documentElement.dataset.appliedTheme = modeToTheme(mode); + setDisplayMode(mode); } -// Initialise mode + +// Initialise mode. document.documentElement.dataset.appliedTheme = modeToTheme(getDisplayMode()); + +function setDisplayModeIcon(mode) { + let iconClass = "fa fa-circle-half-stroke"; + let title = "OS Default" + if(mode === 'light') { + iconClass = "fa fa-sun"; + title = "Light Theme"; + } else if(mode === 'dark') { + iconClass = "fa fa-moon"; + title = "Dark Theme"; + } + const icon = document.querySelector('#displayMode .currentMode i'); + const currentMode = document.querySelector('#displayMode .currentMode'); + + if(!icon || !currentMode) { + return; + } + + icon.className = iconClass; + currentMode.title = title; +} + +function initDisplayMode() { + const displayMode = document.querySelector('#displayMode'); + const currentMode = displayMode?.querySelector('.currentMode'); + const modePicker = displayMode?.querySelector('.pickMode'); + + if(!currentMode || !modePicker) { + return; + } + + setDisplayModeIcon(getDisplayMode()); + currentMode.addEventListener('click', () => { + modePicker.style.display = 'block'; + }); + + modePicker.querySelectorAll('li').forEach((item) => { + item.addEventListener('click', () => { + const mode = item.className; + changeMode(mode); + setDisplayModeIcon(mode); + modePicker.style.display = 'none'; + }); + }); +} + +// Failsafe loading pattern. +if(document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", initDisplayMode); +} else { + initDisplayMode(); +} diff --git a/assets/js/header.js b/assets/js/header.js deleted file mode 100644 index 9f37a97..0000000 --- a/assets/js/header.js +++ /dev/null @@ -1,28 +0,0 @@ -var pageHeight = $(window).height(); -$(document).ready(function() { - - $('.top').click(function(){$('body').scrollTo($('body'),700,{offset:{top:-20}});}); - - // $("a[href^='#']").click(function(e){e.preventDefault(); $('body').scrollTo($(this).attr('href'),1000, {offset:-20}); }); - - - // Mode picker - setDisplayModeIcon(getDisplayMode()); - $('#displayMode .currentMode').click(function () { - $('#displayMode .pickMode').show(); - }); - $('#displayMode .pickMode li').click(function () { - changeMode(this.className); - setDisplayModeIcon(this.className); - $('#displayMode .pickMode').hide(); - }); -}); - -function setDisplayModeIcon(mode) { - let iconClass = "fa fa-circle-half-stroke"; - let title = "OS Default" - if (mode === 'light') { iconClass = "fa fa-sun"; title = "Light Theme"; } - else if (mode === 'dark') { iconClass = "fa fa-moon"; title = "Dark Theme";} - $('#displayMode .currentMode i').removeClass().addClass(iconClass); - $('#displayMode .currentMode').attr({title}); -} diff --git a/community.html b/community.html index 20ca019..b9ffc94 100644 --- a/community.html +++ b/community.html @@ -13,9 +13,6 @@ - - - @@ -29,12 +26,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/documentation-articles.html b/documentation-articles.html index fe5039d..e538abe 100644 --- a/documentation-articles.html +++ b/documentation-articles.html @@ -13,9 +13,6 @@ - - - @@ -29,12 +26,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/documentation-books.html b/documentation-books.html index 6e72704..6a1715d 100644 --- a/documentation-books.html +++ b/documentation-books.html @@ -15,9 +15,6 @@ - - - @@ -31,12 +28,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/documentation-videos.html b/documentation-videos.html index acdbb17..e40963f 100644 --- a/documentation-videos.html +++ b/documentation-videos.html @@ -13,9 +13,6 @@ - - - @@ -29,12 +26,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/documentation.html b/documentation.html index 133cd9c..572e850 100644 --- a/documentation.html +++ b/documentation.html @@ -13,9 +13,6 @@ - - - @@ -29,12 +26,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/downloads.html b/downloads.html index 5a75e69..b4a02ac 100644 --- a/downloads.html +++ b/downloads.html @@ -15,7 +15,6 @@ - @@ -61,12 +60,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/gallery.html b/gallery.html index 4e3da0c..cf610c5 100644 --- a/gallery.html +++ b/gallery.html @@ -17,7 +17,6 @@ - @@ -35,12 +34,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/index.html b/index.html index 4b09d65..9ca8a1e 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,6 @@ - - + + @@ -48,12 +48,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/libraries.html b/libraries.html index 9fdbe98..992a316 100644 --- a/libraries.html +++ b/libraries.html @@ -13,9 +13,6 @@ - - - @@ -29,12 +26,12 @@
-
Theme
- +
Theme
+

OpenSCAD

diff --git a/news.html b/news.html index 3e49b8c..edfd255 100644 --- a/news.html +++ b/news.html @@ -13,9 +13,6 @@ - - - @@ -30,12 +27,12 @@
-
Theme
- +
Theme
+

OpenSCAD