tsreact-darkreader
Version:
A Custom React Hook for adding a dark / night mode to your site inspired by darkreader
331 lines (290 loc) • 11.3 kB
JavaScript
import React, { useState, useEffect, useMemo } from 'react';
import { setFetchMethod, enable, disable, exportGeneratedCSS } from 'darkreader';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
import ReactSwitch from 'react-switch';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function useDarkreader() {
var defaultDarken = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var theme = arguments.length > 1 ? arguments[1] : undefined;
var fixes = arguments.length > 2 ? arguments[2] : undefined;
var _useState = useState(defaultDarken),
_useState2 = _slicedToArray(_useState, 2),
isDark = _useState2[0],
setIsDark = _useState2[1];
var defaultTheme = {
brightness: 100,
contrast: 90,
sepia: 10
};
var defaultFixes = {
invert: [],
css: '',
ignoreInlineStyle: ['.react-switch-handle'],
ignoreImageAnalysis: []
};
useEffect(function () {
setFetchMethod(window.fetch);
isDark ? enable(_objectSpread2(_objectSpread2({}, defaultTheme), theme), _objectSpread2(_objectSpread2({}, defaultFixes), fixes)) : disable(); // unmount
return function () {
disable();
}; // TODO: followSystemColorScheme();
}, [isDark]);
var action = useMemo(function () {
var toggle = function toggle() {
return setIsDark(function (prevState) {
return !prevState;
});
};
return {
toggle: toggle,
collectCSS: exportGeneratedCSS
};
}, [isDark]);
return [isDark, action];
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "body{\n color: rgba(0, 0, 0, 0.85);\n background-color: #fff;\n}\n\n.react-switch .react-switch-icon{\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.react-switch-docusaurus .react-switch-icon{\n font-size: 14px;\n}\n\n.react-switch > .react-switch-bg{\n box-sizing: border-box;\n}\n\n.react-switch-github__light > .react-switch-bg{\n border: 3px solid #d1d5da;\n}\n\n.react-switch-github__dark > .react-switch-bg{\n border: 3px solid #3c1e70;\n}\n\n.react-switch-fluent__light > .react-switch-bg{\n border: 1px solid #605e5c;\n}\n\n.react-switch-fluent__dark > .react-switch-bg{\n border: 1px solid #0078d4;\n}\n\n";
styleInject(css_248z);
function Toogle(SwitchProps) {
if (SwitchProps.styling === 'docusaurus') {
return /*#__PURE__*/React.createElement(DocusaurusSwitch, Object.assign({}, SwitchProps));
} else if (SwitchProps.styling === 'material') {
return /*#__PURE__*/React.createElement(MaterialSwitch, Object.assign({}, SwitchProps));
} else if (SwitchProps.styling === 'github') {
return /*#__PURE__*/React.createElement(GithubSwitch, Object.assign({}, SwitchProps));
} else if (SwitchProps.styling === 'fluent') {
return /*#__PURE__*/React.createElement(FluentSwitch, Object.assign({}, SwitchProps));
} else if (SwitchProps.styling === 'custom') {
return /*#__PURE__*/React.createElement(CustomSiwtch, Object.assign({}, SwitchProps));
} else {
return /*#__PURE__*/React.createElement(DocusaurusSwitch, Object.assign({}, SwitchProps));
}
}
function DocusaurusSwitch(reactSwitchProps) {
return /*#__PURE__*/React.createElement(ReactSwitch, Object.assign({
className: "react-switch react-switch-docusaurus",
handleDiameter: 20,
onColor: "#4d4d4d",
offColor: "#4d4d4d",
onHandleColor: "#ffffff",
offHandleColor: "#ffffff",
boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.6)",
activeBoxShadow: "0 0 2px 3px #2c89a0",
width: 50,
height: 24,
uncheckedIcon: /*#__PURE__*/React.createElement("span", {
className: "react-switch-icon"
}, "\uD83C\uDF1E"),
checkedIcon: /*#__PURE__*/React.createElement("span", {
className: "react-switch-icon"
}, "\uD83C\uDF1C")
}, reactSwitchProps));
}
function MaterialSwitch(reactSwitchProps) {
return /*#__PURE__*/React.createElement(ReactSwitch, Object.assign({
className: "react-switch react-switch-material",
onColor: "#ee80a7",
onHandleColor: "#dc004e",
handleDiameter: 18,
uncheckedIcon: false,
checkedIcon: false,
boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.6)",
activeBoxShadow: "0px 0px 1px 10px rgba(0, 0, 0, 0.2)",
height: 12,
width: 34
}, reactSwitchProps));
}
function GithubSwitch(reactSwitchProps) {
var svg_month = /*#__PURE__*/React.createElement("span", {
className: "react-switch-icon"
}, /*#__PURE__*/React.createElement("svg", {
fill: "#ffdf5d",
"aria-hidden": "true",
width: "14",
height: "13",
viewBox: "0 0 14 13",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M4.52208 7.71754C7.5782 7.71754 10.0557 5.24006 10.0557 2.18394C10.0557 1.93498 10.0392 1.68986 10.0074 1.44961C9.95801 1.07727 10.3495 0.771159 10.6474 0.99992C12.1153 2.12716 13.0615 3.89999 13.0615 5.89383C13.0615 9.29958 10.3006 12.0605 6.89485 12.0605C3.95334 12.0605 1.49286 10.001 0.876728 7.24527C0.794841 6.87902 1.23668 6.65289 1.55321 6.85451C2.41106 7.40095 3.4296 7.71754 4.52208 7.71754Z"
})));
return /*#__PURE__*/React.createElement(ReactSwitch, Object.assign({
className: "react-switch react-switch-github react-switch-github__".concat((reactSwitchProps === null || reactSwitchProps === void 0 ? void 0 : reactSwitchProps.checked) ? 'dark' : 'light'),
onColor: "#271052",
offColor: "#ffffff",
onHandleColor: "#6e40c9",
offHandleColor: "#2f363d",
handleDiameter: 28,
uncheckedIcon: false,
checkedIcon: false,
uncheckedHandleIcon: svg_month,
checkedHandleIcon: svg_month,
boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.6)",
activeBoxShadow: "0px 0px 1px 4px rgba(0, 0, 0, 0.2)",
height: 24,
width: 42
}, reactSwitchProps));
}
function FluentSwitch(reactSwitchProps) {
return /*#__PURE__*/React.createElement(ReactSwitch, Object.assign({
className: "react-switch react-switch-fluent react-switch-fluent__".concat((reactSwitchProps === null || reactSwitchProps === void 0 ? void 0 : reactSwitchProps.checked) ? 'dark' : 'light'),
handleDiameter: 12,
onColor: "#0078d4",
offColor: "#ffffff",
onHandleColor: "#ffffff",
offHandleColor: "#605e5c",
activeBoxShadow: "0 0 2px 3px #2c89a0",
width: 40,
height: 20,
uncheckedIcon: false,
checkedIcon: false
}, reactSwitchProps));
}
function CustomSiwtch(reactSwitchProps) {
return /*#__PURE__*/React.createElement(ReactSwitch, Object.assign({
className: "react-switch react-switch-custom",
handleDiameter: 20,
onColor: "#ffffff",
offColor: "#3F5985",
onHandleColor: "#ffffff",
offHandleColor: "#ffffff",
boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.6)",
activeBoxShadow: "0 0 2px 3px #2c89a0",
width: 50,
height: 24,
uncheckedIcon: /*#__PURE__*/React.createElement(DarkModeIcon, {
color: 'info'
}),
checkedIcon: /*#__PURE__*/React.createElement(LightModeOutlinedIcon, {
color: 'info'
})
}, reactSwitchProps));
}
function Darkreader(_ref) {
var _ref$defaultDarken = _ref.defaultDarken,
defaultDarken = _ref$defaultDarken === void 0 ? false : _ref$defaultDarken,
theme = _ref.theme,
fixes = _ref.fixes,
_onChange = _ref.onChange;
var _useDarkreader = useDarkreader(defaultDarken, theme, fixes),
_useDarkreader2 = _slicedToArray(_useDarkreader, 2),
isDark = _useDarkreader2[0],
toggle = _useDarkreader2[1].toggle;
return /*#__PURE__*/React.createElement(Toogle, {
checked: isDark,
onChange: function onChange(checked) {
toggle();
_onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
}
});
}
export default Darkreader;
export { Toogle as Toggle, useDarkreader };