Line data    Source code

       1              : /*
       2              :  * Copyright (C) 2022 Red Hat, Inc.
       3              :  * SPDX-License-Identifier: LGPL-2.1-or-later
       4              :  */
       5              : 
       6          725 : function debug(...args: unknown[]) {
       7          131 :     if (window.debugging == "all" || window.debugging?.includes("style")) {
       8          131 :         console.debug([`cockpit-dark-theme: ${document.documentElement.id}:`, ...args].join(" "));
       9          131 :     }
      10          725 : }
      11              : 
      12          725 : function changeDarkThemeClass(documentElement: Element, dark_mode: boolean) {
      13          133 :     debug(`Setting cockpit theme to ${dark_mode ? "dark" : "light"}`);
      14              : 
      15          133 :     if (dark_mode) {
      16          133 :         documentElement.classList.add('pf-v6-theme-dark');
      17          133 :     } else {
      18          725 :         documentElement.classList.remove('pf-v6-theme-dark');
      19          725 :     }
      20          725 : }
      21              : 
      22          725 : function _setDarkMode(_style?: string) {
      23          725 :     const style = _style || localStorage.getItem('shell:style') || 'auto';
      24          725 :     let dark_mode;
      25              :     // If a user set's an explicit theme, ignore system changes.
      26          133 :     if ((window.matchMedia?.('(prefers-color-scheme: dark)').matches && style === "auto") || style === "dark") {
      27          133 :         dark_mode = true;
      28          133 :     } else {
      29          725 :         dark_mode = false;
      30          725 :     }
      31          725 :     changeDarkThemeClass(document.documentElement, dark_mode);
      32          725 : }
      33              : 
      34          239 : window.addEventListener("storage", event => {
      35           23 :     if (event.key === "shell:style") {
      36           23 :         debug(`Storage element 'shell:style' changed from  ${event.oldValue} to ${event.newValue}`);
      37              : 
      38           23 :         _setDarkMode();
      39           23 :     }
      40          239 : });
      41              : 
      42              : // When changing the theme from the shell switcher the localstorage change will not fire for the same page (aka shell)
      43              : // so we need to listen for the event on the window object.
      44            1 : window.addEventListener("cockpit-style", event => {
      45            1 :     if (event instanceof CustomEvent) {
      46            1 :         const style = event.detail.style;
      47            1 :         debug(`Event received from shell with 'cockpit-style'  ${style}`);
      48              : 
      49            1 :         _setDarkMode(style);
      50            1 :     }
      51            1 : });
      52              : 
      53            2 : window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
      54            2 :     debug(`Operating system theme preference changed to ${window.matchMedia?.('(prefers-color-scheme: dark)').matches ? "dark" : "light"}`);
      55            2 :     _setDarkMode();
      56            2 : });
      57              : 
      58          725 : _setDarkMode();