// The Auto-Festival Engine
A deeper look into the logic of automated, culturally-aware web theming.
What is this Project?
This is a "Set & Forget" temporal automation script designed for websites. In simple terms, it acts as a digital calendar that lives inside your website's code. It automatically detects when a major Indian festival is occurring—whether it's a fixed date like Republic Day or a variable lunar date like Diwali—and switches your website's visual theme to match the occasion.
It solves the problem of static design. Instead of manually updating your site's colors or banners every holiday (and forgetting to remove them later), this engine handles the schedule automatically until the year 2030.
How It Works: The Workflow
The script runs silently in the background every time a visitor loads your page. Here is the step-by-step logic flow:
-
1. Time Calibration (IST Sync)
Servers and users can be anywhere in the world. The script first mathematically converts the visitor's local time into Indian Standard Time (IST) to ensure festivals trigger at the correct moment in India, regardless of where the user is browsing from. -
2. The Data Core
It contains a massive dataset separating festivals into two categories:
• Fixed Dates: Holidays that never change (e.g., Dec 25th).
• Lunar Dates (2026–2030): A pre-calculated map of shifting festivals like Holi and Durga Puja for the next 5 years. -
3. The Detection Window
The script checks: "Is the current moment within 36 hours before or 24 hours after any listed festival?" This "Activation Window" ensures the theme is live during the eve of the festival and the day itself. -
4. Visual Injection
If a match is found, the script injects a CSS class (e.g.,theme-goldortheme-red) into your website's HTML tag. This acts as a switch that your CSS stylesheet can use to change colors, backgrounds, or logos.
Who Is This For?
This tool is perfect for Bloggers, UI Designers, and Small Business owners catering to an Indian audience. It adds a layer of "premium polish" and cultural relevance to your platform without requiring a developer to maintain it constantly. It is lightweight, does not slow down your site, and works on any platform that allows JavaScript (Blogger, WordPress, Custom HTML).
Managing a website or blog is hard enough without having to manually change your theme every time a holiday rolls around. The Auto Festival Engine provided above is a "Set & Forget" solution designed specifically for Indian websites. It automatically detects the date and switches your website's color palette to match the occasion.
Why Use This Engine?
Once installed, you don't need to touch it until 2030. It handles all date calculations automatically.
Many scripts fail because they use the User's device time. This script forces calculations to Indian Standard Time.
The script is less than 2KB. It loads instantly and doesn't require jQuery or heavy libraries.
Instead of 50 different themes, festivals are grouped into logical colors (Gold, Red, Divine, Vibrant).
How It Works (The Logic)
The script runs immediately when your page loads. Here is the step-by-step logic:
- It gets the current UTC time and adds 5.5 hours to convert it to IST.
- It checks the current year (e.g., 2026) and loads the specific festival calendar for that year.
- It calculates the difference between "Now" and the "Festival Date".
- The 60-Hour Window: If the festival is within the next 36 hours or has passed by less than 24 hours, the mode is triggered.
- Finally, it injects a CSS class (e.g.,
theme-gold) into the<body>tag of your HTML.
⚠️ Important: Adding the CSS
The JavaScript tool above only adds the class name. To make your site actually change colors, you must add the styling instructions. Copy and paste the following CSS into your website's style section:
Supported Festivals (2026-2030)
The engine covers both Fixed dates (Gregorian) and Variable dates (Lunar/Hindu Calendar).
- Fixed: New Year, Republic Day, Earth Day, Independence Day, Gandhi Jayanti, Christmas.
- Variable (Pre-calculated): Saraswati Puja, Mahashivratri, Holi, Ram Navami, Naag Panchami, Raksha Bandhan, Janmashtami, Ganesh Chaturthi, Onam, Navratri, Durga Puja, Dussehra, Diwali.
Troubleshooting & FAQs
fixedFestivals section in the JavaScript. You can add a line like: "07-15": { t: "theme-vibrant", n: "My Birthday" },Just make sure to match the format strictly.
</body> tag!
Auto Festival Engine
A "Set & Forget" JavaScript engine containing festival dates until 2030. Automatically switches your site theme.
<script>
//<![CDATA[
(function() {
const now = new Date();
// Adjust to Indian Standard Time (IST)
const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
const istDate = new Date(utc + (3600000 * 5.5));
const currentYear = istDate.getFullYear();
// 1. FIXED DATE FESTIVALS (8 Festivals)
const fixedFestivals = {
"01-01": { t: "theme-red", n: "New Year" },
"01-14": { t: "theme-vibrant", n: "Makar Sankranti" },
"01-26": { t: "theme-india", n: "Republic Day" },
"04-14": { t: "theme-vibrant", n: "Baisakhi" },
"04-22": { t: "theme-nature", n: "Earth Day" },
"08-15": { t: "theme-india", n: "Independence Day" },
"10-02": { t: "theme-india", n: "Gandhi Jayanti" },
"12-25": { t: "theme-red", n: "Christmas" }
};
// 2. LUNAR/VARIABLE FESTIVALS (2026-2030)
const festivalsByYear = {
2026: {
"01-24": { t: "theme-gold", n: "Saraswati Puja" },
"02-15": { t: "theme-divine", n: "Mahashivratri" },
"03-04": { t: "theme-vibrant", n: "Holi" },
"03-27": { t: "theme-gold", n: "Ram Navami" },
"08-02": { t: "theme-gold", n: "Naag Panchami" },
"08-26": { t: "theme-gold", n: "Onam" },
"08-28": { t: "theme-gold", n: "Raksha Bandhan" },
"09-04": { t: "theme-divine", n: "Janmashtami" },
"09-14": { t: "theme-gold", n: "Ganesh Chaturthi" },
"10-12": { t: "theme-gold", n: "Navratri Start" },
"10-18": { t: "theme-red", n: "Durga Puja" },
"10-20": { t: "theme-gold", n: "Dussehra" },
"11-08": { t: "theme-gold", n: "Diwali" }
},
2027: {
"02-11": { t: "theme-gold", n: "Saraswati Puja" },
"03-07": { t: "theme-divine", n: "Mahashivratri" },
"03-22": { t: "theme-vibrant", n: "Holi" },
"04-15": { t: "theme-gold", n: "Ram Navami" },
"08-07": { t: "theme-gold", n: "Naag Panchami" },
"08-17": { t: "theme-gold", n: "Raksha Bandhan" },
"08-25": { t: "theme-divine", n: "Janmashtami" },
"09-04": { t: "theme-gold", n: "Ganesh Chaturthi" },
"09-14": { t: "theme-gold", n: "Onam" },
"10-02": { t: "theme-gold", n: "Navratri Start" },
"10-07": { t: "theme-red", n: "Durga Puja" },
"10-10": { t: "theme-gold", n: "Dussehra" },
"10-29": { t: "theme-gold", n: "Diwali" }
},
2028: {
"01-31": { t: "theme-gold", n: "Saraswati Puja" },
"02-24": { t: "theme-divine", n: "Mahashivratri" },
"03-11": { t: "theme-vibrant", n: "Holi" },
"04-04": { t: "theme-gold", n: "Ram Navami" },
"07-26": { t: "theme-gold", n: "Naag Panchami" },
"08-05": { t: "theme-gold", n: "Raksha Bandhan" },
"08-14": { t: "theme-divine", n: "Janmashtami" },
"08-23": { t: "theme-gold", n: "Ganesh Chaturthi" },
"09-02": { t: "theme-gold", n: "Onam" },
"09-21": { t: "theme-gold", n: "Navratri Start" },
"09-26": { t: "theme-red", n: "Durga Puja" },
"09-29": { t: "theme-gold", n: "Dussehra" },
"10-17": { t: "theme-gold", n: "Diwali" }
},
2029: {
"02-19": { t: "theme-gold", n: "Saraswati Puja" },
"02-13": { t: "theme-divine", n: "Mahashivratri" },
"03-01": { t: "theme-vibrant", n: "Holi" },
"03-24": { t: "theme-gold", n: "Ram Navami" },
"08-15": { t: "theme-gold", n: "Naag Panchami" },
"08-24": { t: "theme-gold", n: "Raksha Bandhan" },
"08-21": { t: "theme-gold", n: "Onam" },
"09-02": { t: "theme-divine", n: "Janmashtami" },
"09-11": { t: "theme-gold", n: "Ganesh Chaturthi" },
"10-09": { t: "theme-gold", n: "Navratri Start" },
"10-15": { t: "theme-red", n: "Durga Puja" },
"10-18": { t: "theme-gold", n: "Dussehra" },
"11-05": { t: "theme-gold", n: "Diwali" }
},
2030: {
"02-08": { t: "theme-gold", n: "Saraswati Puja" },
"03-04": { t: "theme-divine", n: "Mahashivratri" },
"03-19": { t: "theme-vibrant", n: "Holi" },
"04-12": { t: "theme-gold", n: "Ram Navami" },
"08-04": { t: "theme-gold", n: "Naag Panchami" },
"08-13": { t: "theme-gold", n: "Raksha Bandhan" },
"08-22": { t: "theme-divine", n: "Janmashtami" },
"09-01": { t: "theme-gold", n: "Ganesh Chaturthi" },
"09-10": { t: "theme-gold", n: "Onam" },
"09-28": { t: "theme-gold", n: "Navratri Start" },
"10-04": { t: "theme-red", n: "Durga Puja" },
"10-07": { t: "theme-gold", n: "Dussehra" },
"10-26": { t: "theme-gold", n: "Diwali" }
}
};
// LOGIC ENGINE
let targetFestivals = Object.assign({}, fixedFestivals);
if (festivalsByYear[currentYear]) {
Object.assign(targetFestivals, festivalsByYear[currentYear]);
}
let activeTheme = "";
let festivalName = "";
for (const [dateStr, data] of Object.entries(targetFestivals)) {
const parts = dateStr.split('-');
const fMonth = parseInt(parts[0], 10);
const fDay = parseInt(parts[1], 10);
const festDate = new Date(currentYear, fMonth - 1, fDay);
const diffTime = festDate - istDate;
const diffHours = diffTime / (1000 * 60 * 60);
// Window: 36 hours before, 24 hours after
if (diffHours > -36) {
if (diffHours < 24) {
activeTheme = data.t;
festivalName = data.n;
break;
}
}
}
// APPLY THEME
if (activeTheme) {
document.documentElement.classList.add(activeTheme);
document.body.classList.add(activeTheme);
console.log("Festival Mode Active:", festivalName);
}
})();
//]]>
</script>
How to Install
Go to Theme > Edit HTML and paste this code just before the closing </body> tag.
