added theme tracking

5 files changed, 511 insertions, 260 deletions

diff --git a/org-roam-ui.el b/org-roam-ui.el
index 9988899..f0452a6 100644
--- a/org-roam-ui.el
+++ b/org-roam-ui.el
@@ -94,7 +94,7 @@ ROWS is the sql result, while COLUMN-NAMES is the columns to use."
       (push (cons (pop column-names) (pop rows)) res))
     res))
 
-(defservlet* theme application/json ()
+(defservlet* theme text/stream ()
   (progn
     (when (boundp 'doom-themes--colors)
       (let*
@@ -102,7 +102,7 @@ ROWS is the sql result, while COLUMN-NAMES is the columns to use."
         (progn
           (dolist (color colors) (push (cons (car color) (car (cdr color))) ui-theme))
           (insert (json-encode  ui-theme)))))
-    (httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*")))
+    (httpd-send-header t "text/event-stream" 200 :Access-Control-Allow-Origin "*")))
 
 
 (defservlet* id/:id text/html ()
diff --git a/package.json b/package.json
index 4395167..3cdf0f0 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,13 @@
     "@react-hook/window-size": "^3.0.7",
     "d3-force-3d": "^3.0.2",
     "framer-motion": "^4",
+    "hex-rgb": "^5.0.0",
     "next": "11.0.1",
     "react": "17.0.2",
+    "react-custom-scrollbars-2": "^4.4.0",
     "react-dom": "17.0.2",
     "react-force-graph": "^1.41.7",
+    "react-spring": "^9.2.4",
     "three-spritetext": "^1.6.2",
     "use-constant": "^1.1.0"
   },
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1801159..262ac69 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,10 +1,106 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 import { ChakraProvider } from '@chakra-ui/react'
+import { useEffect, useState, useMemo } from 'react'
+import { extendTheme } from '@chakra-ui/react'
+//import hexRgb from 'hex-rgb'
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const initialTheme = {
+    base1: '#1c1f24',
+    base2: '#21272d',
+    base3: '#23272e',
+    base4: '#484854',
+    base5: '#62686E',
+    base6: '#757B80',
+    base7: '#9ca0a4',
+    base8: '#DFDFDF',
+    bg: '#242730',
+    'bg-alt': '#2a2e38',
+    blue: '#51afef',
+    cyan: '#5cEfFF',
+    'dark-blue': '#1f5582',
+    'dark-cyan': '#6A8FBF',
+    fg: '#bbc2cf',
+    'fg-alt': '#5D656B',
+    green: '#7bc275',
+    grey: '#484854',
+    magenta: '#C57BDB',
+    orange: '#e69055',
+    red: '#ff665c',
+    teal: '#4db5bd',
+    violet: '#a991f1',
+    yellow: '#FCCE7B',
+  }
+  const [emacsTheme, setEmacsTheme] = useState(initialTheme)
+  useEffect(() => {
+    const trackTheme = new EventSource('http://127.0.0.1:35901/theme')
+    trackTheme.addEventListener('message', (e) => {
+      const themeData = JSON.parse(e.data)
+      setEmacsTheme(themeData)
+      console.log(themeData)
+      console.log(themeData['fg-alt'])
+    })
+  }, [])
+
+  const borderColor = emacsTheme.violet + 'aa'
+  const theme =
+    //useMemo(() => {
+    //console.log("theme change")
+    extendTheme({
+      colors: {
+        white: emacsTheme.bg,
+        black: emacsTheme.fg,
+        gray: {
+          200: emacsTheme.base1,
+          300: emacsTheme.base2,
+          400: emacsTheme.base3,
+          500: emacsTheme.base4,
+          600: emacsTheme.base5,
+          700: emacsTheme.base6,
+          800: emacsTheme.base7,
+          900: emacsTheme.base8,
+        },
+        blue: {
+          500: emacsTheme.blue,
+        },
+        teal: {
+          500: emacsTheme.blue,
+        },
+        yellow: {
+          500: emacsTheme.yellow,
+        },
+        orange: {
+          500: emacsTheme.orange,
+        },
+        red: {
+          500: emacsTheme.red,
+        },
+        green: {
+          500: emacsTheme.green,
+        },
+        purple: {
+          500: emacsTheme.violet,
+        },
+        pink: {
+          500: emacsTheme.magenta,
+        },
+        cyan: {
+          500: emacsTheme.cyan,
+        },
+        alt: {
+          100: emacsTheme['bg-alt'],
+          900: emacsTheme['fg-alt'],
+        },
+      },
+      shadows: {
+        outline: '0 0 0 3px ' + borderColor,
+      },
+    })
+  // }, [emacsTheme.base1])
+
   return (
-    <ChakraProvider>
+    <ChakraProvider theme={theme}>
       <Component {...pageProps} />
     </ChakraProvider>
   )
diff --git a/pages/index.tsx b/pages/index.tsx
index 3200bb9..5dfce8d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,7 @@ import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
 import { GraphData, NodeObject } from 'force-graph'
 
 import { useWindowSize } from '@react-hook/window-size'
+import { Scrollbars } from 'react-custom-scrollbars-2'
 
 import {
   Accordion,
@@ -44,6 +45,7 @@ import {
   MenuOptionGroup,
   MenuItemOption,
   Flex,
+  useTheme,
 } from '@chakra-ui/react'
 
 import { InfoOutlineIcon, RepeatClockIcon, ChevronDownIcon, SettingsIcon } from '@chakra-ui/icons'
@@ -97,33 +99,6 @@ const initialPhysics = {
   highlightLinkSize: 2,
 }
 
-const initialTheme = {
-  base1: '#1c1f24',
-  base2: '#21272d',
-  base3: '#23272e',
-  base4: '#484854',
-  base5: '#62686E',
-  base6: '#757B80',
-  base7: '#9ca0a4',
-  base8: '#DFDFDF',
-  bg: '#242730',
-  'bg-alt': '#2a2e38',
-  blue: '#51afef',
-  cyan: '#5cEfFF',
-  'dark-blue': '#1f5582',
-  'dark-cyan': '#6A8FBF',
-  fg: '#bbc2cf',
-  'fg-alt': '#5D656B',
-  green: '#7bc275',
-  grey: '#484854',
-  magenta: '#C57BDB',
-  orange: '#e69055',
-  red: '#ff665c',
-  teal: '#4db5bd',
-  violet: '#a991f1',
-  yellow: '#FCCE7B',
-}
-
 export default function Home() {
   // only render on the client
   const [showPage, setShowPage] = useState(false)
@@ -140,7 +115,7 @@ export default function Home() {
 
 export function GraphPage() {
   const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
-  const [theme, setTheme] = useState(initialTheme)
+  //  const [theme, setTheme] = useState(initialTheme)
   const [graphData, setGraphData] = useState<GraphData | null>(null)
   const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
 
@@ -154,11 +129,11 @@ export function GraphPage() {
       const emacsNodeId = e.data
       setEmacsNodeId(emacsNodeId)
     })
-    fetch('http://localhost:35901/theme')
-      .then((res) => res.json())
-      .then((emacsTheme) => {
-        setTheme(emacsTheme)
-      })
+    /* fetch('http://localhost:35901/theme')
+     *   .then((res) => res.json())
+     *   .then((emacsTheme) => {
+     *     setTheme(emacsTheme)
+     *   }) */
     fetch('http://localhost:35901/graph')
       .then((res) => res.json())
       .then((orgRoamGraphData: OrgRoamGraphReponse) => {
@@ -256,7 +231,14 @@ export const SliderWithInfo = ({
         <Text>{label}</Text>
         {infoText && <InfoTooltip infoText={infoText} />}
       </Box>
-      <Slider value={value} onChange={onChange} min={min} max={max} step={step}>
+      <Slider
+        value={value}
+        onChange={onChange}
+        min={min}
+        max={max}
+        step={step}
+        colorScheme="purple"
+      >
         <SliderTrack>
           <SliderFilledTrack />
         </SliderTrack>
@@ -285,13 +267,22 @@ export const EnableSection = (props: EnableSectionProps) => {
           <Text>{label}</Text>
           {infoText && <InfoTooltip infoText={infoText} />}
         </Box>
-        <Switch isChecked={!!value} onChange={onChange} />
+        <Switch isChecked={!!value} onChange={onChange} colorScheme="purple" />
       </Box>
       {value && children}
     </Box>
   )
 }
 
+/* style={{
+ *   position: "absolute",
+ *   zIndex: 2000,
+ *   width: 400,
+ *   maxHeight: "70%",
+ *   background: "alt.100",
+ *   marginTop: "2%",
+ *   marginLeft: "2%"
+ * }} */
 export interface TweakProps {
   physics: typeof initialPhysics
   setPhysics: any
@@ -304,13 +295,14 @@ export const Tweaks = function (props: TweakProps) {
     <Box
       zIndex="overlay"
       position="absolute"
-      bg="white"
+      bg="alt.100"
       w="xs"
       marginTop="2%"
       marginLeft="2%"
       borderRadius="md"
-      maxH="80%"
-      overflowY="scroll"
+      maxH={650}
+      paddingBottom={5}
+      //overflowY="scroll"
     >
       <Box display="flex" justifyContent="flex-end">
         <Tooltip label="Reset settings to defaults">
@@ -318,224 +310,228 @@ export const Tweaks = function (props: TweakProps) {
             aria-label="Reset Defaults"
             icon={<RepeatClockIcon />}
             onClick={() => setPhysics(initialPhysics)}
+            colorScheme="purple"
           />
         </Tooltip>
         <CloseButton onClick={onClose} />
       </Box>
-      <Accordion allowMultiple allowToggle>
-        <AccordionItem>
-          <AccordionButton display="flex" justifyContent="space-between">
-            <Box display="flex">
-              <AccordionIcon />
-              <Text>Physics</Text>
-            </Box>
-            <Switch
-              id="physicsOn"
-              onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
-              isChecked={physics.enabled}
-            />
-          </AccordionButton>
-          <AccordionPanel>
-            <VStack
-              spacing={2}
-              justifyContent="flex-start"
-              divider={<StackDivider borderColor="gray.200" />}
-              align="stretch"
-            >
-              <EnableSection
-                label="Gravity"
-                value={physics.gravityOn}
-                onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
-              >
-                <SliderWithInfo
-                  label="Strength"
-                  value={physics.gravity * 10}
-                  onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })}
-                />
-              </EnableSection>
-              <SliderWithInfo
-                value={-physics.charge / 100}
-                onChange={(value) => setPhysics({ ...physics, charge: -100 * value })}
-                label="Repulsive Force"
+      <Scrollbars autoHeight autoHeightMax={600}>
+        <Accordion allowMultiple allowToggle colorScheme="purple">
+          <AccordionItem>
+            <AccordionButton display="flex" justifyContent="space-between" colorScheme="purple">
+              <Box display="flex">
+                <AccordionIcon />
+                <Text>Physics</Text>
+              </Box>
+              <Switch
+                id="physicsOn"
+                onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
+                isChecked={physics.enabled}
+                colorScheme="purple"
               />
-              <EnableSection
-                label="Collision"
-                infoText="Perfomance sap, disable if slow"
-                value={physics.collision}
-                onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
+            </AccordionButton>
+            <AccordionPanel>
+              <VStack
+                spacing={2}
+                justifyContent="flex-start"
+                divider={<StackDivider borderColor="gray.200" />}
+                align="stretch"
               >
+                <EnableSection
+                  label="Gravity"
+                  value={physics.gravityOn}
+                  onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
+                >
+                  <SliderWithInfo
+                    label="Strength"
+                    value={physics.gravity * 10}
+                    onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })}
+                  />
+                </EnableSection>
                 <SliderWithInfo
-                  value={physics.collisionStrength * 10}
-                  onChange={(value) => setPhysics({ ...physics, collisionStrength: value / 10 })}
-                  label="Strength"
+                  value={-physics.charge / 100}
+                  onChange={(value) => setPhysics({ ...physics, charge: -100 * value })}
+                  label="Repulsive Force"
                 />
-              </EnableSection>
-              <SliderWithInfo
-                value={physics.linkStrength * 5}
-                onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })}
-                label="Link Force"
-              />
-              <SliderWithInfo
-                label="Link Iterations"
-                value={physics.linkIts}
-                onChange={(value) => setPhysics({ ...physics, linkIts: value })}
-                min={0}
-                max={6}
-                step={1}
-                infoText="How many links down the line the physics of a single node affects (Slow)"
-              />
-              <SliderWithInfo
-                label="Viscosity"
-                value={physics.velocityDecay * 10}
-                onChange={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })}
-              />
-            </VStack>
-            <Box>
-              <Accordion allowToggle>
-                <AccordionItem>
-                  <AccordionButton>
-                    <Text>Advanced</Text>
-                    <AccordionIcon />
-                  </AccordionButton>
-                  <AccordionPanel>
-                    <VStack
-                      spacing={2}
-                      justifyContent="flex-start"
-                      divider={<StackDivider borderColor="gray.200" />}
-                      align="stretch"
-                    >
-                      <SliderWithInfo
-                        label="Iterations per tick"
-                        min={1}
-                        max={10}
-                        step={1}
-                        value={physics.iterations}
-                        onChange={(v) => setPhysics({ ...physics, iterations: v })}
-                        infoText="Number of times the physics simulation iterates per simulation step"
-                      />
-                      <SliderWithInfo
-                        label="Stabilization rate"
-                        value={physics.alphaDecay * 50}
-                        onChange={(value) => setPhysics({ ...physics, alphaDecay: value / 50 })}
-                      />
-                    </VStack>
-                  </AccordionPanel>
-                </AccordionItem>
-              </Accordion>
-            </Box>
-            {/* </VStack> */}
-          </AccordionPanel>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionButton>
-            <AccordionIcon />
-            Visual
-          </AccordionButton>
-          <AccordionPanel>
-            <VStack
-              spacing={2}
-              justifyContent="flex-start"
-              divider={<StackDivider borderColor="gray.200" />}
-              align="stretch"
-            >
-              <SliderWithInfo
-                label="Node size"
-                value={physics.nodeRel}
-                onChange={(value) => setPhysics({ ...physics, nodeRel: value })}
-              />
-              <SliderWithInfo
-                label="Link width"
-                value={physics.linkWidth}
-                onChange={(value) => setPhysics({ ...physics, linkWidth: value })}
-              />
-              <EnableSection
-                label="Labels"
-                value={physics.labels}
-                onChange={() => setPhysics({ ...physics, labels: !physics.labels })}
-              >
+                <EnableSection
+                  label="Collision"
+                  infoText="Perfomance sap, disable if slow"
+                  value={physics.collision}
+                  onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
+                >
+                  <SliderWithInfo
+                    value={physics.collisionStrength * 10}
+                    onChange={(value) => setPhysics({ ...physics, collisionStrength: value / 10 })}
+                    label="Strength"
+                  />
+                </EnableSection>
                 <SliderWithInfo
-                  label="Label Appearance Scale"
-                  value={physics.labelScale * 5}
-                  onChange={(value) => setPhysics({ ...physics, labelScale: value / 5 })}
+                  value={physics.linkStrength * 5}
+                  onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })}
+                  label="Link Force"
                 />
