43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
import { getPreference, setPreference } from './local-storage.js';
|
|
|
|
const PROPS = {
|
|
style_preference_name: 'theme',
|
|
style_cookie_duration: 30, // number of days
|
|
style_domain: 'docs.influxdata.com',
|
|
};
|
|
|
|
function getPreferredTheme () {
|
|
return `${getPreference(PROPS.style_preference_name)}-theme`;
|
|
}
|
|
|
|
function switchStyle({ styles_element, css_title }) {
|
|
// Disable all other theme stylesheets
|
|
styles_element.querySelectorAll('link[rel*="stylesheet"][title*="theme"]')
|
|
.forEach(function (link) {
|
|
link.disabled = true;
|
|
});
|
|
|
|
// Enable the stylesheet with the specified title
|
|
const link = styles_element.querySelector(`link[rel*="stylesheet"][title="${css_title}"]`);
|
|
link && (link.disabled = false);
|
|
|
|
setPreference(PROPS.style_preference_name, css_title.replace(/-theme/, ''));
|
|
}
|
|
|
|
function setVisibility(component) {
|
|
component.style.visibility = 'visible';
|
|
}
|
|
|
|
export default function Theme({ component, style }) {
|
|
if (style == undefined) {
|
|
style = getPreferredTheme();
|
|
}
|
|
style && switchStyle({ styles_element: document, css_title: style });
|
|
|
|
// Check for the data attribute and set visibility if needed
|
|
if (component.dataset?.themeCallback === 'setVisibility') {
|
|
setVisibility(component);
|
|
}
|
|
|
|
}
|