1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
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)
})
}, [])
const theme = useMemo(() => {
//useMemo(() => {
//console.log("theme change")
const borderColor = emacsTheme.violet + 'aa'
return 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,
},
})
}, [JSON.stringify(emacsTheme)])
// }, [emacsTheme.base1])
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
|
