diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index e465462e..c026fe00 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/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 ( +

+ settings.set("appearance:seasonal", v)} + description="Displays effects in the home tab during holiday seasons."> + Seasonal theme + +

+ ); +}); + /** * Component providing a way to change emoji pack. */ diff --git a/src/mobx/stores/Settings.ts b/src/mobx/stores/Settings.ts index 8deeb5ef..237566b1 100644 --- a/src/mobx/stores/Settings.ts +++ b/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; @@ -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> = { - appearance: this.pullKeys(["appearance:emoji"]), + appearance: this.pullKeys([ + "appearance:emoji", + "appearance:seasonal", + ]), theme: this.pullKeys([ "appearance:ligatures", "appearance:theme:base", diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 8ed8cffc..41ca8784 100644 --- a/src/pages/home/Home.tsx +++ b/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,13 +97,15 @@ export default function Home() { return (
-
- {snowflakes.map((emoji, index) => ( -
- {emoji} -
- ))} -
+ {seasonalTheme && ( +
+ {snowflakes.map((emoji, index) => ( +
+ {emoji} +
+ ))} +
+ )}
@@ -193,12 +204,15 @@ export default function Home() {
- - Turn off homescreen effects - + {isDecember && ( + + Turn {seasonalTheme ? "off" : "on"} homescreen + effects + + )}
{" "} ); -} +}); diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index a658ca31..c68d8493 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/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(() => { +