site

personal website, served at mordaunt.dev/site
Log | Files | Refs

coder.js (3143B)

      1 const body = document.body;
      2 const darkModeToggle = document.getElementById('dark-mode-toggle');
      3 const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
      4 
      5 // Check if user preference is set, if not check value of body class for light or dark else it means that colorscheme = auto
      6 if (localStorage.getItem("colorscheme")) {
      7     setTheme(localStorage.getItem("colorscheme"));
      8 } else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
      9     setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
     10 } else {
     11     setTheme(darkModeMediaQuery.matches ? "dark" : "light");
     12 }
     13 
     14 if (darkModeToggle) {
     15     darkModeToggle.addEventListener('click', () => {
     16         let theme = body.classList.contains("colorscheme-dark") ? "light" : "dark";
     17         setTheme(theme);
     18         rememberTheme(theme);
     19     });
     20 }
     21 
     22 darkModeMediaQuery.addListener((event) => {
     23     setTheme(event.matches ? "dark" : "light");
     24 });
     25 
     26 document.addEventListener("DOMContentLoaded", function () {
     27     let node = document.querySelector('.preload-transitions');
     28     node.classList.remove('preload-transitions');
     29 });
     30 
     31 function setTheme(theme) {
     32     body.classList.remove('colorscheme-auto');
     33     let inverse = theme === 'dark' ? 'light' : 'dark';
     34     body.classList.remove('colorscheme-' + inverse);
     35     body.classList.add('colorscheme-' + theme);
     36     document.documentElement.style['color-scheme'] = theme;
     37 
     38     function waitForElm(selector) {
     39         return new Promise(resolve => {
     40             if (document.querySelector(selector)) {
     41                 return resolve(document.querySelector(selector));
     42             }
     43     
     44             const observer = new MutationObserver(mutations => {
     45                 if (document.querySelector(selector)) {
     46                     resolve(document.querySelector(selector));
     47                     observer.disconnect();
     48                 }
     49             });
     50 
     51             observer.observe(document.body, {
     52                 childList: true,
     53                 subtree: true
     54             });
     55         });
     56     }
     57 
     58     if (theme === 'dark') {
     59         const message = {
     60             type: 'set-theme',
     61             theme: 'github-dark'
     62         };
     63         waitForElm('.utterances-frame').then((iframe) => {
     64             iframe.contentWindow.postMessage(message, 'https://utteranc.es');
     65         })
     66         
     67     }
     68     else {
     69         const message = {
     70             type: 'set-theme',
     71             theme: 'github-light'
     72         };
     73         waitForElm('.utterances-frame').then((iframe) => {
     74             iframe.contentWindow.postMessage(message, 'https://utteranc.es');
     75         })
     76         
     77     }
     78 
     79     function sendMessage(message) {
     80         const iframe = document.querySelector('iframe.giscus-frame');
     81         if (!iframe) return;
     82         iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
     83       }
     84       sendMessage({
     85         setConfig: {
     86           theme: theme,
     87         },
     88       });
     89     
     90     // Create and send event
     91     const event = new Event('themeChanged');
     92     document.dispatchEvent(event);
     93 }
     94 
     95 function rememberTheme(theme) {
     96     localStorage.setItem('colorscheme', theme);
     97 }