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