NitaiPageNPP 主题插件开发指南
本文介绍如何进行主题插件开发。
CSS变量
NitaiPage 使用 CSS 变量定义主题颜色，插件可以通过修改这些变量来自定义主题：
css
:root {
--main-background-color: #00000040; /* 背景色 */
--main-background-hover-color: #acacac60; /* 背景色 */
--main-background-active-color: #8a8a8080; /* 背景色 */
--main-text-color: #efefef; /* 文本色 */
--main-text-form-hover-color: #efefef; /* 文本色 */
--border-bottom-color-hover: #efefef80; /* 按钮色 */
--border-bottom-color-active: #efefef; /* 按钮色 */
--main-text-shadow: 0px 0px 8px #00000066; /* 阴影色 */
--main-search-shadow: 0 0 20px #0000000d; /* 搜索框阴影色 */
--main-search-hover-shadow: 0 0 20px #00000033; /* 搜索框阴影色 */
--main-input-color: #ffffff30; /* 输入框色 */
--main-input-text-placeholder-color: #ffffff70; /* 输入框色 */
}主题插件开发
主题插件结构
主题插件需要遵循 Npplication 插件格式，并实现主题相关功能：
javascript
// ==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();
})();CoreNpp 动态主题(themeColor.js) API
颜色处理
calculateContrastRatio(color1, color2): 计算两种颜色的对比度getColors(source, quality): 从图片获取主色调turnToMonet(color): 将颜色转换为莫奈风格getMonetColors(source, quality): 从图片获取莫奈风格主色
主题应用
applyThemeColors(colors): 应用主题颜色数组resetThemeColors(): 重置为默认主题setThemeByImage(imageUrl): 根据图片设置主题
进阶
自动切换主题实现
可以根据时间或其他条件自动切换主题：
javascript
// 根据时间切换主题
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(); // 立即执行一次导入/导出 主题
实现主题的导入导出功能：
javascript
// 导出主题
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;
}
}