hueshift

package-lock.json

···
         "@atproto/api": "^0.16.6",
         "@atproto/oauth-client-browser": "^0.3.33",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-slider": "^1.3.6",
         "@tailwindcss/vite": "^4.0.6",
         "@tanstack/query-sync-storage-persister": "^5.85.6",
         "@tanstack/react-devtools": "^0.2.2",

package.json

···
     "@atproto/api": "^0.16.6",
     "@atproto/oauth-client-browser": "^0.3.33",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slider": "^1.3.6",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/query-sync-storage-persister": "^5.85.6",
     "@tanstack/react-devtools": "^0.2.2",

src/components/Star.tsx

···
+import type { SVGProps } from 'react';
+import React from 'react';
+
+export function FluentEmojiHighContrastGlowingStar(props: SVGProps<SVGSVGElement>) {
+	return (<svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}><g fill="currentColor"><path d="m28.979 17.003l-3.108.214c-.834.06-1.178 1.079-.542 1.608l2.388 1.955c.521.428 1.314.204 1.523-.428l.709-2.127c.219-.632-.292-1.273-.97-1.222M21.75 2.691l-.72 2.9c-.2.78.66 1.41 1.34.98l2.54-1.58c.55-.34.58-1.14.05-1.52l-1.78-1.29a.912.912 0 0 0-1.43.51M6.43 4.995l2.53 1.58c.68.43 1.54-.19 1.35-.98l-.72-2.9a.92.92 0 0 0-1.43-.52l-1.78 1.29c-.53.4-.5 1.19.05 1.53M4.185 20.713l2.29-1.92c.62-.52.29-1.53-.51-1.58l-2.98-.21a.92.92 0 0 0-.94 1.2l.68 2.09c.2.62.97.84 1.46.42m13.61 7.292l-1.12-2.77c-.3-.75-1.36-.75-1.66 0l-1.12 2.77c-.24.6.2 1.26.85 1.26h2.2a.92.92 0 0 0 .85-1.26"></path><path d="m17.565 3.324l1.726 3.72c.326.694.967 1.18 1.717 1.29l4.056.624c1.835.278 2.575 2.53 1.293 3.859L23.268 16a2.28 2.28 0 0 0-.612 1.964l.71 4.374c.307 1.885-1.687 3.293-3.354 2.37l-3.405-1.894a2.25 2.25 0 0 0-2.21 0l-3.404 1.895c-1.668.922-3.661-.486-3.355-2.37l.71-4.375A2.28 2.28 0 0 0 7.736 16l-3.088-3.184c-1.293-1.34-.543-3.581 1.293-3.859l4.055-.625a2.3 2.3 0 0 0 1.717-1.29l1.727-3.719c.819-1.765 3.306-1.765 4.124 0"></path></g></svg>);
+}

src/main.tsx

···
 import { routeTree } from "./routeTree.gen";
 import { isAtTopAtom } from "./utils/atoms.ts";
 
+//initAtomToCssVar(hueAtom, "--tw-gray-hue")
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

src/routes/__root.tsx

···
 import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";
 import Login from "~/components/Login";
 import { NotFound } from "~/components/NotFound";
+import { FluentEmojiHighContrastGlowingStar } from "~/components/Star";
 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider";
