react-darkreader-2
Version:
A React Hook for adding a dark / night mode to your site inspired by darkreader
286 lines (274 loc) • 10.6 kB
JavaScript
import React, { useState, useEffect, useMemo } from 'react';
import { setFetchMethod, enable, disable, exportGeneratedCSS } from 'darkreader';
import ReactSwitch from 'react-switch';
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
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 ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
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: [],
disableStyleSheetsProxy: false
};
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{\r\n color: rgba(0, 0, 0, 0.85);\r\n background-color: #fff;\r\n}\r\n\r\n.react-switch .react-switch-icon{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n\r\n.react-switch-docusaurus .react-switch-icon{\r\n font-size: 14px;\r\n}\r\n\r\n.react-switch > .react-switch-bg{\r\n box-sizing: border-box;\r\n}\r\n\r\n.react-switch-github__light > .react-switch-bg{\r\n border: 3px solid #d1d5da;\r\n}\r\n\r\n.react-switch-github__dark > .react-switch-bg{\r\n border: 3px solid #3c1e70;\r\n}\r\n\r\n.react-switch-fluent__light > .react-switch-bg{\r\n border: 1px solid #605e5c;\r\n}\r\n\r\n.react-switch-fluent__dark > .react-switch-bg{\r\n border: 1px solid #0078d4;\r\n}\r\n\r\n";
styleInject(css_248z);
function Switch(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 {
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 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(Switch, {
checked: isDark,
onChange: function onChange(checked) {
toggle();
_onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
}
});
}
export default Darkreader;
export { Switch, useDarkreader };