-              </EnableSection>
-              <EnableSection
-                label="Directional Particles"
-                value={physics.particles}
-                onChange={() => setPhysics({ ...physics, particles: !physics.particles })}
-              >
                 <SliderWithInfo
-                  label="Particle Number"
-                  value={physics.particlesNumber}
-                  max={5}
+                  label="Link Iterations"
+                  value={physics.linkIts}
+                  onChange={(value) => setPhysics({ ...physics, linkIts: value })}
+                  min={0}
+                  max={6}
                   step={1}
-                  onChange={(value) => setPhysics({ ...physics, particlesNumber: value })}
+                  infoText="How many links down the line the physics of a single node affects (Slow)"
                 />
                 <SliderWithInfo
-                  label="Particle Size"
-                  value={physics.particlesWidth}
-                  onChange={(value) => setPhysics({ ...physics, particleWidth: value })}
+                  label="Viscosity"
+                  value={physics.velocityDecay * 10}
+                  onChange={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })}
                 />
-              </EnableSection>
-              <EnableSection
-                label="Highlight"
-                onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })}
-                value={physics.highlight}
+              </VStack>
+              <Box>
+                <Accordion allowToggle>
+                  <AccordionItem>
+                    <AccordionButton>
+                      <Text>Advanced</Text>
+                      <AccordionIcon />
+                    </AccordionButton>
+                    <AccordionPanel>
+                      <VStack
+                        spacing={2}
+                        justifyContent="flex-start"
+                        divider={<StackDivider borderColor="gray.200" />}
+                        align="stretch"
+                      >
+                        <SliderWithInfo
+                          label="Iterations per tick"
+                          min={1}
+                          max={10}
+                          step={1}
+                          value={physics.iterations}
+                          onChange={(v) => setPhysics({ ...physics, iterations: v })}
+                          infoText="Number of times the physics simulation iterates per simulation step"
+                        />
+                        <SliderWithInfo
+                          label="Stabilization rate"
+                          value={physics.alphaDecay * 50}
+                          onChange={(value) => setPhysics({ ...physics, alphaDecay: value / 50 })}
+                        />
+                      </VStack>
+                    </AccordionPanel>
+                  </AccordionItem>
+                </Accordion>
+              </Box>
+              {/* </VStack> */}
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton>
+              <AccordionIcon />
+              Visual
+            </AccordionButton>
+            <AccordionPanel>
+              <VStack
+                spacing={2}
+                justifyContent="flex-start"
+                divider={<StackDivider borderColor="gray.200" />}
+                align="stretch"
               >
                 <SliderWithInfo
