Class DarkModeToggle

DoxyGen/Doxygen_Templates/darkmode_toggle.js:30–277

The code below is based on the Doxygen Awesome project with some minor modifications https://github.com/jothepro/doxygen-awesome-css MIT License Copyright (c) 2021 - 2022 jothepro Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated document

*/

class DarkModeToggle extends HTMLElement {
    static icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1.2em" width="1.2em"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><rect width="1" height="3" x="12" fill="currentColor" rx=".5"></rect><rect width="1" height="3" x="12" y="21" fill="currentColor" rx=".5"></rect><rect width="1" height="3" x="22" y="10.5" fill="currentColor" rx=".5" transform="rotate(90 22.5 12)"></rect><rect width="1" height="3" x="1" y="10.5" fill="currentColor" rx=".5" transform="rotate(90 1.5 12)"></rect><rect width="1" height="3" x="19" y="3" fill="currentColor" rx=".5" transform="rotate(-135 19.5 4.5)"></rect><rect width="1" height="3" x="19" y="18" fill="currentColor" rx=".5" transform="rotate(135 19.5 19.5)"></rect><rect width="1" height="3" x="4" y="3" fill="currentColor" rx=".5" transform="scale(1 -1) rotate(45 15.37 0)"></rect><rect width="1" height="3" x="4" y="18" fill="currentColor" rx=".5" transform="scale(1 -1) rotate(-45 -42.57 0)"></rect><circle cx="12" cy="12" r="6.5" stroke="currentColor"></circle></g></svg>'
    static icond = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1.2em" width="1.2em"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><rect width="1" height="3" x="12" fill="currentColor" rx=".5"></rect><rect width="1" height="3" x="12" y="21" fill="currentColor" rx=".5"></rect><rect width="1" height="3" x="22" y="10.5" fill="currentColor" rx=".5" transform="rotate(90 22.5 12)"></rect><rect width="1" height="3" x="1" y="10.5" fill="currentColor" rx=".5" transform="rotate(90 1.5 12)"></rect><rect width="1" height="3" x="19" y="3" fill="currentColor" rx=".5" transform="rotate(-135 19.5 4.5)"></rect><rect width="1" height="3" x="19" y="18" fill="currentColor" rx=".5" transform="rotate(135 19.5 19.5)"></rect><rect width="1" height="3" x="4" y="3" fill="currentColor" rx=".5" transform="scale(1 -1) rotate(45 15.37 0)"></rect><rect width="1" height="3" x="4" y="18" fill="currentColor" rx=".5" transform="scale(1 -1) rotate(-45 -42.57 0)"></rect><circle cx="12" cy="12" r="6.5" stroke="currentColor" fill="currentColor"></circle></g></svg>'
    static title = "Toggle Light/Dark Mode"

    static prefersLightModeInDarkModeKey = "prefers-light-mode-in-dark-mode"
    static prefersDarkModeInLightModeKey = "prefers-dark-mode-in-light-mode"

    static _staticConstructor = function() {
        DarkModeToggle.enableDarkMode(DarkModeToggle.userPreference)
        // Update the color scheme when the browsers preference changes
        // without user interaction on the website.
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
            DarkModeToggle.onSystemPreferenceChanged()
        })
        // Update the color scheme when the tab is made visible again.
        // It is possible that the appearance was changed in another tab 
        // while this tab was in the background.
        document.addEventListener("visibilitychange", visibilityState => {
            if (document.visibilityState === 'visible') {
                DarkModeToggle.onSystemPreferenceChanged()
            }
        });
    }()

    static addButton() {

        var tbuttons = document.getElementsByTagName("dark-mode-toggle");
        var toggleButton;
        var titleArea = document.getElementById("titlearea");
        var searchBox = document.getElementById("MSearchBox");
        var mainMenu  = document.getElementById("main-menu");
        var navRow1   = document.getElementById("navrow1");
        var mainMenuVisible = false;
        if (!tbuttons.length){
          toggleButton = document.createElement('dark-mode-toggle')
          toggleButton.title = DarkModeToggle.title
        } else {toggleButton=tbuttons[0]}


        if (DarkModeToggle.darkModeEnabled){
          toggleButton.innerHTML=DarkModeToggle.icond
        } else { 
          toggleButton.innerHTML=DarkModeToggle.icon
        }

        if (mainMenu) {
          var menuStyle = window.getComputedStyle(mainMenu);
          mainMenuVisible = menuStyle.display!=='none'
        }
        var searchBoxPos1 = document.getElementById("searchBoxPos1");
        if (searchBox) { // (1) search box visible
          searchBox.parentNode.appendChild(toggleButton)
        } else if (navRow1) { // (2) no search box, static menu bar
          var li = document.createElement('li');
          li.style = 'float: right;'
          li.appendChild(toggleButton);
          toggleButton.style = 'width: 24px; height: 25px; padding-top: 11px; float: right;';