全站变灰色 CSS 实现

只需将这段代码放在目标网站的 或 标签内即可无需依赖其他代码，它会独立检测日期并自动生效。推荐放在标签内

如果你是Halo用户 可以在Halo后台→设置→代码注入→全局Head标签 内插入下述代码

<!-- 特殊日子改变颜色 -->
    <script>
        // 页面加载时执行日期检测
        window.onload = function() {
            // 定义特殊日期 [月份, 日期]（注意：月份从0开始，1月=0，9月=8）
            const specialDays = [
                [3, 5],   // 4月5日
                [4, 12],   // 5月12日
                [8, 18],   // 9月18日
                [8, 30],   // 9月30日
                [11, 13],   // 12月13日
                // 可添加更多日期，例如 [11, 13] 表示12月13日
            ];
            
            const today = new Date();
            const month = today.getMonth(); // 0-11
            const day = today.getDate();    // 1-31
            
            // 检查是否为特殊日期
            const isSpecial = specialDays.some(([m, d]) => m === month && d === day);
            
            // 如果是特殊日期，添加灰度样式
            if (isSpecial) {
                document.documentElement.style.filter = 'grayscale(100%)';
                // 兼容各浏览器
                document.documentElement.style.webkitFilter = 'grayscale(100%)';
                document.documentElement.style.mozFilter = 'grayscale(100%)';
                document.documentElement.style.msFilter = 'grayscale(100%)';
            }
        };
    </script>

如觉觉得上面的代码又多又长可以试试这个效果都是一样的,我是代码小白感觉还是上面有注释的更适合我以免我忘记了😄

<script>
// 极简版：特殊日期判断与变灰
window.onload=()=>{
  const [m,d]=[new Date().getMonth(),new Date().getDate()];
  if([[3,5],[4,12],[8,18],[8,30],[11,13]].some(([mm,dd])=>mm===m&&dd===d)){
    Object.assign(document.documentElement.style,{
      filter:webkitFilter:mozFilter:'grayscale(100%)'
    });
  }
};
</script>

👇下面是实际效果

注：代码内容由豆包生成‘老卢’已亲测有效可用。
注：封面图片来源于摄图网‘老卢’已获取此图的VRF授权(图片ID:330153954)