-import { composerAtom } from "~/utils/atoms";
+import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms";
 import { seo } from "~/utils/seo";
 
 export const Route = createRootRouteWithContext<{
···
 }
 
 function RootDocument({ children }: { children: React.ReactNode }) {
+  useAtomCssVar(hueAtom, "--tw-gray-hue");
   const location = useLocation();
   const navigate = useNavigate();
   const { agent } = useAuth();
···
       <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950">
         <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-0 p-4 dark:border-gray-800 sticky top-0 self-start">
           <div className="flex items-center gap-3 mb-4">
-            <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" />
+            <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} />
             <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100">
               Red Dwarf{" "}
               {/* <span className="text-gray-500 dark:text-gray-400 text-sm">
···
 
         <nav className="hidden sm:flex items-center lg:hidden h-screen  flex-col gap-2 p-4 dark:border-gray-800 sticky top-0 self-start">
           <div className="flex items-center gap-3 mb-4">
-            <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" />
+            <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} />
           </div>
           <MaterialNavItem
             small
···
       ) : (
         <div className="lg:hidden flex items-center fixed bottom-0 left-0 right-0 justify-between px-4 py-3 border-0 shadow border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 z-10">
           <div className="flex items-center gap-2">
-            <img src="/redstar.png" alt="Red Dwarf Logo" className="w-6 h-6" />
+            <FluentEmojiHighContrastGlowingStar className="h-6 w-6" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} />
             <span className="font-bold text-lg text-gray-900 dark:text-gray-100">
               Red Dwarf{" "}
               {/* <span className="text-gray-500 dark:text-gray-400 text-sm">

src/routes/settings.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
 import { useAtom } from "jotai";
+import { Slider } from "radix-ui";
 
 import { Header } from "~/components/Header";
 import Login from "~/components/Login";
 import {
   constellationURLAtom,
   defaultconstellationURL,
+  defaulthue,
   defaultImgCDN,
   defaultslingshotURL,
   defaultVideoCDN,
+  hueAtom,
   imgCDNAtom,
   slingshotURLAtom,
   videoCDNAtom,
···
           }
         }}
       />
-      <div className="lg:hidden"><Login /></div>
+      <div className="lg:hidden">
+        <Login />
+      </div>
       <div className="h-4" />
       <TextInputSetting
         atom={constellationURLAtom}
···
         description={"Customize the Slingshot instance to be used by Red Dwarf"}
         init={defaultVideoCDN}
       />
-      <p className="text-gray-500 dark:text-gray-400 py-4 px-6 text-sm">please restart/refresh the app if changes arent applying correctly</p>
+
+      <Hue />
+      <p className="text-gray-500 dark:text-gray-400 py-4 px-6 text-sm">
+        please restart/refresh the app if changes arent applying correctly
+      </p>
     </>
   );
 }
+function Hue() {
+  const [hue, setHue] = useAtom(hueAtom);
+  return (
+    <div className="flex flex-col px-4 mt-4 ">
+      <span className="z-10">Hue</span>
+      <div className="flex flex-row items-center gap-4">
+        <SliderComponent
+          atom={hueAtom}
+          max={360}
+        />
+        <button
+          onClick={() => setHue(defaulthue ?? 28)}
+          className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 
+                     text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition"
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+}
 
 export function TextInputSetting({
   atom,
···
 
       <div className="flex flex-row gap-2 items-center">
         <div className="m3input-field m3input-label m3input-border size-md flex-1">
-          <input type="text" placeholder=" " value={value} onChange={(e) => setValue(e.target.value)}/>
+          <input
+            type="text"
+            placeholder=" "
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
           <label>{title}</label>
         </div>
         {/* <input
···
       </div>
     </div>
   );
-}
+}
+
+
+interface SliderProps {
+  atom: typeof hueAtom;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export const SliderComponent: React.FC<SliderProps> = ({
+  atom,
+  min = 0,
+  max = 100,
+  step = 1,
+}) => {
+
+  const [value, setValue] = useAtom(atom)
+
+  return (
+    <Slider.Root
+      className="relative flex items-center w-full h-4"
+      value={[value]}
+      min={min}
+      max={max}
+      step={step}
+      onValueChange={(v: number[]) => setValue(v[0])}
+    >
+      <Slider.Track className="relative flex-grow h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
+        <Slider.Range className="absolute h-full bg-gray-500 dark:bg-gray-400 rounded-l-full rounded-r-none" />
+      </Slider.Track>
+      <Slider.Thumb className="shadow-[0_0_0_8px_var(--color-white)] dark:shadow-[0_0_0_8px_var(--color-gray-950)] block w-[3px] h-12 bg-gray-500 dark:bg-gray-400 rounded-md focus:outline-none" />
+    </Slider.Root>
+  );
+};

src/styles/app.css

···
   --color-gray-950: oklch(0.129 0.050 222.000);
 } */
 
+:root {
+  --safe-hue: var(--tw-gray-hue, 28)
+}
+
 @theme {
-  --color-gray-50: oklch(0.984 0.012 28);
-  --color-gray-100: oklch(0.968 0.017 28);
-  --color-gray-200: oklch(0.929 0.025 28);
-  --color-gray-300: oklch(0.869 0.035 28);
-  --color-gray-400: oklch(0.704 0.05 28);
-  --color-gray-500: oklch(0.554 0.06 28);
-  --color-gray-600: oklch(0.446 0.058 28);
-  --color-gray-700: oklch(0.372 0.058 28);
-  --color-gray-800: oklch(0.279 0.055 28);
-  --color-gray-900: oklch(0.208 0.055 28);
-  --color-gray-950: oklch(0.129 0.055 28);
+  --color-gray-50: oklch(0.984 0.012 var(--safe-hue));
+  --color-gray-100: oklch(0.968 0.017 var(--safe-hue));
+  --color-gray-200: oklch(0.929 0.025 var(--safe-hue));
+  --color-gray-300: oklch(0.869 0.035 var(--safe-hue));
+  --color-gray-400: oklch(0.704 0.05 var(--safe-hue));
+  --color-gray-500: oklch(0.554 0.06 var(--safe-hue));
+  --color-gray-600: oklch(0.446 0.058 var(--safe-hue));
+  --color-gray-700: oklch(0.372 0.058 var(--safe-hue));
+  --color-gray-800: oklch(0.279 0.055 var(--safe-hue));
+  --color-gray-900: oklch(0.208 0.055 var(--safe-hue));
+  --color-gray-950: oklch(0.129 0.055 var(--safe-hue));
 }
 
 @layer base {

src/utils/atoms.ts

···
 import type Agent from "@atproto/api";
-import { atom, createStore } from "jotai";
-import { atomWithStorage } from 'jotai/utils';
+import { atom, createStore, useAtomValue } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { useEffect } from "react";
 
 export const store = createStore();
 
 export const selectedFeedUriAtom = atomWithStorage<string | null>(
-  'selectedFeedUri',
+  "selectedFeedUri",
   null
 );
 
 //export const feedScrollPositionsAtom = atom<Record<string, number>>({});
 
 export const feedScrollPositionsAtom = atomWithStorage<Record<string, number>>(
-  'feedscrollpositions',
+  "feedscrollpositions",
   {}
 );
 
 export const likedPostsAtom = atomWithStorage<Record<string, string>>(
-  'likedPosts',
+  "likedPosts",
   {}
 );
 
-export const defaultconstellationURL = 'constellation.microcosm.blue'
+export const defaultconstellationURL = "constellation.microcosm.blue";
 export const constellationURLAtom = atomWithStorage<string>(
-  'constellationURL',
+  "constellationURL",
   defaultconstellationURL
-)
-export const defaultslingshotURL = 'slingshot.microcosm.blue'
+);
+export const defaultslingshotURL = "slingshot.microcosm.blue";
 export const slingshotURLAtom = atomWithStorage<string>(
-  'slingshotURL',
+  "slingshotURL",
   defaultslingshotURL
-)
-export const defaultImgCDN = 'cdn.bsky.app'
-export const imgCDNAtom = atomWithStorage<string>(
-  'imgcdnurl',
-  defaultImgCDN
-)
-export const defaultVideoCDN = 'video.bsky.app'
+);
+export const defaultImgCDN = "cdn.bsky.app";
+export const imgCDNAtom = atomWithStorage<string>("imgcdnurl", defaultImgCDN);
+export const defaultVideoCDN = "video.bsky.app";
 export const videoCDNAtom = atomWithStorage<string>(
-  'videocdnurl',
+  "videocdnurl",
   defaultVideoCDN
-)
+);
+
+export const defaulthue = 28;
+export const hueAtom = atomWithStorage<number>("hue", defaulthue);
 
 export const isAtTopAtom = atom<boolean>(true);
 
 type ComposerState =
