@twstyled/theme
Version:
Runtime theming support for twstyled -- the full-featured Tailwind CSS + CSS in JS Compiler
178 lines (177 loc) • 6.38 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.objectToVars = exports.toCustomProperties = exports.InitializeColorMode = exports.applyColorMode = exports.useColorModeState = void 0;
const React = __importStar(require("react"));
const react_1 = require("react");
const util_1 = require("./util");
const STORAGE_KEY = 'twstyled-color-mode';
const storage = {
get: (init) => {
try {
return window.localStorage.getItem(STORAGE_KEY) || init;
}
catch (e) {
console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
return init;
}
},
set: (value) => {
try {
window.localStorage.setItem(STORAGE_KEY, value);
}
catch (e) {
console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
}
}
};
const getPreferredColorScheme = () => {
if (typeof window !== 'undefined' && window.matchMedia) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
return 'light';
}
}
return null;
};
function usePrevious(value) {
const ref = react_1.useRef();
react_1.useEffect(() => {
ref.current = value;
});
return ref.current;
}
const useColorModeState = (theme = {}) => {
const [mode, setMode] = react_1.useState(() => {
const preferredMode = theme.useColorSchemeMediaQuery !== false && getPreferredColorScheme();
return preferredMode || theme.initialColorModeName || 'light';
});
const prevMode = usePrevious(mode);
// read color mode from local storage
react_1.useEffect(() => {
const stored = (theme.useLocalStorage !== false && storage.get()) || 'light';
document.documentElement.classList.remove('theme-tw-' + stored);
document.body.classList.remove('theme-tw-' + stored);
if (stored && stored !== mode) {
setMode(stored);
}
}, []);
react_1.useEffect(() => {
if (prevMode) {
document.body.classList.remove('theme-tw-' + prevMode);
}
document.body.classList.add('theme-tw-' + mode);
if (mode && theme.useLocalStorage !== false) {
storage.set(mode);
}
}, [mode]);
if (process.env.NODE_ENV !== 'production') {
if (theme.colors &&
theme.colors.modes &&
theme.initialColorModeName &&
Object.keys(theme.colors.modes).indexOf(theme.initialColorModeName) > -1) {
console.warn('The `initialColorModeName` value should be a unique name' +
' and cannot reference a key in `theme.colors.modes`.');
}
}
return [mode, setMode];
};
exports.useColorModeState = useColorModeState;
const applyColorMode = (theme, mode) => {
if (!mode)
return theme;
const modes = util_1.get(theme, 'colors.modes', {});
return util_1.merge.all({}, theme, {
colors: util_1.get(modes, mode, {})
});
};
exports.applyColorMode = applyColorMode;
const noflash = `(function() { try {
var mode = localStorage.getItem(\"theme-tw-color-mode\");
if (!mode) return
document.documentElement.classList.add('theme-tw-' + mode);
document.body.classList.add('theme-tw-' + mode);
} catch (e) {} })();`;
const InitializeColorMode = () => (React.createElement("script", { key: "theme-tw-no-flash", dangerouslySetInnerHTML: {
__html: noflash
} }));
exports.InitializeColorMode = InitializeColorMode;
const toVarName = (key) => `--theme-tw-${key}`;
const toVarValue = (key, value) => `var(${toVarName(key)}, ${value})`;
const join = (...args) => args.filter(Boolean).join('-');
const numberScales = {
fontWeights: true,
lineHeights: true
};
const reservedKeys = {
useCustomProperties: true,
initialColorModeName: true,
printColorModeName: true,
initialColorMode: true,
useLocalStorage: true
};
const toPixel = (key, value) => {
if (typeof value !== 'number')
return value;
if (numberScales[key])
return value;
return value + 'px';
};
// convert theme values to custom properties
const toCustomProperties = (obj, parent, themeKey) => {
const next = Array.isArray(obj) ? [] : {};
// eslint-disable-next-line guard-for-in
for (const key in obj) {
const value = obj[key];
const name = join(parent, key);
if (value && typeof value === 'object') {
next[key] = exports.toCustomProperties(value, name, key);
continue;
}
if (reservedKeys[key]) {
next[key] = value;
continue;
}
const val = toPixel(themeKey || key, value);
next[key] = toVarValue(name, val);
}
return next;
};
exports.toCustomProperties = toCustomProperties;
const objectToVars = (parent, obj) => {
let vars = {};
for (const key in obj) {
if (key === 'modes')
continue;
const name = join(parent, key);
const value = obj[key];
if (value && typeof value === 'object') {
vars = Object.assign(Object.assign({}, vars), exports.objectToVars(name, value));
}
else {
vars[toVarName(name)] = value;
}
}
return vars;
};
exports.objectToVars = objectToVars;