-                  label="Highlight Link Thickness Multiplier"
-                  value={physics.highlightLinkSize}
-                  onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })}
+                  label="Node size"
+                  value={physics.nodeRel}
+                  onChange={(value) => setPhysics({ ...physics, nodeRel: value })}
                 />
                 <SliderWithInfo
-                  label="Highlight Node Size Multiplier"
-                  value={physics.highlightNodeSize}
-                  onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })}
+                  label="Link width"
+                  value={physics.linkWidth}
+                  onChange={(value) => setPhysics({ ...physics, linkWidth: value })}
                 />
-                <Flex justifyContent="space-between">
-                  <Text> Highlight node color </Text>
-                </Flex>
-                <Flex justifyContent="space-between">
-                  <Text> Highlight link color </Text>
-                </Flex>
-              </EnableSection>
-            </VStack>
-          </AccordionPanel>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionButton>
-            <AccordionIcon />
-            Behavior
-          </AccordionButton>
-          <AccordionPanel>
-            <VStack
-              spacing={2}
-              justifyContent="flex-start"
-              divider={<StackDivider borderColor="gray.200" />}
-              align="stretch"
-            >
-              <Box display="flex" justifyContent="space-between" alignItems="center">
-                <Text>Hover Higlight</Text>
-                <Menu>
-                  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
-                    {physics.hover}
-                  </MenuButton>
-                  <MenuList>
-                    <MenuItem>Off</MenuItem>
-                    <MenuItem>On</MenuItem>
-                  </MenuList>
-                </Menu>
-              </Box>
-              <Box display="flex" justifyContent="space-between">
-                <Text>Click</Text>
-              </Box>
-              <Box display="flex" justifyContent="space-between">
-                <Text>Double-click</Text>
-              </Box>
-            </VStack>
-          </AccordionPanel>
-        </AccordionItem>
-      </Accordion>
+                <EnableSection
+                  label="Labels"
+                  value={physics.labels}
+                  onChange={() => setPhysics({ ...physics, labels: !physics.labels })}
+                >
+                  <SliderWithInfo
+                    label="Label Appearance Scale"
+                    value={physics.labelScale * 5}
+                    onChange={(value) => setPhysics({ ...physics, labelScale: value / 5 })}
+                  />
+                </EnableSection>
+                <EnableSection
+                  label="Directional Particles"
+                  value={physics.particles}
+                  onChange={() => setPhysics({ ...physics, particles: !physics.particles })}
+                >
+                  <SliderWithInfo
+                    label="Particle Number"
+                    value={physics.particlesNumber}
+                    max={5}
+                    step={1}
+                    onChange={(value) => setPhysics({ ...physics, particlesNumber: value })}
+                  />
+                  <SliderWithInfo
+                    label="Particle Size"
+                    value={physics.particlesWidth}
+                    onChange={(value) => setPhysics({ ...physics, particleWidth: value })}
+                  />
+                </EnableSection>
+                <EnableSection
+                  label="Highlight"
+                  onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })}
+                  value={physics.highlight}
+                >
+                  <SliderWithInfo
+                    label="Highlight Link Thickness Multiplier"
+                    value={physics.highlightLinkSize}
+                    onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })}
+                  />
+                  <SliderWithInfo
+                    label="Highlight Node Size Multiplier"
+                    value={physics.highlightNodeSize}
+                    onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })}
+                  />
+                  <Flex justifyContent="space-between">
+                    <Text> Highlight node color </Text>
+                  </Flex>
+                  <Flex justifyContent="space-between">
+                    <Text> Highlight link color </Text>
+                  </Flex>
+                </EnableSection>
+              </VStack>
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton>
+              <AccordionIcon />
+              Behavior
+            </AccordionButton>
+            <AccordionPanel>
+              <VStack
+                spacing={2}
+                justifyContent="flex-start"
+                divider={<StackDivider borderColor="gray.200" />}
+                align="stretch"
+              >
+                <Box display="flex" justifyContent="space-between" alignItems="center">
+                  <Text>Hover Higlight</Text>
+                  <Menu>
+                    <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+                      {physics.hover}
+                    </MenuButton>
+                    <MenuList>
+                      <MenuItem>Off</MenuItem>
+                      <MenuItem>On</MenuItem>
+                    </MenuList>
+                  </Menu>
+                </Box>
+                <Box display="flex" justifyContent="space-between">
+                  <Text>Click</Text>
+                </Box>
+                <Box display="flex" justifyContent="space-between">
+                  <Text>Double-click</Text>
+                </Box>
+              </VStack>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </Scrollbars>
     </Box>
   )
 }
