pragmate-ui/theme-switcher/theme-switcher.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'pragmate-ui/form';
import * as dependency_4 from 'pragmate-ui/icons';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/theme-switcher"},"type":"code"}, import.meta.url).package();;

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['pragmate-ui/form', dependency_3],['pragmate-ui/icons', dependency_4]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/theme-switcher')


const ims = new Map();

/***********************
INTERNAL MODULE: ./index
***********************/

ims.set('./index', {hash: 1174528906, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThemeSwitcher = ThemeSwitcher;
var _react = require("react");
var _form = require("pragmate-ui/form");
var _icons = require("pragmate-ui/icons");
/*bundle*/function ThemeSwitcher() {
  const theme = globalThis?.matchMedia('(prefers-color-scheme: dark)').matches;
  const themeStorage = localStorage.getItem('theme');
  const defaultTheme = theme ? 'dark' : 'light';
  const userTheme = themeStorage ? themeStorage === 'dark' : defaultTheme === 'dark';
  const [isDark, setIsDark] = _react.default.useState(userTheme);
  function handleChange({
    target
  }) {
    const container = document.querySelector('html');
    const theme = isDark ? 'light' : 'dark';
    container.setAttribute('data-beyond-mode', theme);
    localStorage.setItem('theme', theme);
    setIsDark(target.checked);
  }
  _react.default.useEffect(() => {
    if (!themeStorage) return;
    const container = document.querySelector('html');
    container.setAttribute('data-beyond-mode', themeStorage);
  }, []);
  const icon = isDark ? 'moon' : 'sun';
  return _react.default.createElement("div", {
    className: "theme"
  }, _react.default.createElement("div", {
    className: "container-theme"
  }, _react.default.createElement(_icons.Icon, {
    icon: icon
  }), _react.default.createElement(_form.Switch, {
    className: "checkbox",
    checked: isDark,
    onChange: handleChange
  })));
}
}});

__pkg.exports.descriptor = [{"im":"./index","from":"ThemeSwitcher","name":"ThemeSwitcher"}];

export let ThemeSwitcher;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'ThemeSwitcher') && (ThemeSwitcher = require ? require('./index').ThemeSwitcher : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=theme-switcher.browser.mjs.map