Skip to content

Commit e9dff1e

Browse files
antonreshetovantonreshetov
authored
feat: add 4 light & 4 dark app theme (#26)
1 parent 9e3e301 commit e9dff1e

29 files changed

+411
-106
lines changed

‎src/main/store/module/preferences.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default new Store<PreferencesStore>({
1414
defaults: {
1515
storagePath: defaultPath,
1616
backupPath,
17+
theme: 'light:chrome',
1718
editor: {
1819
wrap: 'free',
1920
fontFamily: 'SF Mono, Consolas, Menlo',
@@ -22,7 +23,8 @@ export default new Store<PreferencesStore>({
2223
tabSize: 2,
2324
trailingComma: 'none',
2425
semi: false,
25-
singleQuote: true
26+
singleQuote: true,
27+
theme: 'github'
2628
}
2729
}
2830
})

‎src/renderer/App.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const snippetStore = useSnippetStore()
3939
const isUpdateAvailable = ref(false)
4040
4141
const init = () => {
42+
const theme = store.preferences.get('theme')
4243
const isValid = appStore.isEditorSettingsValid(
4344
store.preferences.get('editor')
4445
)
@@ -48,6 +49,12 @@ const init = () => {
4849
appStore.sizes.sidebar = store.app.get('sidebarWidth')
4950
appStore.sizes.snippetList = store.app.get('snippetListWidth')
5051
52+
if (theme) {
53+
appStore.setTheme(theme)
54+
} else {
55+
appStore.setTheme('light:chrome')
56+
}
57+
5158
trackAppUpdate()
5259
}
5360

‎src/renderer/assets/scss/base.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ h6 {
4545
text-transform: uppercase;
4646
margin: var(--spacing-xs) 0;
4747
font-weight: 700;
48-
color: var(--color-contrast-medium);
4948
}
5049

5150
.gutter-line {
@@ -69,6 +68,6 @@ h6 {
6968

7069
.desc {
7170
font-size: var(--text-sm);
72-
color: var(--color-contrast-medium);
71+
color: var(--color-text-3);
7372
margin-top: var(--spacing-xs);
7473
}

‎src/renderer/assets/scss/main.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
@import './variables';
33
@import './markdown';
44
@import './base';
5-
@import './vendor';
65
@import './ace';
7-
@import './themes';
6+
@import './themes';
7+
@import './vendor';

‎src/renderer/assets/scss/themes.scss

Lines changed: 177 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,179 @@
1-
[data-theme='light'] {
2-
.snippet-list-item--selected {
3-
background-color: var(--color-contrast-lower);
4-
&.focus {
5-
background-color: var(--color-primary);
6-
.title,
7-
.meta {
8-
color: #fff;
9-
}
10-
}
11-
}
1+
[data-theme='light:solarized'] {
2+
--color-primary: hsl(44, 84%, 54%);
3+
4+
--color-bg: hsl(44, 87%, 94%);
5+
6+
--color-contrast-lower: hsl(44, 84%, 90%);
7+
--color-contrast-lower-alt: hsl(44, 0%, 98%);
8+
--color-contrast-lower-alt2: hsl(44, 60%, 94%);
9+
--color-contrast-lower-alt3: hsl(44, 60%, 85%);
10+
--color-contrast-lower-alt4: hsl(44, 60%, 75%);
11+
--color-contrast-low: hsl(44, 60%, 60%);
12+
--color-contrast-low-alt: hsl(44, 60%, 70%);
13+
--color-contrast-medium: hsl(44, 60%, 40%);
14+
--color-contrast-high: hsl(44, 60%, 30%);
15+
--color-contrast-higher: hsl(44, 60%, 10%);
16+
17+
--color-snippet-selected: var(--color-contrast-lower-alt2);
18+
19+
--color-sidebar: #fff;
20+
--color-sidebar-item-selected: var(--color-contrast-lower-alt3);
21+
22+
--color-border: var(--color-contrast-lower-alt3);
23+
24+
--color-button: hsl(44, 60%, 85%);
25+
--color-button-hover: var(--color-contrast-low-alt);
26+
--color-button-action-hover: var(--color-contrast-lower-alt3);
27+
28+
--color-checkbox: var(--color-contrast-lower-alt);
29+
30+
--color-input: var(--color-contrast-lower-alt);
31+
32+
--color-select: var(--color-contrast-lower-alt);
33+
34+
--color-menu-selected: var(--color-contrast-lower-alt3);
35+
36+
--color-tag-delete: var(--color-contrast-lower-alt4);
1237
}
13-
[data-theme='dark'] {
14-
.snippet-list-item--selected {
15-
background-color: var(--color-contrast-lower);
16-
&.focus {
17-
background-color: var(--color-primary);
18-
.title,
19-
.meta {
20-
color: #fff;
21-
}
22-
}
23-
.title,
24-
.meta {
25-
color: #fff;
26-
}
27-
}
38+
39+
[data-theme='dark:one'] {
40+
--color-primary: hsl(215, 69%, 45%);
41+
42+
--color-bg: hsl(220, 13%, 18%);
43+
44+
--color-contrast-lower: hsl(220, 13%, 20%);
45+
--color-contrast-lower-alt: hsl(220, 13%, 22%);
46+
--color-contrast-lower-alt2: hsl(220, 13%, 25%);
47+
--color-contrast-lower-alt3: hsl(220, 13%, 30%);
48+
--color-contrast-lower-low: hsl(220, 13%, 40%);
49+
--color-contrast-medium: hsl(220, 13%, 50%);
50+
51+
--color-border: var(--color-contrast-lower-alt2);
52+
53+
--color-snippet-list: var(--color-bg);
54+
--color-snippet-selected: var(--color-contrast-lower-alt);
55+
56+
--color-sidebar: var(--color-bg);
57+
--color-sidebar-item-selected: var(--color-contrast-lower-alt);
58+
--color-sidebar-icon: var(--color-text);
59+
60+
--color-text: hsl(0, 0%, 70%);
61+
62+
--color-button: var(--color-contrast-lower-alt);
63+
--color-button-hover: var(--color-contrast-lower-alt2);
64+
--color-button-action: var(--color-contrast-low);
65+
--color-button-action-hover: var(--color-contrast-lower-alt2);
66+
67+
--color-input: var(--color-bg);
68+
69+
--color-menu-selected: var(--color-contrast-lower-alt);
70+
71+
--color-tag-delete: var(--color-contrast-lower-alt3);
2872
}
73+
74+
[data-theme='dark:dracula'] {
75+
--color-primary: hsl(215, 69%, 45%);
76+
77+
// при конвертации в hsl цвет отличается, поэтому оставляем в hex
78+
--color-bg: #282A36;
79+
80+
--color-contrast-lower: hsl(231, 15%, 20%);
81+
--color-contrast-lower-alt: hsl(231, 15%, 22%);
82+
--color-contrast-lower-alt2: hsl(231, 15%, 25%);
83+
--color-contrast-lower-alt3: hsl(231, 15%, 30%);
84+
--color-contrast-lower-low: hsl(231, 15%, 40%);
85+
--color-contrast-lower-medium: hsl(231, 15%, 50%);
86+
87+
--color-snippet-list: var(--color-bg);
88+
--color-snippet-selected: var(--color-contrast-lower-alt2);
89+
90+
--color-sidebar: var(--color-bg);
91+
--color-sidebar-item-selected: var(--color-contrast-lower-alt2);
92+
--color-sidebar-icon: var(--color-text);
93+
94+
--color-border: var(--color-contrast-lower-alt2);
95+
96+
--color-text: hsl(0, 0%, 70%);
97+
98+
--color-button: var(--color-contrast-lower-alt);
99+
--color-button-hover: var(--color-contrast-lower-alt2);
100+
--color-button-action: var(--color-contrast-low);
101+
--color-button-action-hover: var(--color-contrast-lower-alt2);
102+
103+
--color-input: var(--color-bg);
104+
105+
--color-menu-selected: var(--color-contrast-lower-alt2);
106+
107+
--color-tag-delete: var(--color-contrast-lower-alt3);
108+
}
109+
110+
[data-theme='dark:monokai'] {
111+
--color-primary: hsl(215, 69%, 45%);
112+
113+
// при конвертации в hsl цвет отличается, поэтому оставляем в hex
114+
--color-bg: #272822;
115+
116+
--color-contrast-lower: hsl(70, 8%, 20%);
117+
--color-contrast-lower-alt: hsl(70, 8%, 22%);
118+
--color-contrast-lower-alt2: hsl(70, 8%, 25%);
119+
--color-contrast-lower-alt3: hsl(70, 8%, 30%);
120+
--color-contrast-lower-low: hsl(70, 8%, 40%);
121+
--color-contrast-lower-medium: hsl(70, 8%, 50%);
122+
123+
--color-snippet-list: var(--color-bg);
124+
--color-snippet-selected: var(--color-contrast-lower);
125+
126+
--color-sidebar: var(--color-bg);
127+
--color-sidebar-item-selected: var(--color-contrast-lower);
128+
--color-sidebar-icon: var(--color-text);
129+
130+
--color-border: var(--color-contrast-lower-alt2);
131+
132+
--color-text: hsl(0, 0%, 70%);
133+
134+
--color-button: var(--color-contrast-lower-alt);
135+
--color-button-hover: var(--color-contrast-lower-alt2);
136+
--color-button-action: var(--color-contrast-low);
137+
--color-button-action-hover: var(--color-contrast-lower-alt2);
138+
139+
--color-input: var(--color-bg);
140+
141+
--color-menu-selected: var(--color-contrast-lower);
142+
143+
--color-tag-delete: var(--color-contrast-lower-alt3);
144+
}
145+
146+
[data-theme='dark:merbivore'] {
147+
--color-primary: hsl(215, 69%, 45%);
148+
149+
--color-bg: hsl(0, 0%, 11%);
150+
151+
--color-contrast-lower: hsl(0, 0%, 20%);
152+
--color-contrast-lower-alt: hsl(0, 0%, 22%);
153+
--color-contrast-lower-alt2: hsl(0, 0%, 25%);
154+
--color-contrast-lower-alt3: hsl(0, 0%, 30%);
155+
--color-contrast-lower-low: hsl(0, 0%, 40%);
156+
--color-contrast-lower-medium: hsl(0, 0%, 50%);
157+
158+
--color-snippet-list: var(--color-bg);
159+
--color-snippet-selected: var(--color-contrast-lower);
160+
161+
--color-sidebar: var(--color-bg);
162+
--color-sidebar-item-selected: var(--color-contrast-lower);
163+
--color-sidebar-icon: var(--color-text);
164+
165+
--color-border: var(--color-contrast-lower-alt2);
166+
167+
--color-text: hsl(0, 0%, 70%);
168+
169+
--color-button: var(--color-contrast-lower-alt);
170+
--color-button-hover: var(--color-contrast-lower-alt2);
171+
--color-button-action: var(--color-contrast-low);
172+
--color-button-action-hover: var(--color-contrast-lower-alt2);
173+
174+
--color-input: var(--color-bg);
175+
176+
--color-menu-selected: var(--color-contrast-lower);
177+
178+
--color-tag-delete: var(--color-contrast-lower-alt3);
179+
}

‎src/renderer/assets/scss/variables.scss

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,11 @@
2424
--text-xl: calc(var(--text-base-size) * 2.4);
2525
--text-xxl: calc(var(--text-base-size) * 3.2);
2626
--text-xxxl: calc(var(--text-base-size) * 3.6);
27-
}
2827

29-
[data-theme='light'] {
3028
--color-primary: hsl(215, 93%, 52%);
3129

3230
--color-bg: hsl(0, 0%, 100%);
31+
3332
--color-contrast-lower: hsl(0, 0%, 97%);
3433
--color-contrast-lower-alt: hsl(0, 0%, 92%);
3534
--color-contrast-low: hsl(0, 0%, 85%);
@@ -38,26 +37,31 @@
3837
--color-contrast-high: hsl(0, 0%, 15%);
3938
--color-contrast-higher: hsl(0, 0%, 0%);
4039

41-
--color-text: var(--color-contrast-high);
40+
--color-text: hsl(0, 0%, 0%);
41+
--color-text-2: hsl(0, 0%, 15%);
42+
--color-text-3: hsl(0, 0%, 50%);
43+
--color-text-4: hsl(0, 0%, 80%);
44+
--color-text-5: hsl(0, 0%, 85%);
45+
4246
--color-border: var(--color-contrast-low);
4347

48+
--color-button: var(--color-contrast-lower-alt);
49+
--color-button-hover: var(--color-contrast-low);
50+
--color-button-action: var(--color-contrast-medium);
51+
--color-button-action-hover: var(--color-contrast-lower-alt);
52+
53+
--color-sidebar: var(--color-contrast-lower);
4454
--color-sidebar-item-selected: var(--color-contrast-low);
55+
--color-sidebar-icon: var(--color-text);
56+
--color-sidebar-icon-selected: #fff;
57+
4558
--color-snippet-selected: hsl(0, 0%, 94%);
59+
--color-snippet-list: var(--color-bg);
4660

4761
--color-editor-scrollbar: rgba(121, 121, 121, 0.4);
48-
}
4962

50-
[data-theme='dark'] {
51-
--color-primary: hsl(215, 93%, 52%);
52-
53-
--color-bg: hsl(0, 0%, 20%);
54-
--color-contrast-lower: hsl(0, 0%, 25%);
55-
--color-contrast-low: hsl(0, 0%, 32%);
56-
--color-contrast-low-alt: hsl(0, 0%, 37%);
57-
--color-contrast-medium: hsl(0, 0%, 50%);
58-
--color-contrast-high: hsl(0, 0%, 85%);
59-
--color-contrast-higher: hsl(0, 0%, 100%);
63+
--color-menu-selected: var(--color-contrast-lower-alt);
6064

61-
--color-text: var(--color-contrast-high);
62-
--color-border: var(--color-contrast-low);
65+
--color-tag-delete: var(--color-contrast-lower-alt);
6366
}
67+

0 commit comments

Comments
 (0)