gatsby-plugin-theme-switcher/theme-script.js

React theme switcher with hooks and preventing the initial flash

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _terser = _interopRequireDefault(require("terser"));

/* eslint-disable no-undef */

/* eslint-disable no-var */
function setColorsByTheme(defaultDarkTheme, defaultLightTheme, themeStorageKey) {
  var mql = window.matchMedia("(prefers-color-scheme: dark)");
  var prefersDarkFromMQ = mql.matches;
  var persistedPreference = localStorage.getItem(themeStorageKey);
  var root = document.body;
  var colorMode = "";
  var hasUsedToggle = typeof persistedPreference === "string";

  if (hasUsedToggle) {
    colorMode = JSON.parse(persistedPreference);
  } else {
    colorMode = prefersDarkFromMQ ? defaultDarkTheme : defaultLightTheme;
    localStorage.setItem(themeStorageKey, JSON.stringify(colorMode));
  }

  root.classList.add(colorMode);
}

const ThemeScriptTag = ({
  defaultDarkTheme,
  defaultLightTheme,
  themeStorageKey,
  minify
}) => {
  const themeScript = `(${setColorsByTheme})(
        '${defaultDarkTheme}',
        '${defaultLightTheme}',
        '${themeStorageKey}',
      )`;
  const minifiedThemeSrcript = minify ? _terser.default.minify(themeScript).code || "" : themeScript; // eslint-disable-next-line react/no-danger

  return /*#__PURE__*/_react.default.createElement("script", {
    dangerouslySetInnerHTML: {
      __html: minifiedThemeSrcript
    }
  });
};

ThemeScriptTag.propTypes = {
  defaultDarkTheme: _propTypes.default.string,
  defaultLightTheme: _propTypes.default.string,
  themeStorageKey: _propTypes.default.string,
  minify: _propTypes.default.bool
};
ThemeScriptTag.defaultProps = {
  defaultDarkTheme: "theme-twitter",
  defaultLightTheme: "theme-midnightgreen",
  themeStorageKey: "theme",
  minify: true
};
var _default = ThemeScriptTag;
exports.default = _default;