Zen mode: dynamic theming.

src/apps/settings-modal/settings-ui/SettingUIComplexity.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useShallow } from 'zustand/react/shallow';
 
+import type { UIComplexityMode } from '~/common/app.theme';
 import { FormSelectControl, FormSelectOption } from '~/common/components/forms/FormSelectControl';
-import { UIComplexityMode, useUIPreferencesStore } from '~/common/state/store-ui';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 
 const AppearanceOptions: FormSelectOption<UIComplexityMode>[] = [

src/common/app.theme.ts

@@ -4,6 +4,11 @@ import { Inter, JetBrains_Mono } from 'next/font/google';
 import { extendTheme } from '@mui/joy';
 
 
+// Definitions
+export type UIComplexityMode = 'minimal' | 'pro' | 'extra';
+export type ContentScaling = 'xs' | 'sm' | 'md';
+
+
 // CSS utils
 export const hideOnMobile = { display: { xs: 'none', md: 'flex' } };
 
@@ -27,7 +32,7 @@ const jetBrainsMono = JetBrains_Mono({
 export const themeCodeFontFamilyCss = jetBrainsMono.style.fontFamily;
 
 
-export const appTheme = extendTheme({
+export const createAppTheme = (uiComplexityMinimal: boolean) => extendTheme({
   fontFamily: {
     body: themeFontFamilyCss,
     display: themeFontFamilyCss,
@@ -111,14 +116,14 @@ export const appTheme = extendTheme({
     //   },
     // },
 
-    // JoyModal: {
-    //   styleOverrides: {
-    //     backdrop: {
-    //       // backdropFilter: 'blur(2px)',
-    //       backdropFilter: 'none',
-    //     },
-    //   },
-    // },
+    JoyModal: !uiComplexityMinimal ? undefined : {
+      styleOverrides: {
+        backdrop: {
+          backdropFilter: 'none',
+          // backdropFilter: 'blur(2px)',
+        },
+      },
+    },
 
     /**
      * Switch: increase the size of the thumb, to a default iconButton
@@ -152,8 +157,7 @@ export const themeZIndexDesktopNav = 27;
 export const themeZIndexOverMobileDrawer = 1301;
 
 
-// Dyanmic UI Sizing
-export type ContentScaling = 'xs' | 'sm' | 'md';
+// Dynamic UI Sizing
 
 export function adjustContentScaling(scaling: ContentScaling, offset?: number) {
   if (!offset) return scaling;

src/common/providers/ProviderTheming.tsx

@@ -3,7 +3,8 @@ import * as React from 'react';
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import { CssBaseline, CssVarsProvider } from '@mui/joy';
 
-import { appTheme, createEmotionCache } from '~/common/app.theme';
+import { createAppTheme, createEmotionCache } from '~/common/app.theme';
+import { useUIComplexityIsMinimal } from '~/common/state/store-ui';
 
 
 // Client-side cache, shared for the whole session of the user in the browser.
@@ -48,11 +49,21 @@ const _GlobalSVGFiltersMemo = React.memo(function GlobalSVGFilters() {
 });
 
 
-export const ProviderTheming = (props: { emotionCache?: EmotionCache, children: React.ReactNode }) =>
-  <CacheProvider value={props.emotionCache || clientSideEmotionCache}>
-    <CssVarsProvider defaultMode='light' theme={appTheme}>
-      <CssBaseline />
-      <_GlobalSVGFiltersMemo />
-      {props.children}
-    </CssVarsProvider>
-  </CacheProvider>;
+export const ProviderTheming = (props: { emotionCache?: EmotionCache, children: React.ReactNode }) => {
+
+  // external state
+  const zenMode = useUIComplexityIsMinimal();
+
+  // recreate the theme only to apply zen touches
+  const theme = React.useMemo(() => createAppTheme(zenMode), [zenMode]);
+
+  return (
+    <CacheProvider value={props.emotionCache || clientSideEmotionCache}>
+      <CssVarsProvider defaultMode='light' theme={theme}>
+        <CssBaseline />
+        <_GlobalSVGFiltersMemo />
+        {props.children}
+      </CssVarsProvider>
+    </CacheProvider>
+  );
+};

src/common/state/store-ui.ts

@@ -2,14 +2,12 @@ import * as React from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-import type { ContentScaling } from '~/common/app.theme';
+import type { ContentScaling, UIComplexityMode } from '~/common/app.theme';
 import { browserLangOrUS } from '~/common/util/pwaUtils';
 
 
 // UI Preferences
 
-export type UIComplexityMode = 'minimal' | 'pro' | 'extra';
-
 interface UIPreferencesStore {
 
   // UI Features