如何在Google Keep（含Category Tabs for Google Keep Chrome扩展）中自定义背景颜色

阿华AIGC实验室

2026-4-23

我完全懂你的痛点——Google Keep自带的背景颜色要么对比度太低看不清文字，要么审美完全不合心意，用背景图凑数根本不是我们想要的解决方案。不管你有没有用Category Tabs扩展，下面这几个方法能帮你实现自定义背景颜色的需求：

方法一：用用户脚本（Tampermonkey/Violentmonkey）自定义全局样式

Google Keep本身没有开放自定义颜色的官方接口，所以我们可以通过自定义CSS+用户脚本的方式强行替换预设颜色。步骤如下：

先给Chrome安装Tampermonkey（或者Violentmonkey）这类用户脚本管理扩展；
新建一个用户脚本，把下面的代码粘贴进去，然后根据自己的喜好修改颜色值：

// ==UserScript==
// @name         Custom Google Keep Colors
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Replace Google Keep's default note colors with custom ones
// @author       You
// @match        https://keep.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 创建自定义样式表
    const style = document.createElement('style');
    style.textContent = `
        // 替换笔记背景颜色（这里以默认黄色为例，替换成柔和的米黄色）
        .IZ65Hb-n0tgWb[style*="#fef0c9"] {
            background-color: #FFEAA7 !important;
        }
        // 替换分类标签的圆形颜色
        .X9KLPc[style*="#fef0c9"] {
            background-color: #FFEAA7 !important;
        }
        // 你可以继续添加更多颜色替换规则，比如粉色、蓝色等，把对应的默认色值换成你想要的
        .IZ65Hb-n0tgWb[style*="#fce8e6"] {
            background-color: #F8D7DA !important;
        }
        .X9KLPc[style*="#fce8e6"] {
            background-color: #F8D7DA !important;
        }
    `;
    document.head.appendChild(style);
})();

保存脚本后刷新Google Keep页面，就能看到自定义的颜色生效了。

这个方法同时适用于原生Keep和安装了Category Tabs扩展的场景——它会直接替换所有对应预设颜色的元素样式，包括扩展里的分类标签圆点。

方法二：针对Category Tabs扩展的进阶调整

如果你想让Category Tabs的颜色圆点支持直接选择自定义颜色（而不是切换复选框），可以在上面的用户脚本基础上添加一段点击事件处理逻辑：

// 在之前的脚本里添加这段代码，修改颜色圆点的点击行为
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('X9KLPc')) { // 匹配扩展的颜色圆点元素
        e.stopPropagation(); // 阻止默认的复选框切换行为
        // 创建一个颜色选择器
        const colorPicker = document.createElement('input');
        colorPicker.type = 'color';
        colorPicker.value = getComputedStyle(e.target).backgroundColor.match(/\d+/g).map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
        colorPicker.addEventListener('input', function() {
            // 把选中的颜色应用到该分类的所有笔记和圆点
            const targetColor = e.target.style.backgroundColor;
            const customColor = this.value;
            document.querySelectorAll(`.IZ65Hb-n0tgWb[style*="${targetColor}"]`).forEach(note => {
                note.style.backgroundColor = customColor;
            });
            document.querySelectorAll(`.X9KLPc[style*="${targetColor}"]`).forEach(dot => {
                dot.style.backgroundColor = customColor;
            });
        });
        colorPicker.click();
    }
});

这段代码会让你点击扩展里的颜色圆点时，弹出系统颜色选择器，选好颜色后自动替换该分类下所有笔记和圆点的背景色。