全站变灰色 CSS 实现

2025-09-18 04:37:00

折腾笔记

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

如果你是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>

👇下面是实际效果

铭记历史

日期	事件
4月5日	清明节	祭祖扫墓、缅怀先人
5月12日	汶川大地震遇难日	缅怀汶川地震遇难者，传承抗震救灾精神
9月18日	九一八事变	铭记历史、勿忘国耻
9月30日	烈士纪念日	以国家名义缅怀英烈
12月13日	南京大屠杀死难者公祭日	铭记南京大屠杀历史，缅怀死难同胞，反对战争暴行