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

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorSchemeBodyFirstScript = ColorSchemeBodyFirstScript;
exports.ColorSchemeBodyLastScript = ColorSchemeBodyLastScript;
exports.ColorSchemeHeadScript = ColorSchemeHeadScript;
exports.getBodyScript = getBodyScript;
exports.getContentScript = getContentScript;
exports.getHeadScript = getHeadScript;
var _pluginScopeHash = require("../plugins/postcss-isolated-style-scope/plugin-scope-hash.js");
var _jsxRuntime = require("react/jsx-runtime");
const STORAGE_KEY = 'eufemia-theme';
const GLOBAL_KEY = '__eufemiaColorScheme';
const CLASS_PREFIX = 'eufemia-theme__color-scheme--';
function getHeadScript(scopeHash = (0, _pluginScopeHash.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){}})()`;
}
function getBodyScript() {
  return `(function(){var s=globalThis.${GLOBAL_KEY};if(s){document.body.classList.add('${CLASS_PREFIX}'+s)}})()`;
}
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)})}})()`;
}
function ColorSchemeHeadScript({
  scopeHash
} = {}) {
  return (0, _jsxRuntime.jsx)("script", {
    dangerouslySetInnerHTML: {
      __html: getHeadScript(scopeHash)
    }
  });
}
function ColorSchemeBodyFirstScript() {
  return (0, _jsxRuntime.jsx)("script", {
    dangerouslySetInnerHTML: {
      __html: getBodyScript()
    }
  });
}
function ColorSchemeBodyLastScript() {
  return (0, _jsxRuntime.jsx)("script", {
    dangerouslySetInnerHTML: {
      __html: getContentScript()
    }
  });
}
//# sourceMappingURL=ColorSchemeScript.js.map