feat(theme): add toggle for seasonal theme

src/components/settings/AppearanceShims.tsx

@@ -207,6 +207,24 @@ export const DisplayLigaturesShim = observer(() => {
     );
 });
 
+/**
+ * Component providing a way to toggle seasonal themes.
+ */
+export const DisplaySeasonalShim = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <p>
+            <Checkbox
+                checked={settings.get("appearance:seasonal") ?? true}
+                onChange={(v) => settings.set("appearance:seasonal", v)}
+                description="Displays effects in the home tab during holiday seasons.">
+                Seasonal theme
+            </Checkbox>
+        </p>
+    );
+});
+
 /**
  * Component providing a way to change emoji pack.
  */

src/mobx/stores/Settings.ts

@@ -28,6 +28,7 @@ export interface ISettings {
 
     "appearance:emoji": EmojiPack;
     "appearance:ligatures": boolean;
+    "appearance:seasonal": boolean;
 
     "appearance:theme:base": "dark" | "light";
     "appearance:theme:overrides": Partial<Overrides>;
@@ -137,6 +138,7 @@ export default class Settings
 
         if (key === "appearance") {
             this.remove("appearance:emoji");
+            this.remove("appearance:seasonal");
         } else {
             this.remove("appearance:ligatures");
             this.remove("appearance:theme:base");
@@ -163,7 +165,10 @@ export default class Settings
 
     @computed toSyncable() {
         const data: Record<"appearance" | "theme", Partial<ISettings>> = {
-            appearance: this.pullKeys(["appearance:emoji"]),
+            appearance: this.pullKeys([
+                "appearance:emoji",
+                "appearance:seasonal",
+            ]),
             theme: this.pullKeys([
                 "appearance:ligatures",
                 "appearance:theme:base",

src/pages/home/Home.tsx

@@ -8,6 +8,7 @@ import {
     Cog,
     RightArrowCircle,
 } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 
@@ -53,23 +54,31 @@ const Overlay = styled.div`
     }
 `;
 
-export default function Home() {
+export default observer(() => {
     const client = useContext(AppContext);
-    const layout = useApplicationState().layout;
+    const state = useApplicationState();
 
     const toggleChannelSidebar = () => {
         if (isTouchscreenDevice) {
             return;
         }
 
-        layout.toggleSectionState(SIDEBAR_CHANNELS, true);
+        state.layout.toggleSectionState(SIDEBAR_CHANNELS, true);
     };
 
+    const toggleSeasonalTheme = () =>
+        state.settings.set(
+            "appearance:seasonal",
+            !state.settings.get("appearance:seasonal"),
+        );
+
+    const seasonalTheme = state.settings.get("appearance:seasonal") ?? true;
+    const isDecember = new Date().getMonth() === 11;
     const snowflakes = useMemo(() => {
         const flakes = [];
 
         // Disable outside of December
-        if (new Date().getMonth() !== 11) return [];
+        if (!isDecember) return [];
 
         for (let i = 0; i < 15; i++) {
             flakes.push("❄️");
@@ -88,6 +97,7 @@ export default function Home() {
     return (
         <div className={styles.home}>
             <Overlay>
+                {seasonalTheme && (
                     <div class="snowfall">
                         {snowflakes.map((emoji, index) => (
                             <div key={index} class="snowflake">
@@ -95,6 +105,7 @@ export default function Home() {
                             </div>
                         ))}
                     </div>
+                )}
                 <div className="content">
                     <Header placement="primary">
                         <IconConainer onClick={toggleChannelSidebar}>
@@ -193,12 +204,15 @@ export default function Home() {
                                 </Link>
                             </Tooltip>
                         </div>
-                        <Link to="/settings/appearance">
-                            <a>Turn off homescreen effects</a>
-                        </Link>
+                        {isDecember && (
+                            <a href="#" onClick={toggleSeasonalTheme}>
+                                Turn {seasonalTheme ? "off" : "on"} homescreen
+                                effects
+                            </a>
+                        )}
                     </div>
                 </div>
             </Overlay>{" "}
         </div>
     );
-}
+});

src/pages/settings/panes/Appearance.tsx

@@ -14,6 +14,7 @@ import {
     DisplayLigaturesShim,
     DisplayEmojiShim,
     ThemeCustomCSSShim,
+    DisplaySeasonalShim,
 } from "../../../components/settings/AppearanceShims";
 import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides";
 import ThemeTools from "../../../components/settings/appearance/ThemeTools";
@@ -24,6 +25,7 @@ export const Appearance = observer(() => {
             <ThemeBaseSelectorShim />
             <ThemeShopShim />
             <ThemeAccentShim />
+            <DisplaySeasonalShim />
 
             <DisplayFontShim />
             <DisplayLigaturesShim />