Skip to content

Commit 1843be3

Browse files
author
rocketraccoon
committed
feat: dark theme support
1 parent a514340 commit 1843be3

51 files changed

Lines changed: 177 additions & 116 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎lib/constants/local-storage.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
export enum LocalStorageKey {
22
UIMode = 'ui-mode',
3-
TimeTravelUseRecommendedSettings = 'time-travel-use-recommended-settings'
3+
TimeTravelUseRecommendedSettings = 'time-travel-use-recommended-settings',
4+
Theme = 'app.theme',
5+
}
6+
7+
export enum Theme {
8+
System = 'system',
9+
Light = 'light',
10+
Dark = 'dark',
411
}
512

613
export const TIME_TRAVEL_PLAYER_VISIBILITY_KEY = 'time-travel-player-visibility';

‎lib/static/new-ui.css‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,21 @@
1010

1111
--color-pink-100: #fce0ff;
1212
--color-pink-600: #be00ffbf;
13+
}
14+
15+
.g-root {
16+
--g-font-family-sans: 'Jost', sans-serif;
17+
--g-color-text-danger-heavy: #e9043a;
18+
--g-color-text-brand-heavy: var(--g-color-private-color-550-solid);
19+
font-family: var(--g-font-family-sans), sans-serif !important;
20+
}
21+
22+
.app {
23+
background-color: #eee;
24+
}
25+
26+
.g-root_theme_light {
27+
--g-color-base-background: #fff;
1328

1429
--color-neutral-50: oklch(0.985 0 0);
1530
--color-neutral-100: oklch(0.97 0 0);
@@ -36,12 +51,25 @@
3651
--color-amber-950: oklch(27.9% 0.077 45.635);
3752
}
3853

