modernize website

website/js/docs/loader.js

@@ -4,67 +4,32 @@ theme = sessionStorage.getItem( 'theme' ) || getPreferredTheme();
 $( document ).ready( function () {
     $( '#nav' ).load( '/docs/nav.html' );
     $( '#top' ).load( '/docs/top.html' );
-    setTimeout( setTheme, 300 );
 } );
 
-
-
 // set theme on page load
+theme = localStorage.getItem( 'theme' ) ?? '';
+if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme === 'dark' ) {
+    document.documentElement.classList.add( 'dark' );
+    setTimeout( () => {
+        document.getElementById( 'darkToggle' ).innerHTML = '☼';
+    }, 300 );
+    localStorage.setItem( 'theme', 'dark' );
+} else {
+    document.documentElement.classList.add( 'light' );
+    localStorage.setItem( 'theme', 'light' );
+}
+
 function setTheme () {
-    if ( theme == 'dark' ) {
-        document.getElementById( 'darkToggle' ).innerHTML = '☼';
-        $( '.content' ).css( 'background-color', 'rgb(46, 46, 46)' );
-        $( '.top-container' ).css( 'background-color', 'rgb(100, 100, 100)' );
-        $( '.content' ).css( 'color', 'white' );
-        $( '.nav-subitem' ).css( 'background-color', 'rgb(18, 18, 99)' );
-        $( '.navitem' ).css( 'background-color', 'rgb(12, 12, 60)' );
-        $( '.nav-container' ).css( 'background-color', 'rgb(0, 0, 100)' );
-        $( '#doc-container a' ).css( 'color', 'white' );
-        $( '#darkToggle' ).css( 'color', 'white' );
-    }
-}
-
-// retreive preferred theme from browser preferences if not in session storage
-function getPreferredTheme () {
-    if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
-        setPreferredTheme( 'dark' );
-        return 'dark';
-    } else {
-        setPreferredTheme( 'light' );
-        return 'light';
-    };
-}
-
-// set theme in session storage
-function setPreferredTheme ( userTheme ) {
-    sessionStorage.setItem( 'theme', userTheme );
-    theme = userTheme;
-}
-
-// change theme
-function toggleDarkMode () {
-    if ( theme == 'light' ) {
-        $( '.content' ).animate( { 'background-color': 'rgb(46, 46, 46)' } );
-        $( '.content' ).animate( { 'color': 'white' } );
-        $( '#doc-container a' ).animate( { 'color': 'white' } );
-        $( '.top-container' ).animate( { 'background-color': 'rgb(100, 100, 100)' } );
-        $( '.nav-subitem' ).animate( { 'background-color': 'rgb(18, 18, 99)' } );
-        $( '.navitem' ).animate( { 'background-color': 'rgb(12, 12, 60)' } );
-        $( '.nav-container' ).animate( { 'background-color': 'rgb(0, 0, 100)' } );
-        $( '#darkToggle' ).animate( { 'color': 'white' } );
-        document.getElementById( 'darkToggle' ).innerHTML = '☼';
-        setPreferredTheme( 'dark' );
-    } else {
-        $( '.content' ).animate( { 'background-color': 'white' } );
-        $( '.content' ).animate( { 'color': 'black' } );
-        $( '#doc-container a' ).animate( { 'color': 'blue' } );
-        $( '.nav-subitem' ).animate( { 'background-color': 'rgb(27, 27, 165)' } );
-        $( '.navitem' ).animate( { 'background-color': 'rgb(22, 22, 117)' } );
-        $( '.nav-container' ).animate( { 'background-color': 'blue' } );
-        $( '.top-container' ).animate( { 'background-color': 'rgb(223, 223, 223)' } );
-        $( '#darkToggle' ).animate( { 'color': 'black' } );
+    theme = localStorage.getItem( 'theme' ) ?? '';
+    if ( theme === 'dark' ) {
         document.getElementById( 'darkToggle' ).innerHTML = '☽';
-        setPreferredTheme( 'light' );
+        document.documentElement.classList.remove( 'dark' );
+        document.documentElement.classList.add( 'light' );
+        localStorage.setItem( 'theme', 'light' );
+    } else if ( theme === 'light' ) {
+        document.getElementById( 'darkToggle' ).innerHTML = '☼';
+        document.documentElement.classList.remove( 'light' );
+        document.documentElement.classList.add( 'dark' );
+        localStorage.setItem( 'theme', 'dark' );
     }
-    setTimeout( highlightPath, 1000 ); 
 }