Skip to content

Commit 205451a

Browse files
yougotwillyougotwill
committed
initial work for dracula theme done
1 parent 03b8dbb commit 205451a

39 files changed

+879
-57
lines changed

‎browser/components/MarkdownPreview.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,7 @@ export default class MarkdownPreview extends React.Component {
397397
case 'dark':
398398
case 'solarized-dark':
399399
case 'monokai':
400+
case 'dracula':
400401
return scrollBarDarkStyle
401402
default:
402403
return scrollBarStyle

‎browser/components/NoteItem.styl

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,3 +394,76 @@ body[data-theme="monokai"]
394394
.item-bottom-tagList-empty
395395
color $ui-inactive-text-color
396396
vertical-align middle
397+
398+
body[data-theme="dracula"]
399+
.root
400+
border-color $ui-dracula-borderColor
401+
background-color $ui-dracula-noteList-backgroundColor
402+
403+
.item
404+
border-color $ui-dracula-borderColor
405+
background-color $ui-dracula-noteList-backgroundColor
406+
&:hover
407+
transition 0.15s
408+
// background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
409+
color $ui-dracula-text-color
410+
.item-title
411+
.item-title-icon
412+
.item-bottom-time
413+
transition 0.15s
414+
color $ui-dracula-text-color
415+
.item-bottom-tagList-item
416+
transition 0.15s
417+
background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
418+
color $ui-dracula-text-color
419+
&:active
420+
transition 0.15s
421+
background-color $ui-dracula-noteList-backgroundColor
422+
color $ui-dracula-text-color
423+
.item-title
424+
.item-title-icon
425+
.item-bottom-time
426+
transition 0.15s
427+
color $ui-dracula-text-color
428+
.item-bottom-tagList-item
429+
transition 0.15s
430+
background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
431+
color $ui-dracula-text-color
432+
433+
.item-wrapper
434+
border-color alpha($ui-dracula-button-backgroundColor, 60%)
435+
436+
.item--active
437+
border-color $ui-dracula-borderColor
438+
background-color $ui-dracula-button-backgroundColor
439+
.item-wrapper
440+
border-color transparent
441+
.item-title
442+
.item-title-icon
443+
.item-bottom-time
444+
color $ui-dracula-text-color
445+
.item-bottom-tagList-item
446+
background-color alpha(#f8f8f2, 10%)
447+
color $ui-dracula-text-color
448+
&:hover
449+
// background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
450+
color #ff79c6
451+
.item-bottom-tagList-item
452+
background-color alpha(#f8f8f2, 20%)
453+
454+
.item-title
455+
color $ui-inactive-text-color
456+
457+
.item-title-icon
458+
color $ui-inactive-text-color
459+
460+
.item-title-empty
461+
color $ui-inactive-text-color
462+
463+
.item-bottom-tagList-item
464+
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
465+
color $ui-inactive-text-color
466+
467+
.item-bottom-tagList-empty
468+
color $ui-inactive-text-color
469+
vertical-align middle

‎browser/components/NoteItemSimple.styl

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ body[data-theme="monokai"]
240240
.item-simple-title-icon
241241
.item-simple-bottom-time
242242
transition 0.15s
243-
color $ui-solarized-dark-text-color
243+
color $ui-monokai-text-color
244244
.item-simple-bottom-tagList-item
245245
transition 0.15s
246246
background-color alpha(#fff, 20%)
@@ -286,3 +286,67 @@ body[data-theme="monokai"]
286286
.item-simple-right-storageName
287287
padding-left 4px
288288
opacity 0.4
289+
290+
body[data-theme="dracula"]
291+
.root
292+
border-color $ui-dracula-borderColor
293+
background-color $ui-dracula-noteList-backgroundColor
294+
295+
.item-simple
296+
border-color $ui-dracula-borderColor
297+
background-color $ui-dracula-noteList-backgroundColor
298+
&:hover
299+
transition 0.15s
300+
background-color alpha($ui-dracula-button-backgroundColor, 60%)
301+
color $ui-dracula-text-color
302+
.item-simple-title
303+
.item-simple-title-empty
304+
.item-simple-title-icon
305+
.item-simple-bottom-time
306+
transition 0.15s
307+
color $ui-dracula-text-color
308+
.item-simple-bottom-tagList-item
309+
transition 0.15s
310+
background-color alpha(#f8f8f2, 20%)
311+
color $ui-dracula-text-color
312+
&:active
313+
transition 0.15s
314+
background-color $ui-dracula-button--active-backgroundColor
315+
color $ui-dracula-text-color
316+
.item-simple-title
317+
.item-simple-title-empty
318+
.item-simple-title-icon
319+
.item-simple-bottom-time
320+
transition 0.15s
321+
color $ui-dracula-text-color
322+
.item-simple-bottom-tagList-item
323+
transition 0.15s
324+
background-color alpha(#f8f8f2, 10%)
325+
color $ui-dracula-text-color
326+
327+
.item-simple--active
328+
border-color $ui-dracula-borderColor
329+
background-color $ui-dracula-button--active-backgroundColor
330+
.item-simple-wrapper
331+
border-color transparent
332+
.item-simple-title
333+
.item-simple-title-empty
334+
.item-simple-title-icon
335+
.item-simple-bottom-time
336+
color $ui-dracula-text-color
337+
.item-simple-bottom-tagList-item
338+
background-color alpha(#f8f8f2, 10%)
339+
color $ui-dracula-text-color
340+
&:hover
341+
// background-color alpha($ui-dark-button--active-backgroundColor, 60%)
342+
color #c0392b
343+
.item-simple-bottom-tagList-item
344+
background-color alpha(#f8f8f2, 20%)
345+
.item-simple-title
346+
color $ui-dark-text-color
347+
border-bottom $ui-dark-borderColor
348+
.item-simple-right
349+
float right
350+
.item-simple-right-storageName
351+
padding-left 4px
352+
opacity 0.4

‎browser/components/RealtimeNotification.styl

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,25 @@ body[data-theme="monokai"]
5151
border none
5252
background-color $ui-monokai-button-backgroundColor
5353
&:hover
54-
color #5CB85C
54+
color #5CB85C
55+
56+
body[data-theme="monokai"]
57+
.notification-area
58+
background-color none
59+
60+
.notification-link
61+
color $ui-monokai-text-color
62+
border none
63+
background-color $ui-monokai-button-backgroundColor
64+
&:hover
65+
color #5CB85C
66+
body[data-theme="dracula"]
67+
.notification-area
68+
background-color none
69+
70+
.notification-link
71+
color $ui-dracula-text-color
72+
border none
73+
background-color $ui-dracula-button-backgroundColor
74+
&:hover
75+
color #ff79c6

‎browser/components/SideNavFilter.styl

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,4 +263,46 @@ body[data-theme="monokai"]
263263
background-color $ui-monokai-button-backgroundColor
264264
color $ui-monokai-text-color
265265
.menu-button-label
266-
color $ui-monokai-text-color
266+
color $ui-monokai-text-color
267+
268+
body[data-theme="dracula"]
269+
.menu-button
270+
&:active
271+
background-color $ui-dracula-noteList-backgroundColor
272+
color $ui-dracula-text-color
273+
&:hover
274+
background-color $ui-dracula-button-backgroundColor
275+
color $ui-dracula-text-color
276+
277+
.menu-button--active
278+
color $ui-dracula-text-color
279+
background-color $ui-dracula-button-backgroundColor
280+
.menu-button-label
281+
color $ui-dracula-text-color
282+
&:hover
283+
background-color $ui-dracula-button-backgroundColor
284+
color $ui-dracula-text-color
285+
.menu-button-label
286+
color $ui-dracula-text-color
287+
288+
.menu-button-star--active
289+
color $ui-dracula-text-color
290+
background-color $ui-dracula-button-backgroundColor
291+
.menu-button-label
292+
color $ui-dracula-text-color
293+
&:hover
294+
background-color $ui-dracula-button-backgroundColor
295+
color $ui-dracula-text-color
296+
.menu-button-label
297+
color $ui-dracula-text-color
298+
299+
.menu-button-trash--active
300+
color $ui-dracula-text-color
301+
background-color $ui-dracula-button-backgroundColor
302+
.menu-button-label
303+
color $ui-dracula-text-color
304+
&:hover
305+
background-color $ui-dracula-button-backgroundColor
306+
color $ui-dracula-text-color
307+
.menu-button-label
308+
color $ui-dracula-text-color

‎browser/components/SnippetTab.styl

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,4 +180,48 @@ body[data-theme="monokai"]
180180
color $ui-monokai-text-color
181181

182182
.deleteButton
183-
color alpha($ui-monokai-text-color, 30%)
183+
color alpha($ui-monokai-text-color, 30%)
184+
185+
body[data-theme="dracula"]
186+
.root
187+
color $ui-dracula-text-color
188+
border-color $ui-dark-borderColor
189+
&:hover
190+
background-color $ui-dracula-noteDetail-backgroundColor
191+
.deleteButton
192+
color $ui-dracula-text-color
193+
&:hover
194+
background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
195+
&:active
196+
color $ui-dracula-text-color
197+
background-color $ui-dark-button--active-backgroundColor
198+
199+
.root--active
200+
color $ui-dracula-text-color
201+
border-color $ui-dracula-borderColor
202+
&:hover
203+
background-color $ui-dracula-noteDetail-backgroundColor
204+
.deleteButton
205+
color $ui-dracula-text-color
206+
&:hover
207+
background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
208+
&:active
209+
color $ui-dracula-text-color
210+
background-color $ui-dark-button--active-backgroundColor
211+
212+
.button
213+
border none
214+
color $ui-dracula-text-color
215+
background-color transparent
216+
transition color background-color 0.15s
217+
border-left 4px solid transparent
218+
&:hover
219+
color $ui-dracula-text-color
220+
background-color $ui-dracula-noteDetail-backgroundColor
221+
222+
.input
223+
background-color $ui-dracula-noteDetail-backgroundColor
224+
color $ui-dracula-text-color
225+
226+
.deleteButton
227+
color alpha($ui-dracula-text-color, 30%)

‎browser/components/StorageItem.styl

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,4 +156,23 @@ body[data-theme="monokai"]
156156
background-color $ui-monokai-button-backgroundColor
157157
&:hover
158158
color $ui-monokai-text-color
159-
background-color $ui-monokai-button-backgroundColor
159+
background-color $ui-monokai-button-backgroundColor
160+
161+
body[data-theme="dracula"]
162+
.folderList-item
163+
&:hover
164+
background-color $ui-dracula-button-backgroundColor
165+
color $ui-dracula-text-color
166+
&:active
167+
color $ui-dracula-text-color
168+
background-color $ui-dracula-button-backgroundColor
169+
170+
.folderList-item--active
171+
@extend .folderList-item
172+
color $ui-dracula-text-color
173+
background-color $ui-dracula-button-backgroundColor
174+
&:active
175+
background-color $ui-dracula-button-backgroundColor
176+
&:hover
177+
color $ui-dracula-text-color
178+
background-color $ui-dracula-button-backgroundColor

‎browser/components/TodoListPercentage.styl

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ body[data-theme="dark"]
3939

4040
.percentageText
4141
color $ui-dark-text-color
42-
42+
4343
body[data-theme="solarized-dark"]
4444
.percentageBar
4545
background-color #002b36
@@ -58,4 +58,14 @@ body[data-theme="monokai"]
5858
background-color: #373831
5959

6060
.percentageText
61-
color #fdf6e3
61+
color #fdf6e3
62+
63+
body[data-theme="dracula"]
64+
.percentageBar
65+
background-color #50fa7b
66+
67+
.progressBar
68+
background-color: #44475a
69+
70+
.percentageText
71+
color #f8f8f2

‎browser/components/markdown.styl

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@ for name, val in admonition_types
361361
.admonition.{name}
362362
@extend $admonition
363363
border-left-color: val[color]
364-
364+
365365
.admonition.{name}>.admonition-title
366366
@extend $admonition-title
367367
border-bottom-color: .1rem solid rgba(val[color], 0.2)
@@ -476,5 +476,34 @@ body[data-theme="monokai"]
476476
border-color themeMonokaiTableBorder
477477
&:last-child
478478
border-right solid 1px themeMonokaiTableBorder
479+
kbd
480+
background-color themeDarkBackground
481+
482+
themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
483+
themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
484+
themeDraculaTableHead = themeDraculaTableEven
485+
themeDraculaTableBorder = themeDarkBorder
486+
487+
body[data-theme="dracula"]
488+
color $ui-dracula-text-color
489+
border-color themeDarkBorder
490+
background-color $ui-dracula-noteDetail-backgroundColor
491+
table
492+
thead
493+
tr
494+
background-color themeDraculaTableHead
495+
th
496+
border-color themeDraculaTableBorder
497+
&:last-child
498+
border-right solid 1px themeDraculaTableBorder
499+
tbody
500+
tr:nth-child(2n + 1)
501+
background-color themeDraculaTableOdd
502+
tr:nth-child(2n)
503+
background-color themeDraculaTableEven
504+
td
505+
border-color themeDraculaTableBorder
506+
&:last-child
507+
border-right solid 1px themeDraculaTableBorder
479508
kbd
480509
background-color themeDarkBackground

0 commit comments

Comments
 (0)