@@ -681,37 +677,27 @@ export const Graph = function (props: GraphProps) {
     return
   }
 
+  const theme = useTheme()
+  console.log(theme)
   const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = {
     graphData: scopedGraphData,
     width: windowWidth,
     height: windowHeight,
-    backgroundColor: '#242730',
+    backgroundColor: theme.white,
     nodeLabel: (node) => (node as OrgRoamNode).title,
     nodeColor: (node) => {
       if (!physics.colorful) {
         if (Object.keys(highlightedNodes).length === 0) {
           return 'rgb(100, 100, 100)'
         }
-        return highlightedNodes[node.id!] ? '#a991f1' : 'rgb(50, 50, 50)'
+        return highlightedNodes[node.id!] ? theme.blue['500'] : 'rgb(50, 50, 50)'
       }
 
-      const palette = [
-        '#ff665c',
-        '#e69055',
-        '#7bc275',
-        '#4db5bd',
-        '#FCCE7B',
-        '#51afef',
-        '#1f5582',
-        '#C57BDB',
-        '#a991f1',
-        '#5cEfFF',
-        '#6A8FBF',
-      ]
-
-      return palette[
-        numbereWithinRange(linksByNodeId[node.id!]?.length ?? 0, 0, palette.length - 1)
-      ]
+      const palette = ['pink', 'purple', 'blue', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red']
+
+      return theme.colors[
+        palette[numbereWithinRange(linksByNodeId[node.id!]?.length ?? 0, 0, palette.length - 1)]
+      ][500]
     },
     nodeRelSize: physics.nodeRel,
     nodeVal: (node) => {
@@ -778,7 +764,7 @@ export const Graph = function (props: GraphProps) {
         (link.source as NodeObject).id! === centralHighlightedNode?.id! ||
         (link.target as NodeObject).id! === centralHighlightedNode?.id!
 
-      return linkIsHighlighted ? '#a991f1' : '#666666'
+      return linkIsHighlighted ? theme.colors.purple[500] : theme.colors.gray[400]
     },
     linkWidth: (link) => {
       return physics.linkWidth
diff --git a/yarn.lock b/yarn.lock
index e3efd15..db77246 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -945,6 +945,91 @@
     "@react-hook/event" "^1.2.1"
     "@react-hook/throttle" "^2.2.0"
 
+"@react-spring/animated@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.2.4.tgz#062ecc0fdfef89f2541a42d8500428b70035f879"
+  integrity sha512-AfV6ZM8pCCAT29GY5C8/1bOPjZrv/7kD0vedjiE/tEYvNDwg9GlscrvsTViWR2XykJoYrDfdkYArrldWpsCJ5g==
+  dependencies:
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/core@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.2.4.tgz#275a4a065e3a315a4f5fb28c9a6f62ce718c25d6"
+  integrity sha512-R+PwyfsjiuYCWqaTTfCpYpRmsP0h87RNm7uxC1Uxy7QAHUfHEm2sAHn+AdHPwq/MbVwDssVT8C5yf2WGcqiXGg==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/konva@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.4.tgz#e467b24b3b110ba496526c9001439ce561641e0d"
+  integrity sha512-19anDOIkfjcydDTfGgVIuZ3lruZxKubYGs9oHCswaP8SRLj7c1kkopJHUr/S4LXGxiIdqdF0XucWm0iTEPEq4w==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/native@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.4.tgz#0fd335a44c05023f5428df444d8f1aa3da7abfc9"
+  integrity sha512-xKJWKh5qOhSclpL3iuGwJRLoZzTNvlBEnIrMs8yh8xvX6z9Lmnu4uGu5DpfrnM1GzBvRoktoCoLEx/VcEYFSng==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/rafz@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.2.4.tgz#44793e9adc14dd0dcd1573d094368af11a89d73a"
+  integrity sha512-SOKf9eue+vAX+DGo7kWYNl9i9J3gPUlQjifIcV9Bzw9h3i30wPOOP0TjS7iMG/kLp2cdHQYDNFte6nt23VAZkQ==
+
+"@react-spring/shared@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.4.tgz#f9cc66ac5308a77293330a18518e34121f4008c1"
+  integrity sha512-ZEr4l2BxmyFRUvRA2VCkPfCJii4E7cGkwbjmTBx1EmcGrOnde/V2eF5dxqCTY3k35QuCegkrWe0coRJVkh8q2Q==
+  dependencies:
+    "@react-spring/rafz" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/three@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.4.tgz#849c97658a6e1410b6f823ad21e2ee33feada820"
+  integrity sha512-ljFig7XW099VWwRPKPUf+4yYLivp/sSWXN3oO5SJOF/9BSoV1quS/9chZ5Myl5J14od3CsHf89Tv4FdlX5kHlA==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/types@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.4.tgz#2365ce9d761f548a9adcb2cd68714bf26765a5de"
+  integrity sha512-zHUXrWO8nweUN/ISjrjqU7GgXXvoEbFca1CgiE0TY0H/dqJb3l+Rhx8ecPVNYimzFg3ZZ1/T0egpLop8SOv4aA==
+
+"@react-spring/web@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.4.tgz#c6d5464a954bfd0d7bc90117050f796a95ebfa08"
+  integrity sha512-vtPvOalLFvuju/MDBtoSnCyt0xXSL6Amyv82fljOuWPl1yGd4M1WteijnYL9Zlriljl0a3oXcPunAVYTD9dbDQ==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/zdog@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.4.tgz#db1d1924fe9920e917d889c4d3bb138bd0885cf1"
+  integrity sha512-rv7ptedS37SHr6yuCbRkUErAzAhebdgt8f4KUtZWzseC+7qLNkaZWf+uujgsb881qAuX9b9yz8rre9UKeYepgw==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
 "@rushstack/eslint-patch@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz#023d72a5c4531b4ce204528971700a78a85a0c50"
@@ -1065,6 +1150,11 @@ acorn@^7.4.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
+  integrity sha1-0ME1RB+oAUqBN5BFMQlvZ/KPJjo=
+
 aframe-extras@^6.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/aframe-extras/-/aframe-extras-6.1.1.tgz#6f158b6c4da12e77d00fd0b97dfe1c72245327df"
@@ -2007,6 +2097,15 @@ document-register-element@dmarcos/document-register-element#8ccc532b7f3744be9545
   version "0.5.4"
   resolved "https://codeload.github.com/dmarcos/document-register-element/tar.gz/8ccc532b7f3744be954574caf3072a5fd260ca90"
 
+dom-css@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
+  integrity sha1-/bwtWgFdCj4YcuEUcrvQ57nmogI=
+  dependencies:
+    add-px-to-style "1.0.0"
+    prefix-style "2.0.1"
+    to-camel-case "1.0.0"
+
 dom-walk@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
@@ -2679,6 +2778,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hex-rgb@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-5.0.0.tgz#e2c9eb6a37498d66c5a350a221ed4c2c7d1a92d6"
+  integrity sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==
+
 hey-listen@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
@@ -3740,6 +3844,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
 phin@^2.9.1:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
@@ -3814,6 +3923,11 @@ [email protected]:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
[email protected]:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
+  integrity sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY=
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -3849,7 +3963,7 @@ promise-polyfill@^3.1.0:
   resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-3.1.0.tgz#62952b01d059b115b432763b7ef461b80f6df47d"
   integrity sha1-YpUrAdBZsRW0MnY7fvRhuA9t9H0=
 
[email protected], prop-types@^15.6.2, prop-types@^15.7, prop-types@^15.7.2:
[email protected], prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -3930,6 +4044,13 @@ [email protected]:
   dependencies:
     inherits "~2.0.3"
 
+raf@^3.1.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -3962,6 +4083,15 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
+react-custom-scrollbars-2@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-custom-scrollbars-2/-/react-custom-scrollbars-2-4.4.0.tgz#6cc237abc18f5ab32b5392b336e6f072c2b4cfc1"
+  integrity sha512-I+oxZ9rfHfvYm85jdH2lQqpzwNr/ZAdYB8htm6R/hwRGoIEK31jq+YE6MmFwBzuO7C5zcAtH5HN9vwZxnW61NQ==
+  dependencies:
+    dom-css "^2.0.0"
+    prop-types "^15.5.10"
+    raf "^3.1.0"
+
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -4042,6 +4172,18 @@ [email protected]:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
+react-spring@^9.2.4:
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.4.tgz#9d89b0321664d594f957dca9459b13d94b3dfa39"
+  integrity sha512-bMjbyTW0ZGd+/h9cjtohLqCwOGqX2OuaTvalOVfLCGmhzEg/u3GgopI3LAm4UD2Br3MNdVdGgNVoESg4MGqKFQ==
+  dependencies:
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/konva" "~9.2.0"
+    "@react-spring/native" "~9.2.0"
+    "@react-spring/three" "~9.2.0"
+    "@react-spring/web" "~9.2.0"
+    "@react-spring/zdog" "~9.2.0"
+
 react-style-singleton@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -4658,11 +4800,23 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
+  integrity sha1-GlYFSy+daWKYzmamCJcyK29CPkY=
+  dependencies:
+    to-space-case "^1.0.0"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
+to-no-case@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
+  integrity sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo=
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -4670,6 +4824,13 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+to-space-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
+  integrity sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=
+  dependencies:
+    to-no-case "^1.0.0"
+
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
@@ -4790,6 +4951,11 @@ use-callback-ref@^1.2.1, use-callback-ref@^1.2.3:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
   integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
 
+use-constant@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/use-constant/-/use-constant-1.1.0.tgz#76d36a0edf16d4cc8565361f522b55da5f8f3f22"
+  integrity sha512-yrflEfv7Xv/W8WlYV6nwRH01K+2BpR4cWxuzY03yPRjYZuHixhGlvnJN5O2bRYrXGpJ4zy8QjFABGIQ2QXeBOA==
+
 use-sidecar@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"