JS+CSS实现指定日期全站变灰

JS+CSS实现指定日期全站变灰

网站变灰是一种视觉化的情感表达与场景适配功能，核心用途是通过统一的灰度视觉语言传递特定态度，适配不同场景的情感或合规需求。

CSS变灰代码

这段代码是全站灰度化的标准实现，兼顾兼容性与优先级，是网站在庄重场景下的常用视觉适配方案，简单高效且覆盖主流浏览器。

CSS+JS指定日期变灰

// 定义需要全站变灰的日期
const grayDates = [
    { month: 12, day: 13 }, // 国家公祭日
    { month: 9, day: 3 },   // 中国人民抗日战争胜利纪念日
    { month: 9, day: 30 },  // 烈士纪念日
];

// 获取当前日期的月份和日期
const now = new Date();
const currentMonth = now.getMonth() + 1;
const currentDay = now.getDate();

// 判断当前日期是否在指定列表中
const isGrayDay = grayDates.some(date => 
    date.month === currentMonth && date.day === currentDay
);

// 若匹配则添加灰度样式
if (isGrayDay) {
    const style = document.createElement('style');
    style.innerHTML = `
        html {
            filter: grayscale(100%) !important;
            -webkit-filter: grayscale(100%) !important;
            -moz-filter: grayscale(100%) !important;
            -ms-filter: grayscale(100%) !important;
            -o-filter: grayscale(100%) !important;
        }
    `;
    document.head.appendChild(style);
}