Skip to content

Commit 71ae420

Browse files
Rokt33rRokt33r
authored
Merge pull request #2414 from yougotwill/dracula_theme
Dracula theme
2 parents a9bad53 + 8c268be commit 71ae420

38 files changed

Lines changed: 754 additions & 24 deletions

‎browser/components/MarkdownPreview.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,7 @@ export default class MarkdownPreview extends React.Component {
425425
case 'dark':
426426
case 'solarized-dark':
427427
case 'monokai':
428+
case 'dracula':
428429
return scrollBarDarkStyle
429430
default:
430431
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-active-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: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,15 @@ 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="dracula"]
57+
.notification-area
58+
background-color none
59+
60+
.notification-link
61+
color $ui-dracula-text-color
62+
border none
63+
background-color $ui-dracula-button-backgroundColor
64+
&:hover
65+
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: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,14 @@ body[data-theme="monokai"]
5858
background-color $ui-monokai-active-color
5959

6060
.percentageText
61-
color $ui-monokai-text-color
61+
color $ui-monokai-text-color
62+
63+
body[data-theme="dracula"]
64+
.percentageBar
65+
background-color $ui-dracula-borderColor
66+
67+
.progressBar
68+
background-color: $ui-dracula-active-color
69+
70+
.percentageText
71+
color $ui-dracula-text-color

‎browser/components/markdown.styl‎

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

‎browser/components/render/MermaidRender.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import mermaidAPI from 'mermaid'
22

33
// fixes bad styling in the mermaid dark theme
44
const darkThemeStyling = `
5-
.loopText tspan {
6-
fill: white;
5+
.loopText tspan {
6+
fill: white;
77
}`
88

99
function getRandomInt (min, max) {
@@ -21,7 +21,7 @@ function getId () {
2121

2222
function render (element, content, theme) {
2323
try {
24-
let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai'
24+
let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
2525
mermaidAPI.initialize({
2626
theme: isDarkTheme ? 'dark' : 'default',
2727
themeCSS: isDarkTheme ? darkThemeStyling : ''

0 commit comments

Comments
 (0)