NPP 主题插件开发指南

本文介绍如何进行主题插件开发。

CSS变量

NitaiPage 使用 CSS 变量定义主题颜色，插件可以通过修改这些变量来自定义主题：

:root {
    /* 文字 */
    --main-text-color: #efefef;                  /* 正文色 */
    --main-text-form-hover-color: #efefef;       /* 表单文字悬停色 */
    --main-text-shadow: 0px 0px 8px #00000066;   /* 文字阴影 */

    /* 背景与容器 */
    --body-background-color: #333333;            /* 页面底色 */
    --main-background-color: #00000040;          /* 卡片 / 面板底色 */
    --main-background-hover-color: #acacac60;    /* 悬停 */
    --main-background-active-color: #8a8a8a80;   /* 按下 */

    /* 按钮 */
    --main-button-color: #ffffff40;
    --main-button-hover-color: #00000030;
    --main-button-active-color: #00000020;

    /* 输入框 */
    --main-input-color: #ffffff30;
    --main-input-text-placeholder-color: #ffffff70;

    /* 描边与阴影 */
    --border-bottom-color-hover: #efefef80;
    --border-bottom-color-active: #efefef;
    --main-search-shadow: 0 0 20px #0000000d;
    --main-search-hover-shadow: 0 0 20px #00000033;

    /* 毛玻璃 */
    --main-box-gauss: 12px;                                  /* 基准模糊半径 */
    --search-blur: blur(calc(var(--main-box-gauss) * 1.533));
    --main-bg-blur: blur(calc(var(--main-box-gauss) * 0.666));
}

resetThemeColors() 会把颜色恢复成默认值。

主题插件开发

主题插件结构

主题插件需要遵循 Npplication 插件格式，并实现主题相关功能：

// ==Npplication==
// @name themeNPP
// @id id
// @version 1.0.0
// ==/Npplication==

// 定义函数
function applyMyTheme() {
    // 设置主题颜色
    document.documentElement.style.setProperty('--main-background-color', '#114514');
    document.documentElement.style.setProperty('--main-text-color', '#191981');
    // 其他颜色设置...
}

// 初始化
(function() {
    applyMyTheme();
})();

进阶

自动切换主题实现

可以根据时间或其他条件自动切换主题：

// 根据时间切换主题
function switchThemeByTime() {
    const hour = new Date().getHours();
    if (hour >= 18 || hour < 6) {
        // 夜间主题
        document.documentElement.style.setProperty('--main-background-color', '#121212');
        document.documentElement.style.setProperty('--main-text-color', '#e0e0e0');
    } else {
        // 日间主题
        document.documentElement.style.setProperty('--main-background-color', '#f5f5f5');
        document.documentElement.style.setProperty('--main-text-color', '#333333');
    }
}

// 定时检查时间并切换主题
setInterval(switchThemeByTime, 60000);
switchThemeByTime(); // 立即执行一次

导入/导出 主题

实现主题的导入导出功能：

// 导出主题
function exportTheme() {
    const theme = {
        backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--main-background-color'),
        textColor: getComputedStyle(document.documentElement).getPropertyValue('--main-text-color'),
        // 其他主题属性...
    };
    return JSON.stringify(theme);
}

// 导入主题
function importTheme(themeJson) {
    try {
        const theme = JSON.parse(themeJson);
        document.documentElement.style.setProperty('--main-background-color', theme.backgroundColor);
        document.documentElement.style.setProperty('--main-text-color', theme.textColor);
        // 应用其他主题属性...
        return true;
    } catch (error) {
        console.error('导入主题失败:', error);
        return false;
    }
}