88 lines
3.0 KiB
JavaScript
88 lines
3.0 KiB
JavaScript
/* <![CDATA[ */
|
|
|
|
async function getUci() {
|
|
try {
|
|
const response = await fetch("/cgi-bin/luci/api/get");
|
|
if (!response.ok) throw new Error("Network error");
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error("Failed to fetch theme config:", error);
|
|
return {
|
|
success: false,
|
|
bgqs: "0",
|
|
primaryrgbm: "45,102,147",
|
|
primaryrgbmts: "0",
|
|
mode: 'light'
|
|
};
|
|
}
|
|
}
|
|
|
|
function getTimeTheme() {
|
|
const hour = new Date().getHours();
|
|
return (hour < 6 || hour >= 18) ? 'dark' : 'light';
|
|
}
|
|
|
|
function getSystemTheme() {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
async function updateTheme(theme) {
|
|
const root = document.documentElement;
|
|
const newTheme = theme === 'dark' ? 'dark' : 'light';
|
|
const isDark = newTheme === 'dark';
|
|
try {
|
|
const config = await getUci();
|
|
const primaryRgbbody = isDark ? '33,45,60' : '248,248,248';
|
|
const bgqsValue = config.bgqs || "0";
|
|
const rgbmValue = config.primaryrgbm || '45,102,147';
|
|
const rgbmtsValue = config.primaryrgbmts || '0';
|
|
const meta = document.querySelector('meta[name="theme-color"]');
|
|
if (meta) {
|
|
meta.content = isDark ? '#1a1a1a' : '#ffffff';
|
|
}
|
|
const vars = bgqsValue === "0" ? {
|
|
'--menu-fontcolor': isDark ? '#ddd' : '#f5f5f5',
|
|
'--primary-rgbbody': primaryRgbbody,
|
|
'--bgqs-image': '-webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent)',
|
|
'--menu-bgcolor': `rgba(${rgbmValue}, ${rgbmtsValue})`,
|
|
'--menu-item-hover-bgcolor': 'rgba(248,248,248, 0.22)',
|
|
'--menu-item-active-bgcolor': 'rgba(248,248,248, 0.3)',
|
|
} : {
|
|
'--menu-fontcolor': isDark ? '#ddd' : '#4d4d5d',
|
|
'--primary-rgbbody': primaryRgbbody,
|
|
'--menu-bgcolor': `rgba(${primaryRgbbody},${rgbmtsValue})`,
|
|
};
|
|
|
|
Object.entries(vars).forEach(([key, value]) => {
|
|
root.style.setProperty(key, value);
|
|
});
|
|
|
|
if (window.LuciForm) LuciForm.refreshVisibility();
|
|
} catch (error) {
|
|
console.error('Error updating theme variables:', error);
|
|
}
|
|
}
|
|
(async function(){
|
|
const config = await getUci();
|
|
var initMode = config.mode;
|
|
var autoTheme;
|
|
function applyTheme(theme) {
|
|
document.body.setAttribute('data-theme', theme);
|
|
const meta = document.querySelector('meta[name="theme-color"]');
|
|
if (meta) {
|
|
meta.content = theme === 'dark' ? '#1a1a1a' : '#ffffff';
|
|
}
|
|
}
|
|
|
|
(async function() {
|
|
if (initMode === 'auto') {
|
|
autoTheme = getTimeTheme();
|
|
} else {
|
|
autoTheme = initMode;
|
|
}
|
|
applyTheme(autoTheme);
|
|
await updateTheme(autoTheme);
|
|
})();
|
|
})();
|
|
/* ]]> */
|