diff options
| -rw-r--r-- | pages/_app.tsx | 46 | ||||
| -rw-r--r-- | pages/index.tsx | 21 |
2 files changed, 41 insertions, 26 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index c9dc93f..8acf76b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,8 +1,7 @@ import '../styles/globals.css' import type { AppProps } from 'next/app' -import { ChakraProvider } from '@chakra-ui/react' +import { ChakraProvider, extendTheme } from '@chakra-ui/react' import { useEffect, useState, useMemo } from 'react' -import { extendTheme } from '@chakra-ui/react' import * as d3int from 'd3-interpolate' function MyApp({ Component, pageProps }: AppProps) { @@ -37,30 +36,38 @@ function MyApp({ Component, pageProps }: AppProps) { const trackTheme = new EventSource('http://127.0.0.1:35901/theme') trackTheme.addEventListener('message', (e) => { const themeData = JSON.parse(e.data) + if (!themeData.base4) { + const bgfgInterpolate = d3int.interpolate(emacsTheme.bg, emacsTheme.fg) + themeData.base1 = bgfgInterpolate(0.1) + themeData.base2 = bgfgInterpolate(0.2) + themeData.base3 = bgfgInterpolate(0.3) + themeData.base4 = bgfgInterpolate(0.4) + themeData.base5 = bgfgInterpolate(0.5) + themeData.base6 = bgfgInterpolate(0.6) + themeData.base7 = bgfgInterpolate(0.7) + themeData.base8 = bgfgInterpolate(0.8) + } setEmacsTheme(themeData) }) }, []) + const borderColor = emacsTheme.violet + 'aa' + const missingColor = d3int.interpolate(emacsTheme.base1, emacsTheme.base2)(0.2) const theme = useMemo(() => { - const borderColor = emacsTheme.violet + 'aa' - const bgfgInterpolate = d3int.interpolate(emacsTheme.bg, emacsTheme.fg) - const themeColors = { + return { colors: { white: emacsTheme.bg, black: emacsTheme.fg, gray: { - 100: emacsTheme.base1 ?? bgfgInterpolate(0.1), - 200: d3int.interpolate(emacsTheme.base1, emacsTheme.base2)(0.2) ?? bgfgInterpolate(0.2), - 300: emacsTheme.base2 ?? bgfgInterpolate(0.3), - 400: emacsTheme.base3 ?? bgfgInterpolate(0.4), - 500: emacsTheme.base4 ?? bgfgInterpolate(0.5), - 600: emacsTheme.base5 ?? bgfgInterpolate(0.6), - 700: emacsTheme.base6 ?? bgfgInterpolate(0.7), - 800: emacsTheme.base7 ?? bgfgInterpolate(0.8), - 900: emacsTheme.base8 ?? bgfgInterpolate(0.9), - inter: emacsTheme.base4 - ? d3int.interpolate(emacsTheme.base4, emacsTheme.base3) - : bgfgInterpolate(0.45), + 100: emacsTheme.base1, + 200: missingColor, + 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, @@ -82,7 +89,6 @@ function MyApp({ Component, pageProps }: AppProps) { }, purple: { 500: emacsTheme.violet, - inter: d3int.interpolate(emacsTheme.base4 ?? bgfgInterpolate(0.5), emacsTheme.violet), }, pink: { 500: emacsTheme.magenta, @@ -99,11 +105,11 @@ function MyApp({ Component, pageProps }: AppProps) { outline: '0 0 0 3px ' + borderColor, }, } - return extendTheme(themeColors) }, [JSON.stringify(emacsTheme)]) + const extendedTheme = extendTheme(theme) return ( - <ChakraProvider theme={theme}> + <ChakraProvider theme={extendedTheme}> <Component {...pageProps} /> </ChakraProvider> ) diff --git a/pages/index.tsx b/pages/index.tsx index 59a15f2..8fc957f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,7 @@ import React, { ComponentPropsWithoutRef, useEffect, useRef, useState, useMemo } from 'react' import { usePersistantState } from '../util/persistant-state' const d3promise = import('d3-force-3d') +import * as d3int from 'd3-interpolate' import type { ForceGraph2D as TForceGraph2D, @@ -379,6 +380,14 @@ export const Graph = function (props: GraphProps) { } }, [hoverNode]) const theme = useTheme() + const interPurple = useMemo( + () => d3int.interpolate(theme.colors.gray[500], theme.colors.purple[500]), + [theme], + ) + const interGray = useMemo( + () => d3int.interpolate(theme.colors.gray[500], theme.colors.gray[400]), + [theme], + ) const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = { graphData: scopedGraphData, width: windowWidth, @@ -396,11 +405,11 @@ export const Graph = function (props: GraphProps) { } return Object.keys(highlightedNodes).length === 0 ? lastHoverNode.current?.id! === node.id! - ? theme.colors.purple['inter'](opacity) - : theme.colors.gray['inter'](opacity) + ? interPurple(opacity) + : interGray(opacity) : highlightedNodes[node.id!] - ? theme.colors.purple['inter'](opacity) - : theme.colors.gray['inter'](opacity) + ? interPurple(opacity) + : interGray(opacity) } if (node.id === emacsNodeId) { return theme.colors['red'][500] @@ -532,9 +541,9 @@ export const Graph = function (props: GraphProps) { (link.source as NodeObject).id! === lastHoverNode.current?.id! || (link.target as NodeObject).id! === lastHoverNode.current?.id! return linkIsHighlighted - ? theme.colors.purple['inter'](opacity) /*the.colors.purple[500]*/ + ? interPurple(opacity) /*the.colors.purple[500]*/ : linkWasHighlighted - ? theme.colors.purple['inter'](opacity) /*the.colors.purple[500]*/ + ? interPurple(opacity) /*the.colors.purple[500]*/ : theme.colors.gray[500] } else { return linkIsHighlighted ? theme.colors.purple[500] : theme.colors.gray[500] |