关注「索引目录」公众号，获取更多干货。
每年都是同样的争论：浅色模式还是深色模式？好像只有这两种选择似的。
与此同时，节日季来临，而你的网站却空空如也，没有任何装饰。没有雪景，没有灯光，没有节日气氛。
今天情况发生了改变。
圣诞模式上线
深色模式太无聊了，用圣诞模式吧。
只需一行代码，即可为任何网站添加喜庆的圣诞装饰。飘落的雪花、闪烁的彩灯、装饰精美的圣诞树、圣诞老人的雪橇和九只驯鹿、行进的胡桃夹子、打雪仗的小精灵等等。
因为你的用户值得拥有的不仅仅是配色方案切换功能。
快速入门
从 npm 安装：
npm install christmas-mode或者通过 CDN 包含：
<script src="https://unpkg.com/christmas-mode/dist/christmas-mode.umd.js"></script>然后启用它：
import ChristmasMode from "christmas-mode";
ChristmasMode.init({ autoEnable: true });您的网站现在充满了圣诞气氛。
您将获得
-
积雪的影响 -
顶部闪烁的圣诞彩灯 -
灯上挂着冰柱 -
装饰好的圣诞树上挂满了饰品和星星。 -
戴帽子和围巾的雪人 -
北极标志和拐杖糖 -
演唱《铃儿响叮当》的颂歌者（点击切换） -
圣诞老人的雪橇，上面有9只驯鹿（包括鲁道夫） -
行进中的胡桃夹子士兵 -
带着礼物的行走精灵 -
滑雪精灵 -
精灵们在打雪仗 -
长筒袜挂在底部。 -
树下的礼物 -
冬青装饰品 -
带蝴蝶结的节日花环 -
拨动开关以启用/禁用
配置
自定义显示的装饰物：
ChristmasMode.init({
toggle: true, // Show toggle switch
musicButton: true, // Show music button/caroler
autoEnable: false, // Auto-enable on init
snow: true, // Enable snow effect
lights: true, // Enable Christmas lights
tree: true, // Enable Christmas tree
snowman: true, // Enable snowman
northPole: true, // Enable North Pole sign
});切换位置
ChristmasMode.init({
toggle: {
position: "bottom-right", // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
},
});React 集成
import { useEffect } from "react";
import ChristmasMode from "christmas-mode";
function App() {
useEffect(() => {
ChristmasMode.init({ autoEnable: true });
return () => {
ChristmasMode.destroy();
};
}, []);
return <div>My App</div>;
}API
ChristmasMode.init(options); // Initialize with options
ChristmasMode.enable(); // Show decorations
ChristmasMode.disable(); // Hide decorations
ChristmasMode.toggle(); // Toggle on/off
ChristmasMode.isEnabled(); // Check if active
ChristmasMode.playMusic(); // Start Jingle Bells
ChristmasMode.stopMusic(); // Stop music
ChristmasMode.toggleMusic(); // Toggle music
ChristmasMode.destroy(); // Clean up everything封闭模式
选择特定元素而不是整个页面：
ChristmasMode.init({
target: document.getElementById("my-container"),
autoEnable: true,
});试试看
零依赖。兼容 React、Vue、Angular 和原生 HTML。包含 TypeScript 定义。
npm install christmas-mode关注「索引目录」公众号，获取更多干货。