@dnb/eufemia/es/shared/ColorSchemeScript.js

DNB Eufemia Design System UI Library

import { getStyleScopeHash } from '../plugins/postcss-isolated-style-scope/plugin-scope-hash.js';
import { jsx as _jsx } from "react/jsx-runtime";
const STORAGE_KEY = 'eufemia-theme';
const GLOBAL_KEY = '__eufemiaColorScheme';
const CLASS_PREFIX = 'eufemia-theme__color-scheme--';
export function getHeadScript(scopeHash = getStyleScopeHash()) {
  return `(function(){try{var t=JSON.parse(localStorage.getItem('${STORAGE_KEY}')||'{}');var s=t.colorScheme;if(s==='auto'||!s){s=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'}document.documentElement.classList.add('${scopeHash}');if(s){globalThis.${GLOBAL_KEY}=s}}catch(e){}})()`;
}
export function getBodyScript() {
  return `(function(){var s=globalThis.${GLOBAL_KEY};if(s){document.body.classList.add('${CLASS_PREFIX}'+s)}})()`;
}
export function getContentScript() {
  return `(function(){var s=globalThis.${GLOBAL_KEY};if(s&&s!=='light'){var o=s==='dark'?'light':'dark';document.querySelectorAll('.${CLASS_PREFIX}'+o).forEach(function(el){el.classList.remove('${CLASS_PREFIX}'+o);el.classList.add('${CLASS_PREFIX}'+s)})}})()`;
}
export function ColorSchemeHeadScript({
  scopeHash
} = {}) {
  return _jsx("script", {
    dangerouslySetInnerHTML: {
      __html: getHeadScript(scopeHash)
    }
  });
}
export function ColorSchemeBodyFirstScript() {
  return _jsx("script", {
    dangerouslySetInnerHTML: {
      __html: getBodyScript()
    }
  });
}
export function ColorSchemeBodyLastScript() {
  return _jsx("script", {
    dangerouslySetInnerHTML: {
      __html: getContentScript()
    }
  });
}
//# sourceMappingURL=ColorSchemeScript.js.map