-  | { kind: 'closed' }
-  | { kind: 'root' }
-  | { kind: 'reply'; parent: string }
-  | { kind: 'quote'; subject: string };
-export const composerAtom = atom<ComposerState>({ kind: 'closed' });
+  | { kind: "closed" }
+  | { kind: "root" }
+  | { kind: "reply"; parent: string }
+  | { kind: "quote"; subject: string };
+export const composerAtom = atom<ComposerState>({ kind: "closed" });
 
-export const agentAtom = atom<Agent|null>(null);
+export const agentAtom = atom<Agent | null>(null);
 export const authedAtom = atom<boolean>(false);
+
+export function useAtomCssVar(atom: typeof hueAtom, cssVar: string) {
+  const value = useAtomValue(atom);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty(cssVar, value.toString());
+  }, [value, cssVar]);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty(cssVar, value.toString());
+  }, []);
+}
+
+hueAtom.onMount = (setAtom) => {
+  const stored = localStorage.getItem("hue");
+  if (stored != null) setAtom(Number(stored));
+};
+// export function initAtomToCssVar(atom: typeof hueAtom, cssVar: string) {
+//   const initial = store.get(atom);
+//   console.log("atom get ", initial);
+//   document.documentElement.style.setProperty(cssVar, initial.toString());
+// }