DEV Community

Cover image for Every Website Has Dark Mode. I Added Christmas Mode.
Cody Pearce
Cody Pearce

Posted on • Originally published at codinhood.com

Every Website Has Dark Mode. I Added Christmas Mode.

#showdev #opensource #webdev #javascript

Try the Live Demo | GitHub | npm | Watch the product story

Every year, the same debate. Light mode or dark mode. As if those are the only options.

Meanwhile, the holiday season comes around and your website sits there, completely un-decorated. No snow. No lights. No festive spirit.

That changes today.

Introducing Christmas Mode

Dark mode is boring. Use Christmas mode.

Add festive Christmas decorations to any website with a single line of code. Falling snow, twinkling lights, a decorated Christmas tree, Santa's sleigh with all nine reindeer, marching nutcrackers, elves having snowball fights, and more.

Because your users deserve more than just a color scheme toggle.

Quick Start

Install from npm:

npm install christmas-mode
Enter fullscreen mode Exit fullscreen mode

Or include via CDN:

<script src="https://unpkg.com/christmas-mode/dist/christmas-mode.umd.js"></script>
Enter fullscreen mode Exit fullscreen mode

Then enable it:

import ChristmasMode from "christmas-mode";

ChristmasMode.init({ autoEnable: true });
Enter fullscreen mode Exit fullscreen mode

Your website now has Christmas spirit.

What You Get

Christmas Mode Preview

  • Falling snow with accumulation effect
  • Twinkling Christmas lights along the top
  • Icicles hanging from the lights
  • Decorated Christmas tree with ornaments and star
  • Snowman with hat and scarf
  • North Pole sign with candy canes
  • Caroler that plays Jingle Bells (click to toggle)
  • Santa's sleigh with 9 reindeer (including Rudolph)
  • Marching nutcracker soldiers
  • Walking elves carrying presents
  • Sledding elves
  • Elves having a snowball fight
  • Stockings hung along the bottom
  • Presents under the tree
  • Holly decorations
  • Festive wreath with bow
  • Toggle switch to enable/disable

Configuration

Customize which decorations appear:

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
});
Enter fullscreen mode Exit fullscreen mode

Toggle Position 

ChristmasMode.init({
  toggle: {
    position: "bottom-right", // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  },
});
Enter fullscreen mode Exit fullscreen mode

React Integration 

import { useEffect } from "react";
import ChristmasMode from "christmas-mode";

function App() {
  useEffect(() => {
    ChristmasMode.init({ autoEnable: true });

    return () => {
      ChristmasMode.destroy();
    };
  }, []);

  return <div>My App</div>;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Contained Mode

Target a specific element instead of the entire page:

ChristmasMode.init({
  target: document.getElementById("my-container"),
  autoEnable: true,
});
Enter fullscreen mode Exit fullscreen mode

Try It

Zero dependencies. Works with React, Vue, Angular, vanilla HTML. TypeScript definitions included.

npm install christmas-mode
Enter fullscreen mode Exit fullscreen mode

Check out the GitHub repository for full documentation.

Watch the product story to see it in action.

Try the live demo to see it on a real page.

Top comments (1)

Collapse
 
derrickrichard profile image
Derrick Richard •

This is incredible. We have light mode and dark mode, but Christmas Mode feels like the upgrade we didn't know we needed. The detail you've included is amazing. Snow actually piles up, elves throw snowballs, nutcrackers march across the screen, and there's even a caroler that plays Jingle Bells. This goes far beyond a simple seasonal theme. The API looks clean, the setup is easy, and the fact that it works with every major framework is a big plus. Zero dependency holiday magic is truly a gift. I'm definitely trying this on several projects. My users will get festive whether they expect it or not. Great work.