(feat): add custom css

apps/web/src/index.tsx

@@ -121,6 +121,8 @@ function ThemeStorageBridge() {
     setThemeTint,
     themeBorderRadius,
     setThemeBorderRadius,
+    themeCustomCss,
+    setThemeCustomCss,
   } = useTheme();
   const loadedRef = useRef(false);
 
@@ -134,7 +136,16 @@ function ThemeStorageBridge() {
       load("theme_polarity"),
       load("theme_tint"),
       load("theme_border_radius"),
-    ]).then(([color, palette, primaryColor, polarity, tint, borderRadius]) => {
+      load("theme_custom_css"),
+    ]).then(([
+      color,
+      palette,
+      primaryColor,
+      polarity,
+      tint,
+      borderRadius,
+      customCss,
+    ]) => {
       if (!active) {
         return;
       }
@@ -145,6 +156,7 @@ function ThemeStorageBridge() {
       setThemePolarity(polarity);
       setThemeTint(tint);
       setThemeBorderRadius(borderRadius);
+      setThemeCustomCss(customCss);
       loadedRef.current = true;
     });
 
@@ -155,6 +167,7 @@ function ThemeStorageBridge() {
     load,
     setThemeBorderRadius,
     setThemeColor,
+    setThemeCustomCss,
     setThemePalette,
     setThemePolarity,
     setThemePrimaryColor,
@@ -209,6 +222,14 @@ function ThemeStorageBridge() {
     save("theme_border_radius", themeBorderRadius);
   }, [save, themeBorderRadius]);
 
+  useEffect(() => {
+    if (!loadedRef.current) {
+      return;
+    }
+
+    save("theme_custom_css", themeCustomCss);
+  }, [save, themeCustomCss]);
+
   return null;
 }
 
@@ -224,6 +245,7 @@ function RootShell() {
         primaryColorStorageKey={null}
         tintStorageKey={null}
         borderRadiusStorageKey={null}
+        customCssStorageKey={null}
       >
         <div className="w-screen h-dvh overflow-hidden">
           <Toaster

apps/web/src/routes/settings/theme.tsx

@@ -1,5 +1,20 @@
 import { StylePicker } from "@tensamin/ui";
 
 export default function Page() {
-  return <StylePicker />;
+  return (
+    <div className="overflow-y-auto">
+      <StylePicker />
+      <div className="absolute bottom-0 right-0 mb-3 mr-2">
+        <a
+          className="block w-60 text-xs whitespace-pre-wrap"
+          href="https://git.methanium.net/tensamin/client/issues/new"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Please open a Git issue to help us improve this feature. We want to
+          get it right.
+        </a>
+      </div>
+    </div>
+  );
 }