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 (
{" "}
);
-}
+});
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(() => {
+