diff --git a/external/lang b/external/lang index b955e406..1bf1a75b 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit b955e40611bc317851fe80fafdc3a26b9665d77e +Subproject commit 1bf1a75b4dcc3b8543651c792ee0901b9db57e39 diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index aacfbc38..b35bcb11 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -214,14 +214,44 @@ 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={ + + }> + + + ); +}); + +/** + * Component providing a way to toggle transparency effects. + */ +export const DisplayTransparencyShim = observer(() => { + const settings = useApplicationState().settings; + + return ( + settings.set("appearance:transparency", v)} + description={ + + }> + + + ); +}); + export const ThemeOptionsShim = observer(() => { const settings = useApplicationState().settings; return ( <> -

- -

{/* TOFIX: WIP feature - follows system theme */} {/*; @@ -140,6 +141,7 @@ export default class Settings if (key === "appearance") { this.remove("appearance:emoji"); this.remove("appearance:seasonal"); + this.remove("appearance:transparency"); } else { this.remove("appearance:ligatures"); this.remove("appearance:theme:base"); @@ -169,6 +171,7 @@ export default class Settings appearance: this.pullKeys([ "appearance:emoji", "appearance:seasonal", + "appearance:transparency", ]), theme: this.pullKeys([ "appearance:ligatures", diff --git a/src/mobx/stores/helpers/STheme.ts b/src/mobx/stores/helpers/STheme.ts index 1d85ad36..394a8ee0 100644 --- a/src/mobx/stores/helpers/STheme.ts +++ b/src/mobx/stores/helpers/STheme.ts @@ -95,7 +95,9 @@ export default class STheme { ...this.settings.get("appearance:theme:overrides"), light: this.isLight(), - "min-opacity": 0, + "min-opacity": this.settings.get("appearance:transparency", true) + ? 0 + : 1, }; } diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index 66dd34bf..748daa4d 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -14,7 +14,8 @@ import { DisplayLigaturesShim, DisplayEmojiShim, ThemeCustomCSSShim, - ThemeOptionsShim, + DisplaySeasonalShim, + DisplayTransparencyShim, } from "../../../components/settings/AppearanceShims"; import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides"; import ThemeTools from "../../../components/settings/appearance/ThemeTools"; @@ -27,7 +28,11 @@ export const Appearance = observer(() => {

- +

+ +

+ +