136 lines
3.7 KiB
JavaScript
136 lines
3.7 KiB
JavaScript
// theme-configs.js
|
|
|
|
const automateThemeSelection = false; // Set to false to disable automatic theme selection based on the current month
|
|
const defaultTheme = 'snowflakes'; // The theme to use if automatic theme selection is disabled
|
|
|
|
// theme configurations
|
|
const themeConfigs = {
|
|
snowflakes: {
|
|
css: 'seasonals/snowflakes.css',
|
|
js: 'seasonals/snowflakes.js',
|
|
containerClass: 'snowflakes'
|
|
},
|
|
snowfall: {
|
|
js: 'seasonals/snowfall.js',
|
|
containerClass: 'snowfall'
|
|
},
|
|
snowstorm: {
|
|
css: 'seasonals/snowstorm.css',
|
|
js: 'seasonals/snowstorm.js',
|
|
containerClass: 'snowstorm'
|
|
},
|
|
fireworks: {
|
|
css: 'seasonals/fireworks.css',
|
|
js: 'seasonals/fireworks.js',
|
|
containerClass: 'fireworks'
|
|
},
|
|
halloween: {
|
|
css: 'seasonals/halloween.css',
|
|
js: 'seasonals/halloween.js',
|
|
containerClass: 'halloween'
|
|
},
|
|
summer: {
|
|
css: 'seasonals/summer.css',
|
|
js: 'seasonals/summer.js',
|
|
containerClass: 'summer'
|
|
},
|
|
autumn: {
|
|
css: 'seasonals/autumn.css',
|
|
js: 'seasonals/autumn.js',
|
|
containerClass: 'autumn'
|
|
},
|
|
spring: {
|
|
css: 'seasonals/spring.css',
|
|
js: 'seasonals/spring.js',
|
|
containerClass: 'spring'
|
|
},
|
|
};
|
|
|
|
// determine current theme based on the current month
|
|
function determineCurrentTheme() {
|
|
const date = new Date();
|
|
const month = date.getMonth();
|
|
const day = date.getDate();
|
|
|
|
if (month === 11 || month === 0 || month === 1) return 'snowfall'; // december, january, february
|
|
if (month === 9 && day === 31) return 'halloween'; // halloween
|
|
if (month === 0 && day === 1) return 'fireworks'; //new year
|
|
if (month >= 2 && month <= 4) return 'spring';
|
|
if (month >= 5 && month <= 7) return 'summer';
|
|
if (month >= 8 && month <= 10) return 'autumn';
|
|
|
|
return defaultTheme; // Fallback (nothing)
|
|
}
|
|
|
|
// load theme csss
|
|
function loadThemeCSS(cssPath) {
|
|
if (!cssPath) return;
|
|
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = cssPath;
|
|
|
|
link.onerror = () => {
|
|
console.error(`Failed to load CSS: ${cssPath}`);
|
|
};
|
|
|
|
document.head.appendChild(link);
|
|
console.log(`CSS file "${cssPath}" loaded.`);
|
|
}
|
|
|
|
// load theme js
|
|
function loadThemeJS(jsPath) {
|
|
if (!jsPath) return;
|
|
|
|
const script = document.createElement('script');
|
|
script.src = jsPath;
|
|
|
|
script.onerror = () => {
|
|
console.error(`Failed to load JS: ${jsPath}`);
|
|
};
|
|
|
|
document.body.appendChild(script);
|
|
console.log(`JS file "${jsPath}" loaded.`);
|
|
}
|
|
|
|
// update theme container class name
|
|
function updateThemeContainer(containerClass) {
|
|
const container = document.querySelector('.seasonals-container');
|
|
if (!container) {
|
|
console.error('No element with the class "seasonals-container" found.');
|
|
return;
|
|
}
|
|
container.className = containerClass;
|
|
console.log(`Seasonals-Container class updated to "${containerClass}".`);
|
|
}
|
|
|
|
// initialize theme
|
|
function initializeTheme() {
|
|
let currentTheme;
|
|
if (!automateThemeSelection) {
|
|
currentTheme = defaultTheme;
|
|
} else {
|
|
currentTheme = determineCurrentTheme();
|
|
}
|
|
|
|
console.log(`Selected theme: ${currentTheme}`);
|
|
|
|
const theme = themeConfigs[currentTheme];
|
|
|
|
if (!theme) {
|
|
console.error(`Theme "${currentTheme}" not found.`);
|
|
return;
|
|
}
|
|
updateThemeContainer(theme.containerClass);
|
|
|
|
if (theme.css) loadThemeCSS(theme.css);
|
|
if (theme.js) loadThemeJS(theme.js);
|
|
|
|
console.log(`Theme "${currentTheme}" loaded.`);
|
|
}
|
|
|
|
|
|
//document.addEventListener('DOMContentLoaded', initializeTheme);
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initializeTheme();
|
|
}); |