Skip to content

Commit 97985f9

Browse files
mykalmaxmykalmax
authored
[UI] Change primary color and add dark theme support (#566)
* reset editor style * set colors and fonts * add dark/light switch * fix icons colors * adjust button component for new colors * apply color to toggle * adjust divider and toggle * fix colors for editor and split * fix gray color to nutral * fix colors in task and active plan * fix gray color * add dark/light theme for code mirror * Update Editor.tsx * switch run plan button to primary blue * fix colors for dark theme * add background for pop up for actiuve plan * fix typo * fix formatting
1 parent a7701c8 commit 97985f9

39 files changed

Lines changed: 894 additions & 415 deletions

‎web/client/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@
66
name="viewport"
77
content="width=device-width, initial-scale=1.0"
88
/>
9-
<title>SQLMesh</title>
10-
<link
11-
rel="shortcut icon"
12-
href="/favicons/favicon.ico"
13-
/>
9+
<title>Tobiko</title>
1410
<link
1511
rel="preconnect"
1612
href="https://fonts.googleapis.com"
@@ -21,7 +17,7 @@
2117
crossorigin
2218
/>
2319
<link
24-
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
20+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
2521
rel="stylesheet"
2622
/>
2723
</head>

‎web/client/package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"react-router-dom": "^6.9.0",
3434
"react-split": "^2.0.14",
3535
"reactflow": "^11.6.1",
36+
"thememirror": "^2.0.1",
3637
"zustand": "^4.3.6"
3738
},
3839
"devDependencies": {

‎web/client/src/context/theme.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {
2+
createContext,
3+
type ReactNode,
4+
useContext,
5+
useEffect,
6+
useState,
7+
} from 'react'
8+
import useLocalStorage from '~/hooks/useLocalStorage'
9+
10+
export const EnumColorScheme = {
11+
Light: 'light',
12+
Dark: 'dark',
13+
} as const
14+
15+
export type ColorScheme = KeyOf<typeof EnumColorScheme>
16+
17+
export interface ThemeMode {
18+
mode: ColorScheme
19+
toggleColorScheme?: () => void
20+
}
21+
22+
const initial = {
23+
mode: EnumColorScheme.Light,
24+
}
25+
26+
export const ThemeContext = createContext<ThemeMode>(initial)
27+
28+
export default function ThemeProvider({
29+
children,
30+
}: {
31+
children: ReactNode
32+
}): JSX.Element {
33+
const [getColorSchemeStorage, setColorSchemeStorage] = useLocalStorage<{
34+
mode: ColorScheme
35+
}>('color-scheme')
36+
const colorSchemeLocalStorage =
37+
getColorSchemeStorage()?.mode ??
38+
(window.matchMedia('(prefers-color-scheme: dark)').matches
39+
? EnumColorScheme.Dark
40+
: EnumColorScheme.Light)
41+
const [colorScheme, setTheme] = useState<ColorScheme>(colorSchemeLocalStorage)
42+
43+
useEffect(() => {
44+
setColorSchemeStorage({ mode: colorScheme })
45+
document.documentElement.setAttribute('mode', colorScheme)
46+
}, [colorScheme])
47+
48+
return (
49+
<ThemeContext.Provider
50+
value={{
51+
mode: colorScheme,
52+
toggleColorScheme() {
53+
setTheme(
54+
colorScheme === EnumColorScheme.Light
55+
? EnumColorScheme.Dark
56+
: EnumColorScheme.Light,
57+
)
58+
},
59+
}}
60+
>
61+
{children}
62+
</ThemeContext.Provider>
63+
)
64+
}
65+
66+
export function useColorScheme(): ThemeMode {
67+
return useContext(ThemeContext)
68+
}

‎web/client/src/index.css‎

Lines changed: 202 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
@layer components {
6+
.input-ring {
7+
@apply ring-accent-200 ring-offset-accent-500;
8+
}
9+
10+
.input-ring:focus {
11+
@apply outline-none ring-offset-2 ring-4;
12+
}
13+
}
14+
515
@layer base {
616
:root {
717
font-synthesis: none;
@@ -10,19 +20,204 @@
1020
-moz-osx-font-smoothing: grayscale;
1121
-webkit-text-size-adjust: 100%;
1222

13-
--color-gray-100: hsl(0, 0%, 96%);
14-
--color-gray-600: hsl(0, 0%, 32%);
23+
--color-brand: hsla(24, 100%, 60%, 1);
24+
--color-primary: hsla(198, 100%, 63%, 1);
25+
--color-secondary: hsla(216, 100%, 50%, 1);
26+
--color-accent: hsla(264, 100%, 60%, 1);
27+
--color-success: hsla(111, 66%, 55%, 1);
28+
--color-warning: hsla(30, 94%, 62%, 1);
29+
--color-danger: hsla(1, 100%, 64%, 1);
30+
--color-neutral: hsla(0, 0%, 50%, 1);
31+
32+
/* Brand */
33+
--color-brand-100: hsla(37, 100%, 92%, 1);
34+
--color-brand-200: hsla(34, 100%, 84%, 1);
35+
--color-brand-300: hsla(31, 100%, 76%, 1);
36+
--color-brand-400: hsla(27, 100%, 70%, 1);
37+
--color-brand-500: var(--color-brand);
38+
--color-brand-600: hsla(20, 72%, 50%, 1);
39+
--color-brand-700: hsla(16, 76%, 41%, 1);
40+
--color-brand-800: hsla(13, 80%, 32%, 1);
41+
--color-brand-900: hsla(10, 86%, 26%, 1);
42+
43+
/* Primary */
44+
--color-primary-10: hsla(198, 100%, 63%, 0.1);
45+
--color-primary-20: hsla(198, 100%, 63%, 0.2);
46+
--color-primary-30: hsla(198, 100%, 63%, 0.3);
47+
--color-primary-40: hsla(198, 100%, 63%, 0.4);
48+
--color-primary-50: hsla(198, 100%, 63%, 0.5);
49+
--color-primary-60: hsla(198, 100%, 63%, 0.6);
50+
--color-primary-70: hsla(198, 100%, 63%, 0.7);
51+
--color-primary-80: hsla(198, 100%, 63%, 0.8);
52+
--color-primary-90: hsla(198, 100%, 63%, 0.9);
53+
--color-primary-100: hsla(183, 100%, 93%, 1);
54+
--color-primary-200: hsla(186, 100%, 85%, 1);
55+
--color-primary-300: hsla(191, 100%, 78%, 1);
56+
--color-primary-400: hsla(194, 100%, 72%, 1);
57+
--color-primary-500: var(--color-primary);
58+
--color-primary-600: hsla(202, 70%, 52%, 1);
59+
--color-primary-700: hsla(206, 69%, 42%, 1);
60+
--color-primary-800: hsla(210, 75%, 33%, 1);
61+
--color-primary-900: hsla(214, 82%, 26%, 1);
62+
63+
/* Secondary */
64+
--color-secondary-10: hsla(216, 100%, 50%, 0.1);
65+
--color-secondary-20: hsla(216, 100%, 50%, 0.2);
66+
--color-secondary-30: hsla(216, 100%, 50%, 0.3);
67+
--color-secondary-40: hsla(216, 100%, 50%, 0.4);
68+
--color-secondary-50: hsla(216, 100%, 50%, 0.5);
69+
--color-secondary-60: hsla(216, 100%, 50%, 0.6);
70+
--color-secondary-70: hsla(216, 100%, 50%, 0.7);
71+
--color-secondary-80: hsla(216, 100%, 50%, 0.8);
72+
--color-secondary-90: hsla(216, 100%, 50%, 0.9);
73+
--color-secondary-100: hsla(207, 100%, 90%, 1);
74+
--color-secondary-200: hsla(209, 100%, 80%, 1);
75+
--color-secondary-300: hsla(211, 100%, 70%, 1);
76+
--color-secondary-400: hsla(213, 100%, 62%, 1);
77+
--color-secondary-500: var(--color-secondary);
78+
--color-secondary-600: hsla(219, 100%, 43%, 1);
79+
--color-secondary-700: hsla(221, 100%, 36%, 1);
80+
--color-secondary-800: hsla(223, 100%, 29%, 1);
81+
--color-secondary-900: hsla(226, 100%, 24%, 1);
1582

16-
--color-secondary-100: hsl(264, 100%, 98%);
17-
--color-secondary-500: hsl(264, 100%, 60%);
83+
/* Accent */
84+
--color-accent-100: hsla(264, 100%, 98%, 1);
85+
--color-accent-200: hsla(260, 100%, 90%, 1);
86+
--color-accent-300: hsla(260, 100%, 80%, 1);
87+
--color-accent-400: hsla(260, 100%, 70%, 1);
88+
--color-accent-500: var(--color-accent);
89+
--color-accent-600: hsla(264, 100%, 50%, 1);
90+
--color-accent-700: hsla(264, 100%, 40%, 1);
91+
--color-accent-800: hsla(264, 100%, 20%, 1);
92+
--color-accent-900: hsla(264, 100%, 8%, 1);
93+
94+
/* Success */
95+
--color-success-10: hsla(111, 66%, 55%, 0.1);
96+
--color-success-100: hsla(92, 90%, 92%, 1);
97+
--color-success-200: hsla(98, 90%, 84%, 1);
98+
--color-success-300: hsla(102, 81%, 75%, 1);
99+
--color-success-400: hsla(106, 72%, 66%, 1);
100+
--color-success-500: var(--color-success);
101+
--color-success-600: hsla(116, 61%, 45%, 1);
102+
--color-success-700: hsla(120, 67%, 36%, 1);
103+
--color-success-800: hsla(125, 74%, 28%, 1);
104+
--color-success-900: hsla(130, 81%, 22%, 1);
105+
106+
/* Warning */
107+
--color-warning-10: hsla(30, 94%, 62%, 0.1);
108+
--color-warning-100: hsla(42, 95%, 92%, 1);
109+
--color-warning-200: hsla(39, 97%, 85%, 1);
110+
--color-warning-300: hsla(36, 97%, 77%, 1);
111+
--color-warning-400: hsla(33, 95%, 71%, 1);
112+
--color-warning-500: var(--color-warning);
113+
--color-warning-600: hsla(27, 67%, 51%, 1);
114+
--color-warning-700: hsla(24, 69%, 42%, 1);
115+
--color-warning-800: hsla(21, 75%, 32%, 1);
116+
--color-warning-900: hsla(18, 82%, 26%, 1);
117+
118+
/* Danger */
119+
--color-danger-10: hsla(21, 100%, 50%, 0.1);
120+
--color-danger-100: hsla(21, 100%, 93%, 1);
121+
--color-danger-200: hsla(16, 100%, 86%, 1);
122+
--color-danger-300: hsla(11, 100%, 78%, 1);
123+
--color-danger-400: hsla(6, 100%, 73%, 1);
124+
--color-danger-500: var(--color-danger);
125+
--color-danger-600: hsla(356, 70%, 53%, 1);
126+
--color-danger-700: hsla(351, 67%, 43%, 1);
127+
--color-danger-800: hsla(345, 73%, 33%, 1);
128+
--color-danger-900: hsla(341, 79%, 27%, 1);
129+
130+
/* Neutral */
131+
--color-neutral-10: hsla(190, 8%, 50%, 0.1);
132+
--color-neutral-20: hsla(190, 8%, 50%, 0.2);
133+
--color-neutral-30: hsla(190, 8%, 50%, 0.3);
134+
--color-neutral-40: hsla(190, 8%, 50%, 0.4);
135+
--color-neutral-50: hsla(190, 8%, 50%, 0.5);
136+
--color-neutral-60: hsla(190, 8%, 50%, 0.6);
137+
--color-neutral-70: hsla(190, 8%, 50%, 0.7);
138+
--color-neutral-80: hsla(190, 8%, 50%, 0.8);
139+
--color-neutral-90: hsla(190, 8%, 50%, 0.9);
140+
--color-neutral-100: hsl(190, 8%, 98%);
141+
--color-neutral-200: hsl(190, 8%, 86%);
142+
--color-neutral-300: hsl(190, 8%, 74%);
143+
--color-neutral-400: hsl(190, 8%, 66%);
144+
--color-neutral-500: var(--color-neutral);
145+
--color-neutral-600: hsl(190, 8%, 38%);
146+
--color-neutral-700: hsl(202, 8%, 26%);
147+
--color-neutral-800: hsl(214, 8%, 14%);
148+
--color-neutral-900: hsl(226, 8%, 4%);
149+
150+
--color-dark-darker: hsl(226, 16%, 4%);
151+
--color-dark: hsl(226, 24%, 8%);
152+
--color-dark-lighter: hsl(226, 32%, 16%);
153+
154+
--color-light-darker: hsl(0, 0%, 92%);
155+
--color-light: hsl(0, 0%, 100%);
156+
--color-light-lighter: hsl(0, 0%, 98%);
157+
158+
/* General */
159+
--unit: 16px;
160+
--leading: 1.5;
18161
}
19162
}
20163

164+
html[mode='dark'] {
165+
--color-theme-darker: var(--color-dark-darker);
166+
--color-theme: var(--color-dark);
167+
--color-theme-lighter: var(--color-dark-lighter);
168+
169+
--color-text-darker: var(--color-neutral-300);
170+
--color-text: var(--color-neutral-200);
171+
--color-text-lighter: var(--color-neutral-100);
172+
173+
--color-divider-darker: var(--color-theme-darker);
174+
--color-divider: var(--color-theme-lighter);
175+
--color-divider-lighter: var(--color-neutral-100);
176+
177+
--color-logo-darker: var(--color-neutral-300);
178+
--color-logo: var(--color-neutral-200);
179+
--color-logo-lighter: var(--color-neutral-100);
180+
181+
--color-editor-text: var(--color-neutral-300);
182+
--color-editor-active-line-text: var(--color-neutral-100);
183+
184+
--color-graph-edge: var(--color-primary-50);
185+
}
186+
187+
html[mode='light'] {
188+
--color-theme-darker: var(--color-light-darker);
189+
--color-theme: var(--color-light);
190+
--color-theme-lighter: var(--color-light-lighter);
191+
192+
--color-text-darker: var(--color-neutral-900);
193+
--color-text: var(--color-neutral-800);
194+
--color-text-lighter: var(--color-neutral-700);
195+
196+
--color-divider-darker: var(--color-neutral-500);
197+
--color-divider: var(--color-neutral-200);
198+
--color-divider-lighter: var(--color-neutral-300);
199+
200+
--color-logo-darker: var(--color-neutral-900);
201+
--color-logo: var(--color-neutral-800);
202+
--color-logo-lighter: var(--color-neutral-300);
203+
204+
--color-editor-text: var(--color-neutral-600);
205+
--color-editor-active-line-text: var(--color-neutral-800);
206+
207+
--color-graph-edge: var(--color-secondary-50);
208+
}
209+
21210
html {
22-
font-size: 16px;
23-
line-height: 1.5;
24211
width: 100%;
25212
height: 100%;
213+
font-size: var(--unit);
214+
line-height: var(--leading);
215+
font-weight: 600;
216+
background: var(--color-theme);
217+
color: var(--color-text);
218+
219+
--color-editor: var(--color-theme);
220+
--color-overlay: var(--color-dark-darker);
26221
}
27222

28223
@font-face {
@@ -77,6 +272,6 @@ html {
77272
}
78273

79274
.scrollbar::-webkit-scrollbar-thumb {
80-
background: hsl(264, 100%, 60%);
275+
background: var(--color-brand);
81276
border-radius: 1rem;
82277
}

0 commit comments

Comments
 (0)