39-
.g-root {
40-
--g-font-family-sans: 'Jost', sans-serif;
41-
--g-color-base-background: #eee;
42-
--g-color-text-danger-heavy: #e9043a;
43-
--g-color-text-brand-heavy: var(--g-color-private-color-550-solid);
44-
font-family: var(--g-font-family-sans), sans-serif !important;
54+
.g-root_theme_dark {
55+
--color-link: #818cf8;
56+
--color-link-hover: #c7d2fe;
57+
58+
--color-neutral-50: oklch(0.18 0 0);
59+
--color-neutral-100: oklch(0.24 0 0);
60+
--color-neutral-200: oklch(0.30 0 0);
61+
--color-neutral-300: oklch(0.40 0 0);
62+
--color-neutral-400: oklch(0.60 0 0);
63+
--color-neutral-500: oklch(0.72 0 0);
64+
--color-neutral-600: oklch(0.83 0 0);
65+
--color-neutral-700: oklch(0.90 0 0);
66+
67+
--color-pink-100: #3a0044;
68+
--color-pink-600: #de77ff;
69+
70+
--color-amber-100: oklch(27.9% 0.077 45.635);
71+
--color-amber-200: oklch(41.4% 0.112 45.904);
72+
--color-amber-700: oklch(82.8% 0.189 84.429);
4573
}
4674

4775
body {
@@ -108,7 +136,7 @@ body {
108136
}
109137

110138
.text-hint {
111-
color: var(--g-color-private-black-400);
139+
color: var(--g-color-text-secondary);
112140
font-weight: 500;
113141
}
114142

@@ -126,8 +154,8 @@ b {
126154

127155

128156
.toaster {
129-
border: 1px solid rgb(229, 231, 235);
130-
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px !important;
157+
border: 1px solid var(--g-color-line-generic-solid);
158+
box-shadow: var(--g-color-base-background) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px !important;
131159
margin-right: 10px;
132160
margin-bottom: 20px !important;
133161
}
@@ -157,7 +185,7 @@ b {
157185
}
158186

159187
.toaster :global(.g-toast__content) {
160-
color: var(--g-color-private-black-400);
188+
color: var(--g-color-text-secondary);
161189
}
162190

163191
.toaster__icon--error {

‎lib/static/new-ui/app/App.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {ThemeProvider, Toaster, ToasterComponent, ToasterProvider} from '@gravit
33
import '@gravity-ui/uikit/styles/fonts.css';
44
import '@gravity-ui/uikit/styles/styles.css';
55
import React, {ReactNode, StrictMode} from 'react';
6+
import useLocalStorage from '@/static/hooks/useLocalStorage';
7+
import {LocalStorageKey, Theme} from '@/constants/local-storage';
68
import {Provider} from 'react-redux';
79
import {HashRouter, Navigate, Route, Routes} from 'react-router-dom';
810

@@ -43,11 +45,12 @@ const pages = [
4345

4446
export function App(): ReactNode {
4547
const customScripts = (store.getState() as State).config.customScripts;
48+
const [theme] = useLocalStorage(LocalStorageKey.Theme, Theme.System);
4649

4750
return <StrictMode>
4851
<ErrorHandler.Boundary fallback={<ErrorHandler.FallbackAppCrash />}>
4952
<CustomScripts scripts={customScripts} />
50-
<ThemeProvider theme='light'>
53+
<ThemeProvider theme={theme} rootClassName="app">
5154
<ToasterProvider toaster={toaster}>
5255
<Provider store={store}>
5356
<MetrikaScript/>

‎lib/static/new-ui/components/AdaptiveSelect/index.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.select-popup {
2-
--g-color-text-info: #000;
2+
--g-color-text-info: var(--g-color-text-primary);
33

44
font-size: var(--g-text-body-1-font-size);
55
}

‎lib/static/new-ui/components/AsidePanel/index.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.container {
2-
background-color: #fff;
2+
background-color: var(--g-color-base-background);
33
padding: 20px;
44
width: 440px;
55
height: 100%;

‎lib/static/new-ui/components/AttemptPickerItem/index.module.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@
2828
}
2929

3030
.attempt-picker-item--skipped {
31-
background-color: var(--g-color-private-black-50);
32-
color: var(--g-color-private-black-600);
33-
--box-shadow-color: var(--g-color-private-black-250);
34-
--g-button-text-color-hover: var(--g-color-private-black-700);
31+
background-color: var(--g-color-base-generic);
32+
color: var(--g-color-text-secondary);
33+
--box-shadow-color: var(--g-color-line-generic-solid);
34+
--g-button-text-color-hover: var(--g-color-text-primary);
3535
}
3636

3737
.attempt-picker-item--success {

‎lib/static/new-ui/components/Badge/index.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
.hint code {
2525
font-size: 12px;
2626
background: var(--g-color-base-generic);
27-
color: var(--g-color-private-black-400);
27+
color: var(--g-color-text-secondary);
2828
padding: 2px 2px;
2929
border-radius: 4px;
3030
}

‎lib/static/new-ui/components/Card/AnimatedAppearCard.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,19 @@
1717
}
1818

1919
.animated-appear-card {
20-
background-color: #eee;
20+
background-color: var(--g-color-base-generic);
2121
position: absolute;
2222
width: 100%;
2323
height: 100%;
2424
z-index: 10;
25-
box-shadow: 0 0 0 2px #eee;
25+
box-shadow: 0 0 0 2px var(--g-color-base-generic);
2626
animation: border-pulse 5s ease forwards;
2727
background-image: conic-gradient(from var(--gradient-angle) at -10% 100%, var(--from-color) 0%, var(--to-color) 100%);
2828
padding: 1px;
2929
}
3030

3131
.background-overlay {
32-
background-color: #eee;
32+
background-color: var(--g-color-base-generic);
3333
width: 100%;
3434
height: 100%;
3535
border-radius: 10px;

‎lib/static/new-ui/components/Card/EmptyReportCard.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
}
1515

1616
.card-title {
17-
color: #000;
17+
color: var(--g-color-text-primary);
1818
margin-top: 16px;
1919
}
2020

‎lib/static/new-ui/components/Card/KeepDraggingToHideCard.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747

4848
.hint {
4949
font-size: 18px;
50-
color: white;
50+
color: var(--g-color-text-light-primary);
5151
font-weight: 500;
5252
opacity: 1;
5353
white-space: nowrap;

0 commit comments

Comments
 (0)