diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 5dc2bcc88..ff88540f4 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -21,6 +21,7 @@ import yaml from 'js-yaml'
import { render } from 'react-dom'
import Carousel from 'react-image-carousel'
import ConfigManager from '../main/lib/ConfigManager'
+import uiThemes from 'browser/lib/ui-themes'
import i18n from 'browser/lib/i18n'
const { remote, shell } = require('electron')
@@ -488,15 +489,7 @@ export default class MarkdownPreview extends React.Component {
getScrollBarStyle () {
const { theme } = this.props
- switch (theme) {
- case 'dark':
- case 'solarized-dark':
- case 'monokai':
- case 'dracula':
- return scrollBarDarkStyle
- default:
- return scrollBarStyle
- }
+ return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle
}
componentDidMount () {
diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl
index d716c85f1..49bd927a9 100644
--- a/browser/components/MarkdownSplitEditor.styl
+++ b/browser/components/MarkdownSplitEditor.styl
@@ -16,22 +16,14 @@
z-index 10
cursor col-resize
-body[data-theme="dark"]
- .root
- .slider
- border-left 1px solid $ui-dark-borderColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ .slider
+ border-left 1px solid get-theme-var(theme, 'borderColor')
-body[data-theme="solarized-dark"]
- .root
- .slider
- border-left 1px solid $ui-solarized-dark-borderColor
+for theme in 'dark' 'dracula' 'solarized-dark'
+ apply-theme(theme)
-body[data-theme="monokai"]
- .root
- .slider
- border-left 1px solid $ui-monokai-borderColor
-
-body[data-theme="dracula"]
- .root
- .slider
- border-left 1px solid $ui-dracula-borderColor
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/NavToggleButton.styl b/browser/components/NavToggleButton.styl
index 422a7ca6c..a4bfc83ed 100644
--- a/browser/components/NavToggleButton.styl
+++ b/browser/components/NavToggleButton.styl
@@ -17,10 +17,16 @@
body[data-theme="white"]
navWhiteButtonColor()
-body[data-theme="dark"]
- .navToggle
- &:hover
- background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+apply-theme(theme)
+ body[data-theme={theme}]
+ .navToggle:hover
+ background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+ border 1px solid get-theme-var(theme, 'button--active-backgroundColor')
transition 0.15s
- color $ui-dark-text-color
+ color get-theme-var(theme, 'text-color')
+for theme in 'dark' 'dracula' 'solarized-dark'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index a31f00a49..75078db44 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -194,7 +194,7 @@ body[data-theme="dark"]
color $ui-dark-text-color
.item-bottom-tagList-item
transition 0.15s
- background-color alpha(#fff, 20%)
+ background-color alpha($ui-dark-tagList-backgroundColor, 20%)
color $ui-dark-text-color
&:active
transition 0.15s
@@ -207,7 +207,7 @@ body[data-theme="dark"]
color $ui-dark-text-color
.item-bottom-tagList-item
transition 0.15s
- background-color alpha(white, 10%)
+ background-color alpha($ui-dark-tagList-backgroundColor, 10%)
color $ui-dark-text-color
.item-wrapper
@@ -223,13 +223,13 @@ body[data-theme="dark"]
.item-bottom-time
color $ui-dark-text-color
.item-bottom-tagList-item
- background-color alpha(white, 10%)
+ background-color alpha($ui-dark-tagList-backgroundColor, 10%)
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
- color #c0392b
+ color $ui-dark-button--hover-color
.item-bottom-tagList-item
- background-color alpha(#fff, 20%)
+ background-color alpha($ui-dark-tagList-backgroundColor, 20%)
.item-title
color $ui-inactive-text-color
@@ -322,148 +322,82 @@ body[data-theme="solarized-dark"]
color $ui-inactive-text-color
vertical-align middle
-body[data-theme="monokai"]
- .root
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-noteList-backgroundColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
- .item
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-noteList-backgroundColor
- &:hover
- transition 0.15s
- // background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
- color $ui-monokai-text-color
- .item-title
- .item-title-icon
- .item-bottom-time
+ .item
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+ &:hover
transition 0.15s
- color $ui-monokai-text-color
- .item-bottom-tagList-item
+ // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
+ color get-theme-var(theme, 'text-color')
+ .item-title
+ .item-title-icon
+ .item-bottom-time
+ transition 0.15s
+ color get-theme-var(theme, 'text-color')
+ .item-bottom-tagList-item
+ transition 0.15s
+ background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
+ color get-theme-var(theme, 'text-color')
+ &:active
transition 0.15s
- background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
- color $ui-monokai-text-color
- &:active
- transition 0.15s
- background-color $ui-monokai-noteList-backgroundColor
- color $ui-monokai-text-color
- .item-title
- .item-title-icon
- .item-bottom-time
- transition 0.15s
- color $ui-monokai-text-color
- .item-bottom-tagList-item
- transition 0.15s
- background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
- color $ui-monokai-text-color
-
- .item-wrapper
- border-color alpha($ui-monokai-button-backgroundColor, 60%)
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ .item-title
+ .item-title-icon
+ .item-bottom-time
+ transition 0.15s
+ color get-theme-var(theme, 'text-color')
+ .item-bottom-tagList-item
+ transition 0.15s
+ background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
+ color get-theme-var(theme, 'text-color')
- .item--active
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-button-backgroundColor
.item-wrapper
- border-color transparent
- .item-title
- .item-title-icon
- .item-bottom-time
- color $ui-monokai-active-color
- .item-bottom-tagList-item
- background-color alpha(white, 10%)
- color $ui-monokai-text-color
- &:hover
- // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
- color #f92672
- .item-bottom-tagList-item
- background-color alpha(#fff, 20%)
-
- .item-title
- color $ui-inactive-text-color
-
- .item-title-icon
- color $ui-inactive-text-color
-
- .item-title-empty
- color $ui-inactive-text-color
-
- .item-bottom-tagList-item
- background-color alpha($ui-dark-button--active-backgroundColor, 40%)
- color $ui-inactive-text-color
-
- .item-bottom-tagList-empty
- color $ui-inactive-text-color
- vertical-align middle
+ border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
-body[data-theme="dracula"]
- .root
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-noteList-backgroundColor
-
- .item
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-noteList-backgroundColor
- &:hover
- transition 0.15s
- // background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
- color $ui-dracula-text-color
+ .item--active
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ .item-wrapper
+ border-color transparent
.item-title
.item-title-icon
.item-bottom-time
- transition 0.15s
- color $ui-dracula-text-color
+ color get-theme-var(theme, 'active-color')
.item-bottom-tagList-item
- transition 0.15s
- background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
- color $ui-dracula-text-color
- &:active
- transition 0.15s
- background-color $ui-dracula-noteList-backgroundColor
- color $ui-dracula-text-color
- .item-title
- .item-title-icon
- .item-bottom-time
- transition 0.15s
- color $ui-dracula-text-color
- .item-bottom-tagList-item
- transition 0.15s
- background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
- color $ui-dracula-text-color
+ background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+ color get-theme-var(theme, 'text-color')
+ &:hover
+ // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+ color get-theme-var(theme, 'button--hover-color')
+ .item-bottom-tagList-item
+ background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
- .item-wrapper
- border-color alpha($ui-dracula-button-backgroundColor, 60%)
-
- .item--active
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-button-backgroundColor
- .item-wrapper
- border-color transparent
.item-title
+ color $ui-inactive-text-color
+
.item-title-icon
- .item-bottom-time
- color $ui-dracula-active-color
- .item-bottom-tagList-item
- background-color alpha(#f8f8f2, 10%)
- color $ui-dracula-text-color
- &:hover
- // background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
- color #ff79c6
- .item-bottom-tagList-item
- background-color alpha(#f8f8f2, 20%)
+ color $ui-inactive-text-color
- .item-title
- color $ui-inactive-text-color
+ .item-title-empty
+ color $ui-inactive-text-color
- .item-title-icon
- color $ui-inactive-text-color
+ .item-bottom-tagList-item
+ background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+ color $ui-inactive-text-color
- .item-title-empty
- color $ui-inactive-text-color
+ .item-bottom-tagList-empty
+ color $ui-inactive-text-color
+ vertical-align middle
- .item-bottom-tagList-item
- background-color alpha($ui-dark-button--active-backgroundColor, 40%)
- color $ui-inactive-text-color
+for theme in 'dracula'
+ apply-theme(theme)
- .item-bottom-tagList-empty
- color $ui-inactive-text-color
- vertical-align middle
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl
index 70b74be7c..a36de5ed6 100644
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -223,130 +223,73 @@ body[data-theme="solarized-dark"]
padding-left 4px
opacity 0.4
-body[data-theme="monokai"]
- .root
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-noteList-backgroundColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
- .item-simple
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-noteList-backgroundColor
- &:hover
- transition 0.15s
- background-color alpha($ui-monokai-button-backgroundColor, 60%)
- color $ui-monokai-text-color
- .item-simple-title
- .item-simple-title-empty
- .item-simple-title-icon
- .item-simple-bottom-time
+ .item-simple
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+ &:hover
transition 0.15s
- color $ui-monokai-text-color
- .item-simple-bottom-tagList-item
+ background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
+ color get-theme-var(theme, 'text-color')
+ .item-simple-title
+ .item-simple-title-empty
+ .item-simple-title-icon
+ .item-simple-bottom-time
+ transition 0.15s
+ color get-theme-var(theme, 'text-color')
+ .item-simple-bottom-tagList-item
+ transition 0.15s
+ background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
+ color get-theme-var(theme, 'text-color')
+ &:active
transition 0.15s
- background-color alpha(#fff, 20%)
- color $ui-monokai-text-color
- &:active
- transition 0.15s
- background-color $ui-monokai-button--active-backgroundColor
- color $ui-monokai-text-color
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ .item-simple-title
+ .item-simple-title-empty
+ .item-simple-title-icon
+ .item-simple-bottom-time
+ transition 0.15s
+ color get-theme-var(theme, 'text-color')
+ .item-simple-bottom-tagList-item
+ transition 0.15s
+ background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+ color get-theme-var(theme, 'text-color')
+
+ .item-simple--active
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+ .item-simple-wrapper
+ border-color transparent
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
.item-simple-bottom-time
- transition 0.15s
- color $ui-monokai-text-color
+ color get-theme-var(theme, 'text-color')
.item-simple-bottom-tagList-item
- transition 0.15s
- background-color alpha(white, 10%)
- color $ui-monokai-text-color
-
- .item-simple--active
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-button--active-backgroundColor
- .item-simple-wrapper
- border-color transparent
+ background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+ color get-theme-var(theme, 'text-color')
+ &:hover
+ // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+ color #c0392b
+ .item-simple-bottom-tagList-item
+ background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
.item-simple-title
- .item-simple-title-empty
- .item-simple-title-icon
- .item-simple-bottom-time
- color $ui-monokai-text-color
- .item-simple-bottom-tagList-item
- background-color alpha(white, 10%)
- color $ui-monokai-text-color
- &:hover
- // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
- color #c0392b
- .item-simple-bottom-tagList-item
- background-color alpha(#fff, 20%)
- .item-simple-title
- color $ui-dark-text-color
- border-bottom $ui-dark-borderColor
- .item-simple-right
- float right
- .item-simple-right-storageName
- padding-left 4px
- opacity 0.4
-
-body[data-theme="dracula"]
- .root
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-noteList-backgroundColor
+ color $ui-dark-text-color
+ border-bottom $ui-dark-borderColor
+ .item-simple-right
+ float right
+ .item-simple-right-storageName
+ padding-left 4px
+ opacity 0.4
- .item-simple
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-noteList-backgroundColor
- &:hover
- transition 0.15s
- background-color alpha($ui-dracula-button-backgroundColor, 60%)
- color $ui-dracula-text-color
- .item-simple-title
- .item-simple-title-empty
- .item-simple-title-icon
- .item-simple-bottom-time
- transition 0.15s
- color $ui-dracula-text-color
- .item-simple-bottom-tagList-item
- transition 0.15s
- background-color alpha(#f8f8f2, 20%)
- color $ui-dracula-text-color
- &:active
- transition 0.15s
- background-color $ui-dracula-button--active-backgroundColor
- color $ui-dracula-text-color
- .item-simple-title
- .item-simple-title-empty
- .item-simple-title-icon
- .item-simple-bottom-time
- transition 0.15s
- color $ui-dracula-text-color
- .item-simple-bottom-tagList-item
- transition 0.15s
- background-color alpha(#f8f8f2, 10%)
- color $ui-dracula-text-color
+for theme in 'dracula'
+ apply-theme(theme)
- .item-simple--active
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-button--active-backgroundColor
- .item-simple-wrapper
- border-color transparent
- .item-simple-title
- .item-simple-title-empty
- .item-simple-title-icon
- .item-simple-bottom-time
- color $ui-dracula-text-color
- .item-simple-bottom-tagList-item
- background-color alpha(#f8f8f2, 10%)
- color $ui-dracula-text-color
- &:hover
- // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
- color #c0392b
- .item-simple-bottom-tagList-item
- background-color alpha(#f8f8f2, 20%)
- .item-simple-title
- color $ui-dark-text-color
- border-bottom $ui-dark-borderColor
- .item-simple-right
- float right
- .item-simple-right-storageName
- padding-left 4px
- opacity 0.4
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl
index 36330c484..795807b9e 100644
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -30,36 +30,20 @@ body[data-theme="dark"]
&:hover
color #5CB85C
-
-body[data-theme="solarized-dark"]
- .notification-area
- background-color none
-
- .notification-link
- color $ui-solarized-dark-text-color
- border none
- background-color $ui-solarized-dark-button-backgroundColor
- &:hover
- color #5CB85C
-
-body[data-theme="monokai"]
- .notification-area
- background-color none
-
- .notification-link
- color $ui-monokai-text-color
- border none
- background-color $ui-monokai-button-backgroundColor
- &:hover
- color #5CB85C
-
-body[data-theme="dracula"]
- .notification-area
- background-color none
-
- .notification-link
- color $ui-dracula-text-color
- border none
- background-color $ui-dracula-button-backgroundColor
- &:hover
- color #ff79c6
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .notification-area
+ background-color none
+
+ .notification-link
+ color get-theme-var(theme, 'text-color')
+ border none
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ &:hover
+ color get-theme-var(theme, 'button--hover-color')
+
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index 1da8c7e4a..41e679ca9 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -180,129 +180,51 @@ body[data-theme="dark"]
.menu-button-label
color $ui-dark-text-color
-
-body[data-theme="solarized-dark"]
- .menu-button
- &:active
- background-color $ui-solarized-dark-noteList-backgroundColor
- color $ui-solarized-dark-text-color
- &:hover
- background-color $ui-solarized-dark-button-backgroundColor
- color $ui-solarized-dark-text-color
-
- .menu-button--active
- color $ui-solarized-dark-text-color
- background-color $ui-solarized-dark-button-backgroundColor
- .menu-button-label
- color $ui-solarized-dark-text-color
- &:hover
- background-color $ui-solarized-dark-button-backgroundColor
- color $ui-solarized-dark-text-color
- .menu-button-label
- color $ui-solarized-dark-text-color
-
- .menu-button-star--active
- color $ui-solarized-dark-text-color
- background-color $ui-solarized-dark-button-backgroundColor
- .menu-button-label
- color $ui-solarized-dark-text-color
- &:hover
- background-color $ui-solarized-dark-button-backgroundColor
- color $ui-solarized-dark-text-color
- .menu-button-label
- color $ui-solarized-dark-text-color
-
- .menu-button-trash--active
- color $ui-solarized-dark-text-color
- background-color $ui-solarized-dark-button-backgroundColor
- .menu-button-label
- color $ui-solarized-dark-text-color
- &:hover
- background-color $ui-solarized-dark-button-backgroundColor
- color $ui-solarized-dark-text-color
- .menu-button-label
- color $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
- .menu-button
- &:active
- background-color $ui-monokai-noteList-backgroundColor
- color $ui-monokai-text-color
- &:hover
- background-color $ui-monokai-button-backgroundColor
- color $ui-monokai-text-color
-
- .menu-button--active
- color $ui-monokai-text-color
- background-color $ui-monokai-button-backgroundColor
- .menu-button-label
- color $ui-monokai-text-color
- &:hover
- background-color $ui-monokai-button-backgroundColor
- color $ui-monokai-text-color
- .menu-button-label
- color $ui-monokai-text-color
-
- .menu-button-star--active
- color $ui-monokai-text-color
- background-color $ui-monokai-button-backgroundColor
- .menu-button-label
- color $ui-monokai-text-color
- &:hover
- background-color $ui-monokai-button-backgroundColor
- color $ui-monokai-text-color
- .menu-button-label
- color $ui-monokai-text-color
-
- .menu-button-trash--active
- color $ui-monokai-text-color
- background-color $ui-monokai-button-backgroundColor
- .menu-button-label
- color $ui-monokai-text-color
- &:hover
- background-color $ui-monokai-button-backgroundColor
- color $ui-monokai-text-color
- .menu-button-label
- color $ui-monokai-text-color
-
-body[data-theme="dracula"]
- .menu-button
- &:active
- background-color $ui-dracula-noteList-backgroundColor
- color $ui-dracula-text-color
- &:hover
- background-color $ui-dracula-button-backgroundColor
- color $ui-dracula-text-color
-
- .menu-button--active
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
- .menu-button-label
- color $ui-dracula-text-color
- &:hover
- background-color $ui-dracula-button-backgroundColor
- color $ui-dracula-text-color
- .menu-button-label
- color $ui-dracula-text-color
-
- .menu-button-star--active
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
- .menu-button-label
- color $ui-dracula-text-color
- &:hover
- background-color $ui-dracula-button-backgroundColor
- color $ui-dracula-text-color
- .menu-button-label
- color $ui-dracula-text-color
-
- .menu-button-trash--active
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
- .menu-button-label
- color $ui-dracula-text-color
- &:hover
- background-color $ui-dracula-button-backgroundColor
- color $ui-dracula-text-color
- .menu-button-label
- color $ui-dracula-text-color
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .menu-button
+ &:active
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ &:hover
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+
+ .menu-button--active
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ .menu-button-label
+ color get-theme-var(theme, 'text-color')
+ &:hover
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ .menu-button-label
+ color get-theme-var(theme, 'text-color')
+
+ .menu-button-star--active
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ .menu-button-label
+ color get-theme-var(theme, 'text-color')
+ &:hover
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ .menu-button-label
+ color get-theme-var(theme, 'text-color')
+
+ .menu-button-trash--active
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ .menu-button-label
+ color get-theme-var(theme, 'text-color')
+ &:hover
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ .menu-button-label
+ color get-theme-var(theme, 'text-color')
+
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl
index d101f3183..994e3b5aa 100644
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -61,7 +61,7 @@
width 100%
outline none
-body[data-theme="default"], body[data-theme="white"]
+body[data-theme="default"], body[data-theme="white"]
.root--active
&:hover
background-color alpha($ui-button--active-backgroundColor, 60%)
@@ -100,103 +100,43 @@ body[data-theme="dark"]
color $ui-dark-text-color
transition 0.15s
-body[data-theme="solarized-dark"]
- .root
- border-color $ui-solarized-dark-borderColor
- &:hover
- background-color $ui-solarized-dark-noteDetail-backgroundColor
- transition 0.15s
- .deleteButton
- color $ui-solarized-dark-button--active-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ border-color get-theme-var(theme, 'borderColor')
+ &:hover
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
transition 0.15s
- .button
- color $ui-solarized-dark-button--active-color
- transition 0.15s
-
- .root--active
- color $ui-solarized-dark-button--active-color
- background-color $ui-solarized-dark-button-backgroundColor
- border-color $ui-solarized-dark-borderColor
- .deleteButton
- color $ui-solarized-dark-button--active-color
- .button
- color $ui-solarized-dark-button--active-color
-
- .button
- border none
- color $ui-solarized-dark-text-color
- background-color transparent
- transition color background-color 0.15s
- border-left 4px solid transparent
-
- .input
- background-color $ui-solarized-dark-noteDetail-backgroundColor
- color $ui-solarized-dark-button--active-color
- transition 0.15s
-
-body[data-theme="monokai"]
- .root
- border-color $ui-monokai-borderColor
- &:hover
- background-color $ui-monokai-noteDetail-backgroundColor
- transition 0.15s
+ .deleteButton
+ color get-theme-var(theme, 'text-color')
+ transition 0.15s
+ .button
+ color get-theme-var(theme, 'text-color')
+ transition 0.15s
+
+ .root--active
+ color get-theme-var(theme, 'active-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ border-color get-theme-var(theme, 'borderColor')
.deleteButton
- color $ui-monokai-text-color
- transition 0.15s
+ color get-theme-var(theme, 'text-color')
.button
- color $ui-monokai-text-color
- transition 0.15s
+ color get-theme-var(theme, 'active-color')
- .root--active
- color $ui-monokai-active-color
- background-color $ui-monokai-button-backgroundColor
- border-color $ui-monokai-borderColor
- .deleteButton
- color $ui-monokai-text-color
.button
- color $ui-monokai-active-color
-
- .button
- border none
- color $ui-inactive-text-color
- background-color transparent
- transition color background-color 0.15s
- border-left 4px solid transparent
-
- .input
- background-color $ui-monokai-noteDetail-backgroundColor
- color $ui-monokai-text-color
- transition 0.15s
-
-body[data-theme="dracula"]
- .root
- border-color $ui-dracula-borderColor
- &:hover
- background-color $ui-dracula-noteDetail-backgroundColor
+ border none
+ color $ui-inactive-text-color
+ background-color transparent
+ transition color background-color 0.15s
+ border-left 4px solid transparent
+
+ .input
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+ color get-theme-var(theme, 'text-color')
transition 0.15s
- .deleteButton
- color $ui-dracula-text-color
- transition 0.15s
- .button
- color $ui-dracula-text-color
- transition 0.15s
- .root--active
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
- border-color $ui-dracula-borderColor
- .deleteButton
- color $ui-dracula-text-color
- .button
- color $ui-dracula-active-color
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
- .button
- border none
- color $ui-inactive-text-color
- background-color transparent
- transition color background-color 0.15s
- border-left 4px solid transparent
-
- .input
- background-color $ui-dracula-noteDetail-backgroundColor
- color $ui-dracula-text-color
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index df8cbbc6e..e0a3c6cd2 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -120,59 +120,28 @@ body[data-theme="dark"]
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 50%)
-body[data-theme="solarized-dark"]
- .folderList-item
- &:hover
- background-color $ui-solarized-dark-button-backgroundColor
- color $ui-solarized-dark-text-color
- &:active
- color $ui-solarized-dark-text-color
- background-color $ui-solarized-dark-button-backgroundColor
-
- .folderList-item--active
- @extend .folderList-item
- color $ui-solarized-dark-text-color
- background-color $ui-solarized-dark-button-backgroundColor
- &:active
- background-color $ui-solarized-dark-button-backgroundColor
- &:hover
- color $ui-solarized-dark-text-color
- background-color $ui-solarized-dark-button-backgroundColor
-
-body[data-theme="monokai"]
- .folderList-item
- &:hover
- background-color $ui-monokai-button-backgroundColor
- color $ui-monokai-text-color
- &:active
- color $ui-monokai-text-color
- background-color $ui-monokai-button-backgroundColor
-
- .folderList-item--active
- @extend .folderList-item
- color $ui-monokai-text-color
- background-color $ui-monokai-button-backgroundColor
- &:active
- background-color $ui-monokai-button-backgroundColor
- &:hover
- color $ui-monokai-text-color
- background-color $ui-monokai-button-backgroundColor
-
-body[data-theme="dracula"]
- .folderList-item
- &:hover
- background-color $ui-dracula-button-backgroundColor
- color $ui-dracula-text-color
- &:active
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
-
- .folderList-item--active
- @extend .folderList-item
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
- &:active
- background-color $ui-dracula-button-backgroundColor
- &:hover
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .folderList-item
+ &:hover
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ &:active
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+
+ .folderList-item--active
+ @extend .folderList-item
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ &:active
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ &:hover
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index 9f407a171..1f78c46f1 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -94,23 +94,30 @@ body[data-theme="white"]
.tagList-item-count
color $ui-text-color
-body[data-theme="dark"]
- .tagList-item
- color $ui-dark-inactive-text-color
- &:hover
- color $ui-dark-text-color
- background-color alpha($ui-dark-button--active-backgroundColor, 20%)
- &:active
- color $ui-dark-text-color
- background-color $ui-dark-button--active-backgroundColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .tagList-item
+ color get-theme-var(theme, 'inactive-text-color')
+ &:hover
+ color get-theme-var(theme, 'text-color')
+ background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+ &:active
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
- .tagList-item-active
- background-color $ui-dark-button--active-backgroundColor
- color $ui-dark-text-color
- &:active
- background-color alpha($ui-dark-button--active-backgroundColor, 50%)
- &:hover
- color $ui-dark-text-color
- background-color alpha($ui-dark-button--active-backgroundColor, 50%)
- .tagList-item-count
- color $ui-dark-button--active-color
+ .tagList-item-active
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ &:active
+ background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
+ &:hover
+ color get-theme-var(theme, 'text-color')
+ background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
+ .tagList-item-count
+ color get-theme-var(theme, 'button--active-color')
+
+for theme in 'dark'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl
index 5a0f32570..4a0081cd3 100644
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -54,7 +54,7 @@ body[data-theme="dark"]
.percentageText
color $ui-dark-text-color
-
+
.todoClearText
color $ui-dark-text-color
@@ -71,25 +71,19 @@ body[data-theme="solarized-dark"]
.todoClearText
color #fdf6e3
-body[data-theme="monokai"]
- .percentageBar
- background-color: $ui-monokai-borderColor
-
- .progressBar
- background-color $ui-monokai-active-color
-
- .percentageText
- color $ui-monokai-text-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .percentageBar
+ background-color: get-theme-var(theme, 'borderColor')
-body[data-theme="dracula"]
- .percentageBar
- background-color $ui-dracula-borderColor
+ .progressBar
+ background-color get-theme-var(theme, 'active-color')
- .progressBar
- background-color: $ui-dracula-active-color
+ .percentageText
+ color get-theme-var(theme, 'text-color')
- .percentageText
- color $ui-dracula-text-color
+for theme in 'dracula'
+ apply-theme(theme)
- .percentageText
- color $ui-dracula-text-color
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index 61939a649..00f0b51cf 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -561,159 +561,57 @@ body[data-theme="dark"]
background-color darken(themeDarkBackground, 5%)
color themeDarkText
-
-themeSolarizedDarkBackground = $ui-solarized-dark-noteDetail-backgroundColor
-themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
-themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
-themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
-themeSolarizedDarkTableBorder = themeDarkBorder
-
-body[data-theme="solarized-dark"]
- color $ui-solarized-dark-text-color
- border-color themeDarkBorder
- background-color themeSolarizedDarkBackground
- table
- thead
- tr
- background-color themeSolarizedDarkTableHead
- th
- border-color themeSolarizedDarkTableBorder
- &:last-child
- border-right solid 1px themeSolarizedDarkTableBorder
- tbody
- tr:nth-child(2n + 1)
- background-color themeSolarizedDarkTableOdd
- tr:nth-child(2n)
- background-color themeSolarizedDarkTableEven
- td
- border-color themeSolarizedDarkTableBorder
- &:last-child
- border-right solid 1px themeSolarizedDarkTableBorder
- dl
- border-color themeDarkBorder
- background-color themeSolarizedDarkTableHead
- dt
- border-color themeDarkBorder
- dd
- border-color themeDarkBorder
- background-color $ui-solarized-dark-noteDetail-backgroundColor
-
- pre.fence
- .gallery
- .carousel-main, .carousel-footer
- background-color $ui-solarized-dark-noteDetail-backgroundColor
- .prev, .next
- color $ui-solarized-dark-button--active-color
- background-color $ui-solarized-dark-button-backgroundColor
-
- .markdownIt-TOC-wrapper
- &,
- &:before
- background-color darken(themeSolarizedDarkBackground, 15%)
- color themeDarkText
-
-themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor
-themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
-themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
-themeMonokaiTableHead = themeMonokaiTableEven
-themeMonokaiTableBorder = themeDarkBorder
-
-body[data-theme="monokai"]
- color $ui-monokai-text-color
- border-color themeDarkBorder
- background-color themeMonokaiBackground
- table
- thead
- tr
- background-color themeMonokaiTableHead
- th
- border-color themeMonokaiTableBorder
- &:last-child
- border-right solid 1px themeMonokaiTableBorder
- tbody
- tr:nth-child(2n + 1)
- background-color themeMonokaiTableOdd
- tr:nth-child(2n)
- background-color themeMonokaiTableEven
- td
- border-color themeMonokaiTableBorder
- &:last-child
- border-right solid 1px themeMonokaiTableBorder
- kbd
- background-color themeDarkBackground
-
- dl
+apply-theme(theme)
+ body[data-theme={theme}]
+ color get-theme-var(theme, 'text-color')
border-color themeDarkBorder
- background-color themeMonokaiTableHead
- dt
- border-color themeDarkBorder
- dd
- border-color themeDarkBorder
- background-color $ui-monokai-noteDetail-backgroundColor
-
- pre.fence
- .gallery
- .carousel-main, .carousel-footer
- background-color $ui-monokai-noteDetail-backgroundColor
- .prev, .next
- color $ui-monokai-button--active-color
- background-color $ui-monokai-button-backgroundColor
-
- .markdownIt-TOC-wrapper
- &,
- &:before
- background-color darken(themeMonokaiBackground, 15%)
- color themeDarkText
-
-themeDraculaBackground = $ui-dracula-noteDetail-backgroundColor
-themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
-themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
-themeDraculaTableHead = themeDraculaTableEven
-themeDraculaTableBorder = themeDarkBorder
-
-body[data-theme="dracula"]
- color $ui-dracula-text-color
- border-color themeDarkBorder
- background-color themeDraculaBackground
- table
- thead
- tr
- background-color themeDraculaTableHead
- th
- border-color themeDraculaTableBorder
- &:last-child
- border-right solid 1px themeDraculaTableBorder
- tbody
- tr:nth-child(2n + 1)
- background-color themeDraculaTableOdd
- tr:nth-child(2n)
- background-color themeDraculaTableEven
- td
- border-color themeDraculaTableBorder
- &:last-child
- border-right solid 1px themeDraculaTableBorder
- kbd
- background-color themeDarkBackground
-
- dl
- border-color themeDarkBorder
- background-color themeDraculaTableHead
- dt
- border-color themeDarkBorder
- dd
- border-color themeDarkBorder
- background-color $ui-dracula-noteDetail-backgroundColor
-
- pre.fence
- .gallery
- .carousel-main, .carousel-footer
- background-color $ui-dracula-noteDetail-backgroundColor
- .prev, .next
- color $ui-dracula-button--active-color
- background-color $ui-dracula-button-backgroundColor
-
- .markdownIt-TOC-wrapper
- &,
- &:before
- background-color darken(themeDraculaBackground, 15%)
- color themeDarkText
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+ table
+ thead
+ tr
+ background-color get-theme-var(theme, 'table-head-backgroundColor')
+ th
+ border-color get-theme-var(theme, 'table-borderColor')
+ &:last-child
+ border-right solid 1px get-theme-var(theme, 'table-borderColor')
+ tbody
+ tr:nth-child(2n + 1)
+ background-color get-theme-var(theme, 'table-odd-backgroundColor')
+ tr:nth-child(2n)
+ background-color get-theme-var(theme, 'table-even-backgroundColor')
+ td
+ border-color get-theme-var(theme, 'table-borderColor')
+ &:last-child
+ border-right solid 1px get-theme-var(theme, 'table-borderColor')
+ kbd
+ background-color get-theme-var(theme, 'kbd-backgroundColor')
+ color get-theme-var(theme, 'kbd-color')
+
+ dl
+ border-color themeDarkBorder
+ background-color get-theme-var(theme, 'table-head-backgroundColor')
+ dt
+ border-color themeDarkBorder
+ dd
+ border-color themeDarkBorder
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+
+ pre.fence
+ .gallery
+ .carousel-main, .carousel-footer
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+ .prev, .next
+ color get-theme-var(theme, 'button--active-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+
+ .markdownIt-TOC-wrapper
+ &,
+ &:before
+ background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)
+ color themeDarkText
+
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js
index 2b1e8b71d..5bed9bf1b 100644
--- a/browser/components/render/MermaidRender.js
+++ b/browser/components/render/MermaidRender.js
@@ -1,4 +1,5 @@
import mermaidAPI from 'mermaid'
+import uiThemes from 'browser/lib/ui-themes'
// fixes bad styling in the mermaid dark theme
const darkThemeStyling = `
@@ -23,10 +24,13 @@ function render (element, content, theme, enableHTMLLabel) {
try {
const height = element.attributes.getNamedItem('data-height')
const isPredefined = height && height.value !== 'undefined'
+
if (isPredefined) {
element.style.height = height.value + 'vh'
}
- const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
+
+ const isDarkTheme = uiThemes.some(item => item.name === theme && item.isDark)
+
mermaidAPI.initialize({
theme: isDarkTheme ? 'dark' : 'default',
themeCSS: isDarkTheme ? darkThemeStyling : '',
@@ -37,6 +41,7 @@ function render (element, content, theme, enableHTMLLabel) {
useWidth: element.clientWidth
}
})
+
mermaidAPI.render(getId(), content, (svgGraph) => {
element.innerHTML = svgGraph
diff --git a/browser/lib/ui-themes.js b/browser/lib/ui-themes.js
new file mode 100644
index 000000000..3d9044c6d
--- /dev/null
+++ b/browser/lib/ui-themes.js
@@ -0,0 +1,39 @@
+import i18n from 'browser/lib/i18n'
+
+export default [
+ {
+ name: 'dark',
+ label: i18n.__('Dark'),
+ isDark: true
+ },
+ {
+ name: 'default',
+ label: i18n.__('Default'),
+ isDark: false
+ },
+ {
+ name: 'dracula',
+ label: i18n.__('Dracula'),
+ isDark: true
+ },
+ {
+ name: 'monokai',
+ label: i18n.__('Monokai'),
+ isDark: true
+ },
+ {
+ name: 'nord',
+ label: i18n.__('Nord'),
+ isDark: true
+ },
+ {
+ name: 'solarized-dark',
+ label: i18n.__('Solarized Dark'),
+ isDark: true
+ },
+ {
+ name: 'white',
+ label: i18n.__('White'),
+ isDark: false
+ }
+]
diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl
index 1b7bd6066..f03de5d73 100644
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -24,23 +24,16 @@ body[data-theme="dark"]
.empty-message
color $ui-dark-inactive-text-color
-body[data-theme="solarized-dark"]
- .root
- background-color $ui-solarized-dark-noteDetail-backgroundColor
- border-left 1px solid $ui-solarized-dark-borderColor
- .empty-message
- color $ui-solarized-dark-text-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+ border-left 1px solid get-theme-var(theme, 'borderColor')
+ .empty-message
+ color get-theme-var(theme, 'text-color')
-body[data-theme="monokai"]
- .root
- background-color $ui-monokai-noteDetail-backgroundColor
- border-left 1px solid $ui-monokai-borderColor
- .empty-message
- color $ui-monokai-text-color
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
-body[data-theme="dracula"]
- .root
- background-color $ui-dracula-noteDetail-backgroundColor
- border-left 1px solid $ui-dracula-borderColor
- .empty-message
- color $ui-dracula-text-color
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index fe045e3af..ac903c6c5 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -134,54 +134,39 @@ body[data-theme="dark"]
.search-optionList-item-name-surfix
color $ui-dark-inactive-text-color
-body[data-theme="monokai"]
- .root
- color $ui-dark-text-color
- &:hover
- color white
- background-color $ui-monokai-button--hover-backgroundColor
- border-color $ui-monokai-borderColor
-
- .search-optionList
- color white
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-button-backgroundColor
-
- .search-optionList-item
- &:hover
- background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
-
- .search-optionList-item--active
- background-color $ui-monokai-button--active-backgroundColor
- color $ui-monokai-button--active-color
- &:hover
- background-color $ui-monokai-button--active-backgroundColor
- color $ui-monokai-button--active-color
- .search-optionList-item-name-surfix
- color $ui-monokai-inactive-text-color
-
-body[data-theme="dracula"]
- .root
- color $ui-dracula-text-color
- &:hover
- color #f8f8f2
- background-color $ui-dark-button--hover-backgroundColor
- border-color $ui-dracula-borderColor
-
- .search-optionList
- color #f8f8f2
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-button-backgroundColor
-
- .search-optionList-item
- &:hover
- background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
-
- .search-optionList-item--active
- background-color $ui-dracula-button--active-backgroundColor
- color $ui-dracula-button--active-color
- &:hover
- background-color $ui-dark-button--hover-backgroundColor
- color $ui-dracula-button--active-color
- .search-optionList-item-name-surfix
- color $ui-dracula-inactive-text-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ &:hover
+ background-color get-theme-var(theme, 'button--hover-backgroundColor')
+ border-color get-theme-var(theme, 'borderColor')
+
+ .search-input
+ color get-theme-var(theme, 'text-color')
+ background-color transparent
+ border-color get-theme-var(theme, 'borderColor')
+
+ .search-optionList
+ color get-theme-var(theme, 'text-color')
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+
+ .search-optionList-item
+ &:hover
+ background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%)
+
+ .search-optionList-item--active
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+ color get-theme-var(theme, 'button--active-color')
+ &:hover
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+ color get-theme-var(theme, 'button--active-color')
+
+ .search-optionList-item-name-surfix
+ color get-theme-var(theme, 'inactive-text-color')
+
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/Detail/FullscreenButton.styl b/browser/main/Detail/FullscreenButton.styl
index 133577f37..52a3b9617 100644
--- a/browser/main/Detail/FullscreenButton.styl
+++ b/browser/main/Detail/FullscreenButton.styl
@@ -1,26 +1,26 @@
-.control-fullScreenButton
- top 80px
- topBarButtonRight()
- &:hover .tooltip
- opacity 1
-
-.tooltip
- tooltip()
- position absolute
- pointer-events none
- top 50px
- right 70px
- z-index 200
- padding 5px
- line-height normal
- border-radius 2px
- opacity 0
- transition 0.1s
-
-.tooltip:lang(ja)
- @extend .tooltip
- right 35px
-
-body[data-theme="dark"]
- .control-fullScreenButton
+.control-fullScreenButton
+ top 80px
+ topBarButtonRight()
+ &:hover .tooltip
+ opacity 1
+
+.tooltip
+ tooltip()
+ position absolute
+ pointer-events none
+ top 50px
+ right 70px
+ z-index 200
+ padding 5px
+ line-height normal
+ border-radius 2px
+ opacity 0
+ transition 0.1s
+
+.tooltip:lang(ja)
+ @extend .tooltip
+ right 35px
+
+body[data-theme="dark"]
+ .control-fullScreenButton
topBarButtonDark()
\ No newline at end of file
diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl
index e9f7f59b9..4417dc607 100644
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -138,162 +138,49 @@
.export--unable
cursor not-allowed
-body[data-theme="dark"]
- .control-infoButton-panel
- background-color $ui-dark-noteList-backgroundColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .control-infoButton-panel
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
- .control-infoButton-panel-trash
- background-color $ui-dark-noteList-backgroundColor
+ .control-infoButton-panel-trash
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
- .modification-date
- color $ui-dark-text-color
+ .modification-date
+ color get-theme-var(theme, 'text-color')
- .modification-date-desc
- color $ui-inactive-text-color
-
- .infoPanel-defaul-count
- color $ui-dark-text-color
-
- .infoPanel-sub-count
- color $ui-inactive-text-color
-
- .infoPanel-default
- color $ui-dark-text-color
-
- .infoPanel-sub
- color $ui-inactive-text-color
-
- .infoPanel-noteLink
- background-color alpha($ui-dark-borderColor, 60%)
- color $ui-dark-text-color
-
- [id=export-wrap]
- button
- color $ui-dark-inactive-text-color
- &:hover
- background-color alpha($ui-dark-borderColor, 20%)
- color $ui-dark-text-color
- p
- color $ui-dark-inactive-text-color
- &:hover
- color $ui-dark-text-color
-
-body[data-theme="solarized-dark"]
- .control-infoButton-panel
- background-color $ui-solarized-dark-noteList-backgroundColor
-
- .control-infoButton-panel-trash
- background-color $ui-solarized-ark-noteList-backgroundColor
-
- .modification-date
- color $ui-solarized-ark-text-color
-
- .modification-date-desc
- color $ui-inactive-text-color
-
- .infoPanel-defaul-count
- color $ui-solarized-dark-text-color
-
- .infoPanel-sub-count
- color $ui-inactive-text-color
-
- .infoPanel-default
- color $ui-solarized-ark-text-color
-
- .infoPanel-sub
- color $ui-inactive-text-color
-
- .infoPanel-noteLink
- background-color alpha($ui-solarized-dark-borderColor, 20%)
- color $ui-solarized-dark-text-color
-
- [id=export-wrap]
- button
- color $ui-dark-inactive-text-color
- &:hover
- background-color alpha($ui-solarized-dark-borderColor, 20%)
- color $ui-solarized-ark-text-color
- p
- color $ui-dark-inactive-text-color
- &:hover
- color $ui-solarized-ark-text-color
-
-body[data-theme="monokai"]
- .control-infoButton-panel
- background-color $ui-monokai-noteList-backgroundColor
-
- .control-infoButton-panel-trash
- background-color $ui-monokai-noteList-backgroundColor
-
- .modification-date
- color $ui-monokai-text-color
-
- .modification-date-desc
- color $ui-inactive-text-color
-
- .infoPanel-defaul-count
- color $ui-monokai-text-color
-
- .infoPanel-sub-count
- color $ui-inactive-text-color
-
- .infoPanel-default
- color $ui-monokai-text-color
-
- .infoPanel-sub
- color $ui-inactive-text-color
-
- .infoPanel-noteLink
- background-color alpha($ui-monokai-borderColor, 20%)
- color $ui-monokai-text-color
-
- [id=export-wrap]
- button
- color $ui-dark-inactive-text-color
- &:hover
- background-color alpha($ui-monokai-borderColor, 20%)
- color $ui-monokai-text-color
- p
- color $ui-dark-inactive-text-color
- &:hover
- color $ui-monokai-text-color
-
-body[data-theme="dracula"]
- .control-infoButton-panel
- background-color $ui-dracula-noteList-backgroundColor
-
- .control-infoButton-panel-trash
- background-color $ui-dracula-noteList-backgroundColor
-
- .modification-date
- color $ui-dracula-text-color
-
- .modification-date-desc
- color $ui-inactive-text-color
-
- .infoPanel-defaul-count
- color $ui-dracula-text-color
+ .modification-date-desc
+ color $ui-inactive-text-color
- .infoPanel-sub-count
- color $ui-inactive-text-color
+ .infoPanel-defaul-count
+ color get-theme-var(theme, 'text-color')
- .infoPanel-default
- color $ui-dracula-text-color
+ .infoPanel-sub-count
+ color $ui-inactive-text-color
- .infoPanel-sub
- color $ui-inactive-text-color
+ .infoPanel-default
+ color get-theme-var(theme, 'text-color')
- .infoPanel-noteLink
- background-color alpha($ui-dracula-borderColor, 20%)
- color $ui-dracula-text-color
+ .infoPanel-sub
+ color $ui-inactive-text-color
- [id=export-wrap]
- button
- color $ui-dark-inactive-text-color
- &:hover
- background-color alpha($ui-dracula-borderColor, 20%)
- color $ui-dracula-text-color
- p
- color $ui-dark-inactive-text-color
- &:hover
- color $ui-dracula-text-color
\ No newline at end of file
+ .infoPanel-noteLink
+ background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
+ color get-theme-var(theme, 'text-color')
+
+ [id=export-wrap]
+ button
+ color $ui-dark-inactive-text-color
+ &:hover
+ background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
+ color get-theme-var(theme, 'text-color')
+ p
+ color $ui-dark-inactive-text-color
+ &:hover
+ color get-theme-var(theme, 'text-color')
+
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index a7adbea1e..a9ae1421b 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -66,19 +66,14 @@ body[data-theme="dark"]
.control-fullScreenButton
topBarButtonDark()
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ border-left 1px solid get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-body[data-theme="solarized-dark"]
- .root
- border-left 1px solid $ui-solarized-dark-borderColor
- background-color $ui-solarized-dark-noteDetail-backgroundColor
-
-body[data-theme="monokai"]
- .root
- border-left 1px solid $ui-monokai-borderColor
- background-color $ui-monokai-noteDetail-backgroundColor
-
-body[data-theme="dracula"]
- .root
- border-left 1px solid $ui-dracula-borderColor
- background-color $ui-dracula-noteDetail-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index 21670a1b0..59d675836 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -15,6 +15,14 @@ $info-margin-under-border = 30px
padding 0 20px
z-index 99
+.info > div
+ > button
+ -webkit-user-drag none
+ user-select none
+ > img, span
+ -webkit-user-drag none
+ user-select none
+
.info-left
padding 0 10px
width 100%
@@ -94,25 +102,14 @@ body[data-theme="dark"]
.undo-button
topBarButtonDark()
-body[data-theme="solarized-dark"]
- .info
- border-color $ui-solarized-dark-borderColor
- background-color $ui-solarized-dark-noteDetail-backgroundColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .info
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-body[data-theme="monokai"]
- .info
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-noteDetail-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
-body[data-theme="dracula"]
- .info
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-noteDetail-backgroundColor
-
-.info > div
- > button
- -webkit-user-drag none
- user-select none
- > img, span
- -webkit-user-drag none
- user-select none
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 1af936455..c312d2716 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -156,78 +156,35 @@ body[data-theme="dark"]
.control-fullScreenButton
topBarButtonDark()
-body[data-theme="solarized-dark"]
- .root
- border-left 1px solid $ui-solarized-dark-borderColor
- background-color $ui-solarized-dark-noteDetail-backgroundColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ border-left 1px solid get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
- .body
- background-color $ui-solarized-dark-noteDetail-backgroundColor
+ .body
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
- .body .description textarea
- background-color $ui-solarized-dark-noteDetail-backgroundColor
- color $ui-solarized-dark-text-color
- border 1px solid $ui-solarized-dark-borderColor
-
- .tabList .tabButton
- border-color $ui-solarized-dark-borderColor
+ .body .description textarea
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+ border 1px solid get-theme-var(theme, 'borderColor')
- .tabButton
- &:hover
- color $ui-solarized-dark-button--active-color
- background-color $ui-solarized-dark-noteDetail-backgroundColor
- transition 0.15s
-
- .tabList
- background-color $ui-solarized-dark-noteDetail-backgroundColor
- color $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
- .root
- border-left 1px solid $ui-monokai-borderColor
- background-color $ui-monokai-noteDetail-backgroundColor
-
- .body
- background-color $ui-monokai-noteDetail-backgroundColor
-
- .body .description textarea
- background-color $ui-monokai-noteDetail-backgroundColor
- color $ui-monokai-text-color
- border 1px solid $ui-monokai-borderColor
-
- .tabList .tabButton
- border-color $ui-monokai-borderColor
+ .tabList .tabButton
+ border-color get-theme-var(theme, 'borderColor')
- .tabButton
- &:hover
- color $ui-monokai-text-color
- background-color $ui-monokai-noteDetail-backgroundColor
-
- .tabList
- background-color $ui-monokai-noteDetail-backgroundColor
- color $ui-monokai-text-color
-
-body[data-theme="dracula"]
- .root
- border-left 1px solid $ui-dracula-borderColor
- background-color $ui-dracula-noteDetail-backgroundColor
-
- .body
- background-color $ui-dracula-noteDetail-backgroundColor
-
- .body .description textarea
- background-color $ui-dracula-noteDetail-backgroundColor
- color $ui-dracula-text-color
- border 1px solid $ui-dracula-borderColor
+ .tabButton
+ &:hover
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+ transition 0.15s
- .tabList .tabButton
- border-color $ui-dracula-borderColor
+ .tabList
+ background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+ color get-theme-var(theme, 'text-color')
- .tabButton
- &:hover
- color $ui-dracula-text-color
- background-color $ui-dracula-noteDetail-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
- .tabList
- background-color $ui-dracula-noteDetail-backgroundColor
- color $ui-dracula-text-color
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index 844561c6b..6107b7311 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -54,35 +54,20 @@ body[data-theme="dark"]
.tag-label
color $ui-dark-text-color
-body[data-theme="solarized-dark"]
- .tag
- background-color $ui-solarized-dark-tag-backgroundColor
-
- .tag-removeButton
- border-color $ui-button--focus-borderColor
- background-color transparent
-
- .tag-label
- color $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
- .tag
- background-color $ui-monokai-tag-backgroundColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .tag
+ background-color get-theme-var(theme, 'tag-backgroundColor')
- .tag-removeButton
- border-color $ui-button--focus-borderColor
- background-color transparent
+ .tag-removeButton
+ border-color $ui-button--focus-borderColor
+ background-color transparent
- .tag-label
- color $ui-monokai-text-color
+ .tag-label
+ color get-theme-var(theme, 'text-color')
-body[data-theme="dracula"]
- .tag
- background-color $ui-dracula-tag-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
- .tag-removeButton
- border-color $ui-dracula-button--focus-borderColor
- background-color transparent
-
- .tag-label
- color $ui-dracula-borderColor
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/Detail/ToggleDirectionButton.styl b/browser/main/Detail/ToggleDirectionButton.styl
index 5146ad239..15f907787 100644
--- a/browser/main/Detail/ToggleDirectionButton.styl
+++ b/browser/main/Detail/ToggleDirectionButton.styl
@@ -46,6 +46,13 @@
left -8px
width 70px
+.control-toggleModeButton
+ -webkit-user-drag none
+ user-select none
+ > div img
+ -webkit-user-drag none
+ user-select none
+
body[data-theme="dark"]
.control-fullScreenButton
topBarButtonDark()
@@ -63,23 +70,16 @@ body[data-theme="solarized-dark"]
background-color #1EC38B
box-shadow 2px 0px 7px #222222
-body[data-theme="monokai"]
- .control-toggleModeButton
- background-color #373831
- .active
- background-color #f92672
- box-shadow 2px 0px 7px #222222
+apply-theme(theme)
+ body[data-theme={theme}]
+ .control-toggleModeButton
+ background-color get-theme-var(theme, 'borderColor')
+ .active
+ background-color get-theme-var(theme, 'active-color')
+ box-shadow 2px 0px 7px #222222
-body[data-theme="dracula"]
- .control-toggleModeButton
- background-color #44475a
- .active
- background-color #bd93f9
- box-shadow 2px 0px 7px #222222
+for theme in 'dracula'
+ apply-theme(theme)
-.control-toggleModeButton
- -webkit-user-drag none
- user-select none
- > div img
- -webkit-user-drag none
- user-select none
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl
index 39d30973e..a9579fcd0 100644
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -1,84 +1,84 @@
-.control-toggleModeButton
- height 25px
- border-radius 50px
- background-color #F4F4F4
- width 52px
- display flex
- align-items center
- position: relative
- top 2px
- .active
- background-color #1EC38B
- width 33px
- height 24px
- box-shadow 2px 0px 7px #eee
- z-index 1
-
- div
- width 40px
- height 100%
- border-radius 50%
- display flex
- align-items center
- justify-content center
- cursor pointer
-
- &:hover .tooltip
- opacity 1
-
-.tooltip
- tooltip()
- position absolute
- pointer-events none
- top 33px
- left -10px
- z-index 200
- width 80px
- padding 5px
- line-height normal
- border-radius 2px
- opacity 0
- transition 0.1s
-
-.tooltip:lang(ja)
- @extend .tooltip
- left -8px
- width 70px
-
-body[data-theme="dark"]
- .control-fullScreenButton
- topBarButtonDark()
-
- .control-toggleModeButton
- background-color #3A404C
- .active
- background-color #1EC38B
- box-shadow 2px 0px 7px #444444
-
-body[data-theme="solarized-dark"]
- .control-toggleModeButton
- background-color #002B36
- .active
- background-color #1EC38B
- box-shadow 2px 0px 7px #222222
-
-body[data-theme="monokai"]
- .control-toggleModeButton
- background-color #373831
- .active
- background-color #f92672
- box-shadow 2px 0px 7px #222222
-
-body[data-theme="dracula"]
- .control-toggleModeButton
- background-color #44475a
- .active
- background-color #bd93f9
- box-shadow 2px 0px 7px #222222
-
-.control-toggleModeButton
- -webkit-user-drag none
- user-select none
- > div img
- -webkit-user-drag none
- user-select none
+.control-toggleModeButton
+ height 25px
+ border-radius 50px
+ background-color #F4F4F4
+ width 52px
+ display flex
+ align-items center
+ position: relative
+ top 2px
+ .active
+ background-color #1EC38B
+ width 33px
+ height 24px
+ box-shadow 2px 0px 7px #eee
+ z-index 1
+
+ div
+ width 40px
+ height 100%
+ border-radius 50%
+ display flex
+ align-items center
+ justify-content center
+ cursor pointer
+
+ &:hover .tooltip
+ opacity 1
+
+.control-toggleModeButton
+ -webkit-user-drag none
+ user-select none
+ > div img
+ -webkit-user-drag none
+ user-select none
+
+.tooltip
+ tooltip()
+ position absolute
+ pointer-events none
+ top 33px
+ left -10px
+ z-index 200
+ width 80px
+ padding 5px
+ line-height normal
+ border-radius 2px
+ opacity 0
+ transition 0.1s
+
+.tooltip:lang(ja)
+ @extend .tooltip
+ left -8px
+ width 70px
+
+body[data-theme="dark"]
+ .control-fullScreenButton
+ topBarButtonDark()
+
+ .control-toggleModeButton
+ background-color #3A404C
+ .active
+ background-color #1EC38B
+ box-shadow 2px 0px 7px #444444
+
+body[data-theme="solarized-dark"]
+ .control-toggleModeButton
+ background-color #002B36
+ .active
+ background-color #1EC38B
+ box-shadow 2px 0px 7px #222222
+
+apply-theme(theme)
+ body[data-theme={theme}]
+ .control-toggleModeButton
+ background-color get-theme-var(theme, 'borderColor')
+ .active
+ background-color get-theme-var(theme, 'active-color')
+ box-shadow 2px 0px 7px #222222
+
+for theme in 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/main/Main.js b/browser/main/Main.js
index e277c4219..2e706893e 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -16,7 +16,9 @@ import { store } from 'browser/main/store'
import i18n from 'browser/lib/i18n'
import { getLocales } from 'browser/lib/Languages'
import applyShortcuts from 'browser/main/lib/shortcutManager'
+import uiThemes from 'browser/lib/ui-themes'
import { push } from 'connected-react-router'
+
const path = require('path')
const electron = require('electron')
const { remote } = electron
@@ -142,9 +144,7 @@ class Main extends React.Component {
componentDidMount () {
const { dispatch, config } = this.props
- const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
-
- if (supportedThemes.indexOf(config.ui.theme) !== -1) {
+ if (uiThemes.some(theme => theme.name === config.ui.theme)) {
document.body.setAttribute('data-theme', config.ui.theme)
} else {
document.body.setAttribute('data-theme', 'default')
diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl
index 75a9061ca..57b0fc03e 100644
--- a/browser/main/NewNoteButton/NewNoteButton.styl
+++ b/browser/main/NewNoteButton/NewNoteButton.styl
@@ -72,14 +72,13 @@ body[data-theme="dark"]
.control-newNoteButton-tooltip
darkTooltip()
-body[data-theme="solarized-dark"]
- .root, .root--expanded
- background-color $ui-solarized-dark-noteList-backgroundColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root, .root--expanded
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
-body[data-theme="monokai"]
- .root, .root--expanded
- background-color $ui-monokai-noteList-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
-body[data-theme="dracula"]
- .root, .root--expanded
- background-color $ui-dracula-noteList-backgroundColor
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 73959c9ba..2b42ae3df 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -66,99 +66,33 @@ body[data-theme="white"]
.control
background-color $ui-white-noteList-backgroundColor
-body[data-theme="dark"]
- .root
- border-color $ui-dark-borderColor
- background-color $ui-dark-noteList-backgroundColor
-
- .control
- background-color $ui-dark-noteList-backgroundColor
- border-color $ui-dark-borderColor
-
- .control-sortBy-select
- &:hover
- transition 0.2s
- color $ui-dark-text-color
-
- .control-button
- color $ui-dark-inactive-text-color
- &:hover
- color $ui-dark-text-color
-
- .control-button--active
- color $ui-dark-text-color
- &:active
- color $ui-dark-text-color
-
-
-body[data-theme="solarized-dark"]
- .root
- border-color $ui-solarized-dark-borderColor
- background-color $ui-solarized-dark-noteList-backgroundColor
-
- .control
- background-color $ui-solarized-dark-noteList-backgroundColor
- border-color $ui-solarized-dark-borderColor
-
- .control-sortBy-select
- &:hover
- transition 0.2s
- color $ui-solarized-dark-text-color
-
- .control-button
- color $ui-solarized-dark-inactive-text-color
- &:hover
- color $ui-solarized-dark-text-color
-
- .control-button--active
- color $ui-solarized-dark-text-color
- &:active
- color $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
- .root
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-noteList-backgroundColor
-
- .control
- background-color $ui-monokai-noteList-backgroundColor
- border-color $ui-monokai-borderColor
-
- .control-sortBy-select
- &:hover
- transition 0.2s
- color $ui-monokai-text-color
-
- .control-button
- color $ui-monokai-inactive-text-color
- &:hover
- color $ui-monokai-text-color
-
- .control-button--active
- color $ui-monokai-text-color
- &:active
- color $ui-monokai-text-color
-
-body[data-theme="dracula"]
- .root
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-noteList-backgroundColor
-
- .control
- background-color $ui-dracula-noteList-backgroundColor
- border-color $ui-dracula-borderColor
-
- .control-sortBy-select
- &:hover
- transition 0.2s
- color $ui-dracula-text-color
-
- .control-button
- color $ui-dracula-inactive-text-color
- &:hover
- color $ui-dracula-text-color
-
- .control-button--active
- color $ui-dracula-text-color
- &:active
- color $ui-dracula-text-color
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+
+ .control
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+ border-color get-theme-var(theme, 'borderColor')
+
+ .control-sortBy-select
+ &:hover
+ transition 0.2s
+ color get-theme-var(theme, 'text-color')
+
+ .control-button
+ color get-theme-var(theme, 'inactive-text-color')
+ &:hover
+ color get-theme-var(theme, 'text-color')
+
+ .control-button--active
+ color get-theme-var(theme, 'text-color')
+ &:active
+ color get-theme-var(theme, 'text-color')
+
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/SideNav/PreferenceButton.styl b/browser/main/SideNav/PreferenceButton.styl
index 54513cb6b..33422b4f6 100644
--- a/browser/main/SideNav/PreferenceButton.styl
+++ b/browser/main/SideNav/PreferenceButton.styl
@@ -1,52 +1,50 @@
-.top-menu-preference
- navButtonColor()
- position absolute
- top 22px
- right 10px
- width 2em
- background-color transparent
- &:hover
- color $ui-button-default--active-backgroundColor
- background-color transparent
- .tooltip
- opacity 1
- &:active, &:active:hover
- color $ui-button-default--active-backgroundColor
-
-body[data-theme="white"]
- .top-menu-preference
- navWhiteButtonColor()
- background-color transparent
- &:hover
- color #0B99F1
- background-color transparent
- &:active, &:active:hover
- color #0B99F1
- background-color transparent
-
-body[data-theme="dark"]
- .top-menu-preference
- navDarkButtonColor()
- background-color transparent
- &:active
- background-color alpha($ui-dark-button--active-backgroundColor, 20%)
- background-color transparent
- &:hover
- background-color alpha($ui-dark-button--active-backgroundColor, 20%)
- background-color transparent
-
-
-
-.tooltip
- tooltip()
- position absolute
- pointer-events none
- top 26px
- left -20px
- z-index 200
- padding 5px
- line-height normal
- border-radius 2px
- opacity 0
- transition 0.1s
- white-space nowrap
+.top-menu-preference
+ navButtonColor()
+ position absolute
+ top 22px
+ right 10px
+ width 2em
+ background-color transparent
+ &:hover
+ color $ui-button-default--active-backgroundColor
+ background-color transparent
+ .tooltip
+ opacity 1
+ &:active, &:active:hover
+ color $ui-button-default--active-backgroundColor
+
+body[data-theme="white"]
+ .top-menu-preference
+ navWhiteButtonColor()
+ background-color transparent
+ &:hover
+ color #0B99F1
+ background-color transparent
+ &:active, &:active:hover
+ color #0B99F1
+ background-color transparent
+
+body[data-theme="dark"]
+ .top-menu-preference
+ navDarkButtonColor()
+ background-color transparent
+ &:active
+ background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+ background-color transparent
+ &:hover
+ background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+ background-color transparent
+
+.tooltip
+ tooltip()
+ position absolute
+ pointer-events none
+ top 26px
+ left -20px
+ z-index 200
+ padding 5px
+ line-height normal
+ border-radius 2px
+ opacity 0
+ transition 0.1s
+ white-space nowrap
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 9fa6d4fa8..86b6caebc 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -113,17 +113,14 @@ body[data-theme="dark"]
.top
border-color $ui-dark-borderColor
-body[data-theme="solarized-dark"]
- .root, .root--folded
- background-color $ui-solarized-dark-backgroundColor
- border-right 1px solid $ui-solarized-dark-borderColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root, .root--folded
+ background-color get-theme-var(theme, 'backgroundColor')
+ border-right 1px solid get-theme-var(theme, 'borderColor')
-body[data-theme="monokai"]
- .root, .root--folded
- background-color $ui-monokai-backgroundColor
- border-right 1px solid $ui-monokai-borderColor
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
-body[data-theme="dracula"]
- .root, .root--folded
- background-color $ui-dracula-backgroundColor
- border-right 1px solid $ui-dracula-borderColor
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index a06ecb111..375a989f1 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -132,55 +132,57 @@ body[data-theme="white"]
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color
-body[data-theme="dark"]
- .header--active
- background-color $ui-dark-button--active-backgroundColor
- transition color background-color 0.15s
+apply-theme(theme)
+ body[data-theme={theme}]
+ .header--active
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+ transition color background-color 0.15s
+
+ .header--active
+ .header-toggleButton
+ color get-theme-var(theme, 'text-color')
+
+ .header--active
+ .header-info
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+ &:active
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+
+ .header--active
+ .header-addFolderButton
+ color get-theme-var(theme, 'text-color')
- .header--active
.header-toggleButton
- color $ui-dark-text-color
+ &:hover
+ transition 0.2s
+ color get-theme-var(theme, 'text-color')
+ background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+ &:active, &:active:hover
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
- .header--active
.header-info
- color $ui-dark-text-color
- background-color $ui-dark-button--active-backgroundColor
- &:active
- color $ui-dark-text-color
- background-color $ui-dark-button--active-backgroundColor
+ background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+ &:hover
+ transition 0.2s
+ color get-theme-var(theme, 'text-color')
+ background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+ &:active, &:active:hover
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
- .header--active
.header-addFolderButton
- color $ui-dark-text-color
-
- .header-toggleButton
- &:hover
- transition 0.2s
- color $ui-dark-text-color
- background-color alpha($ui-dark-button--active-backgroundColor, 60%)
- &:active, &:active:hover
- color $ui-dark-text-color
- background-color $ui-dark-button--active-backgroundColor
-
- .header-info
- background-color alpha($ui-dark-button--active-backgroundColor, 20%)
- &:hover
- transition 0.2s
- color $ui-dark-text-color
- background-color alpha($ui-dark-button--active-backgroundColor, 20%)
- &:active, &:active:hover
- color $ui-dark-text-color
- background-color $ui-dark-button--active-backgroundColor
-
- .header-addFolderButton
- &:hover
- transition 0.2s
- color $ui-dark-text-color
- background-color alpha($ui-dark-button--active-backgroundColor, 60%)
- &:active, &:active:hover
- color $ui-dark-text-color
- background-color $ui-dark-button--active-backgroundColor
-
-
-
-
+ &:hover
+ transition 0.2s
+ color get-theme-var(theme, 'text-color')
+ background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+ &:active, &:active:hover
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+
+apply-theme('dark')
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/SideNav/SwitchButton.styl b/browser/main/SideNav/SwitchButton.styl
index 36099140a..2184bc69b 100644
--- a/browser/main/SideNav/SwitchButton.styl
+++ b/browser/main/SideNav/SwitchButton.styl
@@ -1,60 +1,60 @@
-.non-active-button
- color $ui-inactive-text-color
- font-size 16px
- border 0
- background-color transparent
- transition 0.2s
- display flex
- text-align center
- margin-right 4px
- position relative
- &:hover
- color alpha(#239F86, 60%)
- .tooltip
- opacity 1
-
-.active-button
- @extend .non-active-button
- color $ui-button-default--active-backgroundColor
-
-.tooltip
- tooltip()
- position absolute
- pointer-events none
- top 22px
- left -2px
- z-index 200
- padding 5px
- line-height normal
- border-radius 2px
- opacity 0
- transition 0.1s
- white-space nowrap
-
-body[data-theme="white"]
- .non-active-button
- color $ui-inactive-text-color
- &:hover
- color alpha(#0B99F1, 60%)
-
- .tag-title
- p
- color $ui-text-color
-
- .non-active-button
- &:hover
- color alpha(#0B99F1, 60%)
-
- .active-button
- @extend .non-active-button
- color #0B99F1
-
-body[data-theme="dark"]
- .non-active-button
- color alpha($ui-dark-text-color, 60%)
- &:hover
- color alpha(#0B99F1, 60%)
-
- .tag-title
- p
+.non-active-button
+ color $ui-inactive-text-color
+ font-size 16px
+ border 0
+ background-color transparent
+ transition 0.2s
+ display flex
+ text-align center
+ margin-right 4px
+ position relative
+ &:hover
+ color alpha(#239F86, 60%)
+ .tooltip
+ opacity 1
+
+.active-button
+ @extend .non-active-button
+ color $ui-button-default--active-backgroundColor
+
+.tooltip
+ tooltip()
+ position absolute
+ pointer-events none
+ top 22px
+ left -2px
+ z-index 200
+ padding 5px
+ line-height normal
+ border-radius 2px
+ opacity 0
+ transition 0.1s
+ white-space nowrap
+
+body[data-theme="white"]
+ .non-active-button
+ color $ui-inactive-text-color
+ &:hover
+ color alpha(#0B99F1, 60%)
+
+ .tag-title
+ p
+ color $ui-text-color
+
+ .non-active-button
+ &:hover
+ color alpha(#0B99F1, 60%)
+
+ .active-button
+ @extend .non-active-button
+ color #0B99F1
+
+body[data-theme="dark"]
+ .non-active-button
+ color alpha($ui-dark-text-color, 60%)
+ &:hover
+ color alpha(#0B99F1, 60%)
+
+ .tag-title
+ p
color alpha($ui-dark-text-color, 60%)
\ No newline at end of file
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 23dec2089..0ff3e7e5d 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -78,24 +78,19 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor
border-left 1px solid $ui-dark-borderColor
-body[data-theme="monokai"]
- navButtonColor()
- .zoom
- border-color $ui-dark-borderColor
- color $ui-monokai-text-color
- &:hover
- transition 0.15s
- color $ui-monokai-active-color
- &:active
- color $ui-monokai-active-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .zoom
+ border-color $ui-dark-borderColor
+ color get-theme-var(theme, 'text-color')
+ &:hover
+ transition 0.15s
+ color get-theme-var(theme, 'active-color')
+ &:active
+ color get-theme-var(theme, 'active-color')
-body[data-theme="dracula"]
- navButtonColor()
- .zoom
- border-color $ui-dark-borderColor
- color $ui-dracula-text-color
- &:hover
- transition 0.15s
- color $ui-dracula-active-color
- &:active
- color $ui-dracula-active-color
\ No newline at end of file
+for theme in 'dracula' 'solarized-dark'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 61b21fc5d..a0eeadf60 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -212,69 +212,31 @@ body[data-theme="dark"]
.control-newPostButton-tooltip
darkTooltip()
-
-body[data-theme="solarized-dark"]
- .root, .root--expanded
- background-color $ui-solarized-dark-noteList-backgroundColor
-
- .control
- border-color $ui-solarized-dark-borderColor
- .control-search
- background-color $ui-solarized-dark-noteList-backgroundColor
-
- .control-search-icon
- absolute top bottom left
- line-height 32px
- width 35px
- color $ui-solarized-dark-inactive-text-color
- background-color $ui-solarized-dark-noteList-backgroundColor
-
- .control-search-input
- background-color $ui-solarized-dark-noteList-backgroundColor
- input
- background-color $ui-solarized-dark-noteList-backgroundColor
- color $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
- .root, .root--expanded
- background-color $ui-monokai-noteList-backgroundColor
-
- .control
- border-color $ui-monokai-borderColor
- .control-search
- background-color $ui-monokai-noteList-backgroundColor
-
- .control-search-icon
- absolute top bottom left
- line-height 32px
- width 35px
- color $ui-monokai-inactive-text-color
- background-color $ui-monokai-noteList-backgroundColor
-
- .control-search-input
- background-color $ui-monokai-noteList-backgroundColor
- input
- background-color $ui-monokai-noteList-backgroundColor
- color $ui-monokai-text-color
-
-body[data-theme="dracula"]
- .root, .root--expanded
- background-color $ui-dracula-noteList-backgroundColor
-
- .control
- border-color $ui-dracula-borderColor
- .control-search
- background-color $ui-dracula-noteList-backgroundColor
-
- .control-search-icon
- absolute top bottom left
- line-height 32px
- width 35px
- color $ui-dracula-inactive-text-color
- background-color $ui-dracula-noteList-backgroundColor
-
- .control-search-input
- background-color $ui-dracula-noteList-backgroundColor
- input
- background-color $ui-dracula-noteList-backgroundColor
- color $ui-dracula-text-color
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root, .root--expanded
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+
+ .control
+ border-color get-theme-var(theme, 'borderColor')
+ .control-search
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+
+ .control-search-icon
+ absolute top bottom left
+ line-height 32px
+ width 35px
+ color get-theme-var(theme, 'inactive-text-color')
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+
+ .control-search-input
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+ input
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/global.styl b/browser/main/global.styl
index d1205b377..3f513c787 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -96,16 +96,6 @@ modalBackColor = white
z-index modalZIndex + 1
-body[data-theme="dark"]
- background-color $ui-dark-backgroundColor
- ::-webkit-scrollbar-thumb
- background-color rgba(0, 0, 0, 0.3)
- .ModalBase
- .modalBack
- background-color $ui-dark-backgroundColor
- .sortableItemHelper
- color: $ui-dark-text-color
-
.CodeMirror
font-family inherit !important
line-height 1.4em
@@ -148,35 +138,22 @@ body[data-theme="dark"]
.sortableItemHelper
z-index modalZIndex + 5
-body[data-theme="solarized-dark"]
- background-color $ui-solarized-dark-backgroundColor
- ::-webkit-scrollbar-thumb
- background-color rgba(0, 0, 0, 0.3)
- .ModalBase
- .modalBack
- background-color $ui-solarized-dark-backgroundColor
- .sortableItemHelper
- color: $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
- background-color $ui-monokai-backgroundColor
- ::-webkit-scrollbar-thumb
- background-color rgba(0, 0, 0, 0.3)
- .ModalBase
- .modalBack
- background-color $ui-monokai-backgroundColor
- .sortableItemHelper
- color: $ui-monokai-text-color
-
-body[data-theme="dracula"]
- background-color $ui-dracula-backgroundColor
- ::-webkit-scrollbar-thumb
- background-color rgba(0, 0, 0, 0.3)
- .ModalBase
- .modalBack
- background-color $ui-dracula-backgroundColor
- .sortableItemHelper
- color: $ui-dracula-text-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ background-color get-theme-var(theme, 'backgroundColor')
+ ::-webkit-scrollbar-thumb
+ background-color rgba(0, 0, 0, 0.3)
+ .ModalBase
+ .modalBack
+ background-color get-theme-var(theme, 'backgroundColor')
+ .sortableItemHelper
+ color get-theme-var(theme, 'text-color')
+
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
body[data-theme="default"]
.SideNav ::-webkit-scrollbar-thumb
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index f73895df9..26fda02b4 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -2,6 +2,7 @@ import _ from 'lodash'
import RcParser from 'browser/lib/RcParser'
import i18n from 'browser/lib/i18n'
import ee from 'browser/main/lib/eventEmitter'
+import uiThemes from 'browser/lib/ui-themes'
const OSX = global.process.platform === 'darwin'
const win = global.process.platform === 'win32'
@@ -180,16 +181,8 @@ function set (updates) {
if (!validate(newConfig)) throw new Error('INVALID CONFIG')
_save(newConfig)
- if (newConfig.ui.theme === 'dark') {
- document.body.setAttribute('data-theme', 'dark')
- } else if (newConfig.ui.theme === 'white') {
- document.body.setAttribute('data-theme', 'white')
- } else if (newConfig.ui.theme === 'solarized-dark') {
- document.body.setAttribute('data-theme', 'solarized-dark')
- } else if (newConfig.ui.theme === 'monokai') {
- document.body.setAttribute('data-theme', 'monokai')
- } else if (newConfig.ui.theme === 'dracula') {
- document.body.setAttribute('data-theme', 'dracula')
+ if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) {
+ document.body.setAttribute('data-theme', newConfig.ui.theme)
} else {
document.body.setAttribute('data-theme', 'default')
}
diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl
index 938486833..95d6249ad 100644
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -51,106 +51,40 @@
font-size 14px
colorPrimaryButton()
-body[data-theme="dark"]
- .root
- modalDark()
- width 500px
- height 270px
- overflow hidden
- position relative
-
- .header
- background-color transparent
- border-color $ui-dark-borderColor
- color $ui-dark-text-color
-
- .control-folder-label
- color $ui-dark-text-color
-
- .control-folder-input
- border 1px solid $ui-input--create-folder-modal
- color white
-
- .description
- color $ui-inactive-text-color
-
- .control-confirmButton
- colorDarkPrimaryButton()
-
-body[data-theme="solarized-dark"]
- .root
- modalSolarizedDark()
- width 500px
- height 270px
- overflow hidden
- position relative
-
- .header
- background-color transparent
- border-color $ui-dark-borderColor
- color $ui-solarized-dark-text-color
-
- .control-folder-label
- color $ui-solarized-dark-text-color
-
- .control-folder-input
- border 1px solid $ui-input--create-folder-modal
- color white
-
- .description
- color $ui-inactive-text-color
-
- .control-confirmButton
- colorSolarizedDarkPrimaryButton()
-
-body[data-theme="monokai"]
- .root
- modalMonokai()
- width 500px
- height 270px
- overflow hidden
- position relative
-
- .header
- background-color transparent
- border-color $ui-dark-borderColor
- color $ui-monokai-text-color
-
- .control-folder-label
- color $ui-monokai-text-color
-
- .control-folder-input
- border 1px solid $ui-input--create-folder-modal
- color white
-
- .description
- color $ui-inactive-text-color
-
- .control-confirmButton
- colorMonokaiPrimaryButton()
-
-body[data-theme="dracula"]
- .root
- modalDracula()
- width 500px
- height 270px
- overflow hidden
- position relative
-
- .header
- background-color transparent
- border-color $ui-dark-borderColor
- color $ui-dracula-text-color
-
- .control-folder-label
- color $ui-dracula-text-color
-
- .control-folder-input
- border 1px solid $ui-input--create-folder-modal
- color white
-
- .description
- color $ui-inactive-text-color
-
- .control-confirmButton
- colorDraculaPrimaryButton()
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ width 500px
+ height 270px
+ overflow hidden
+ position relative
+ position relative
+ z-index $modal-z-index
+ width 100%
+ background-color get-theme-var(theme, 'backgroundColor')
+ overflow hidden
+ border-radius $modal-border-radius
+
+ .header
+ background-color transparent
+ border-color $ui-dark-borderColor
+ color get-theme-var(theme, 'text-color')
+
+ .control-folder-label
+ color get-theme-var(theme, 'text-color')
+
+ .control-folder-input
+ border 1px solid $ui-input--create-folder-modal
+ color white
+
+ .description
+ color $ui-inactive-text-color
+
+ .control-confirmButton
+ colorThemedPrimaryButton(theme)
+
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/modals/CreateMarkdownFromURLModal.styl b/browser/main/modals/CreateMarkdownFromURLModal.styl
index 5e59e4654..8aca1505c 100644
--- a/browser/main/modals/CreateMarkdownFromURLModal.styl
+++ b/browser/main/modals/CreateMarkdownFromURLModal.styl
@@ -51,110 +51,39 @@
font-size 14px
colorPrimaryButton()
-body[data-theme="dark"]
- .root
- modalDark()
- width 500px
- height 270px
- overflow hidden
- position relative
-
- .header
- background-color transparent
- border-color $ui-dark-borderColor
- color $ui-dark-text-color
-
- .control-folder-label
- color $ui-dark-text-color
-
- .control-folder-input
- border 1px solid $ui-input--create-folder-modal
- color white
-
- .description
- color $ui-inactive-text-color
-
- .control-confirmButton
- colorDarkPrimaryButton()
-
-body[data-theme="solarized-dark"]
- .root
- modalSolarizedDark()
- width 500px
- height 270px
- overflow hidden
- position relative
-
- .header
- background-color transparent
- border-color $ui-dark-borderColor
- color $ui-solarized-dark-text-color
-
- .control-folder-label
- color $ui-solarized-dark-text-color
-
- .control-folder-input
- border 1px solid $ui-input--create-folder-modal
- color white
-
- .description
- color $ui-inactive-text-color
-
- .control-confirmButton
- colorSolarizedDarkPrimaryButton()
-
.error
text-align center
color #F44336
-body[data-theme="monokai"]
- .root
- modalMonokai()
- width 500px
- height 270px
- overflow hidden
- position relative
-
- .header
- background-color transparent
- border-color $ui-dark-borderColor
- color $ui-monokai-text-color
-
- .control-folder-label
- color $ui-monokai-text-color
-
- .control-folder-input
- border 1px solid $ui-input--create-folder-modal
- color white
-
- .description
- color $ui-inactive-text-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ background-color transparent
+ width 500px
+ height 270px
+ overflow hidden
+ position relative
- .control-confirmButton
- colorMonokaiPrimaryButton()
+ .header
+ background-color transparent
+ border-color get-theme-var(theme, 'borderColor')
+ color get-theme-var(theme, 'text-color')
-body[data-theme="dracula"]
- .root
- modalDracula()
- width 500px
- height 270px
- overflow hidden
- position relative
+ .control-folder-label
+ color get-theme-var(theme, 'text-color')
- .header
- background-color transparent
- border-color $ui-dracula-borderColor
- color $ui-dracula-text-color
+ .control-folder-input
+ border 1px solid $ui-input--create-folder-modal
+ color white
- .control-folder-label
- color $ui-dracula-text-color
+ .description
+ color $ui-inactive-text-color
- .control-folder-input
- border 1px solid $ui-input--create-folder-modal
- color white
+ .control-confirmButton
+ colorThemedPrimaryButton(theme)
- .description
- color $ui-inactive-text-color
+for theme in 'dark' 'dracula' 'solarized-dark'
+ apply-theme(theme)
- .control-confirmButton
- colorDraculaPrimaryButton()
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl
index ff0052bdb..a9be5a226 100644
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -54,70 +54,26 @@
margin-bottom 25px
cursor pointer
-body[data-theme="dark"]
- .root
- modalDark()
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ background-color transparent
- .header
- color $ui-dark-text-color
+ .header
+ color get-theme-var(theme, 'text-color')
- .control-button
- border-color $ui-dark-borderColor
- color $ui-dark-text-color
- background-color transparent
- &:focus
- colorDarkPrimaryButton()
+ .control-button
+ border-color get-theme-var(theme, 'borderColor')
+ color get-theme-var(theme, 'text-color')
+ background-color transparent
+ &:focus
+ colorThemedPrimaryButton(theme)
- .description, .from-url
- color $ui-inactive-text-color
+ .description
+ color get-theme-var(theme, 'text-color')
-body[data-theme="solarized-dark"]
- .root
- background-color transparent
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
- .header
- color $ui-solarized-dark-text-color
-
- .control-button
- border-color $ui-solarized-dark-borderColor
- color $ui-solarized-dark-text-color
- background-color transparent
- &:focus
- colorDarkPrimaryButton()
-
- .description, .from-url
- color $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
- .root
- background-color transparent
-
- .header
- color $ui-monokai-text-color
-
- .control-button
- border-color $ui-monokai-borderColor
- color $ui-monokai-text-color
- background-color transparent
- &:focus
- colorDarkPrimaryButton()
-
- .description, .from-url
- color $ui-monokai-text-color
-
-body[data-theme="dracula"]
- .root
- background-color transparent
-
- .header
- color $ui-dracula-text-color
-
- .control-button
- border-color $ui-dracula-borderColor
- color $ui-dracula-text-color
- background-color transparent
- &:focus
- colorDraculaPrimaryButton()
-
- .description
- color $ui-dracula-text-color
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 0e22833d9..dbfb393e5 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -2,7 +2,6 @@
.root
padding 15px
- color $ui-text-color
margin-bottom 30px
.group
@@ -14,7 +13,6 @@
.group-header2
font-size 20px
- color $ui-text-color
margin-bottom 15px
margin-top 30px
@@ -136,20 +134,18 @@ colorDarkControl()
background-color $ui-dark-backgroundColor
color $ui-dark-text-color
-colorSolarizedDarkControl()
+colorThemedControl(theme)
border none
- background-color $ui-solarized-dark-button-backgroundColor
- color $ui-solarized-dark-text-color
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ color get-theme-var(theme, 'text-color')
-colorMonokaiControl()
- border none
- background-color $ui-monokai-button-backgroundColor
- color $ui-monokai-text-color
+body[data-theme="default"],
+body[data-theme="white"]
+ .root
+ color $ui-text-color
-colorDraculaControl()
- border none
- background-color $ui-dracula-button-backgroundColor
- color $ui-dracula-text-color
+ .group-header2
+ color $ui-text-color
body[data-theme="dark"]
.root
@@ -180,90 +176,36 @@ body[data-theme="dark"]
select, .group-section-control-input
colorDarkControl()
-
-body[data-theme="solarized-dark"]
- .root
- color $ui-solarized-dark-text-color
-
- .group-header
- .group-header--sub
- color $ui-solarized-dark-text-color
- border-color $ui-solarized-dark-borderColor
-
- .group-header2
- .group-header2--sub
- color $ui-solarized-dark-text-color
-
- .group-section-control-input
- border-color $ui-solarized-dark-borderColor
-
- .group-control
- border-color $ui-solarized-dark-borderColor
- .group-control-leftButton
- colorDarkDefaultButton()
- border-color $ui-solarized-dark-borderColor
- .group-control-rightButton
- colorSolarizedDarkPrimaryButton()
- .group-hint
- colorSolarizedDarkControl()
- .group-section-control
- select, .group-section-control-input
- colorSolarizedDarkControl()
-
-body[data-theme="monokai"]
- .root
- color $ui-monokai-text-color
-
- .group-header
- .group-header--sub
- color $ui-monokai-text-color
- border-color $ui-monokai-borderColor
-
- .group-header2
- .group-header2--sub
- color $ui-monokai-text-color
-
- .group-section-control-input
- border-color $ui-monokai-borderColor
-
- .group-control
- border-color $ui-monokai-borderColor
- .group-control-leftButton
- colorDarkDefaultButton()
- border-color $ui-monokai-borderColor
- .group-control-rightButton
- colorMonokaiPrimaryButton()
- .group-hint
- colorMonokaiControl()
- .group-section-control
- select, .group-section-control-input
- colorMonokaiControl()
-
-body[data-theme="dracula"]
- .root
- color $ui-dracula-text-color
-
- .group-header
- .group-header--sub
- color $ui-dracula-text-color
- border-color $ui-dracula-borderColor
-
- .group-header2
- .group-header2--sub
- color $ui-dracula-text-color
-
- .group-section-control-input
- border-color $ui-dracula-borderColor
-
- .group-control
- border-color $ui-dracula-borderColor
- .group-control-leftButton
- colorDarkDefaultButton()
- border-color $ui-dracula-borderColor
- .group-control-rightButton
- colorDraculaPrimaryButton()
- .group-hint
- colorDraculaControl()
- .group-section-control
- select, .group-section-control-input
- colorDraculaControl()
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ color get-theme-var(theme, 'text-color')
+
+ .group-header
+ color get-theme-var(theme, 'text-color')
+ border-color get-theme-var(theme, 'borderColor')
+
+ .group-header2
+ color get-theme-var(theme, 'text-color')
+
+ .group-section-control-input
+ border-color get-theme-var(theme, 'borderColor')
+
+ .group-control
+ border-color get-theme-var(theme, 'borderColor')
+ .group-control-leftButton
+ colorDarkDefaultButton()
+ border-color get-theme-var(theme, 'borderColor')
+ .group-control-rightButton
+ colorThemedPrimaryButton(theme)
+ .group-hint
+ colorThemedControl(theme)
+ .group-section-control
+ select, .group-section-control-input
+ colorThemedControl(theme)
+
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/main/modals/PreferencesModal/Crowdfunding.styl b/browser/main/modals/PreferencesModal/Crowdfunding.styl
index d1d6fc9f5..4725aa23d 100644
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl
@@ -24,20 +24,15 @@ body[data-theme="dark"]
p
color $ui-dark-text-color
-body[data-theme="solarized-dark"]
- .root
- color $ui-solarized-dark-text-color
- p
- color $ui-solarized-dark-text-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ color get-theme-var(theme, 'text-color')
+ p
+ color get-theme-var(theme, 'text-color')
-body[data-theme="monokai"]
- .root
- color $ui-monokai-text-color
- p
- color $ui-monokai-text-color
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
-body[data-theme="dracula"]
- .root
- color $ui-dracula-text-color
- p
- color $ui-dracula-text-color
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl
index 618e9bc40..32a83d636 100644
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -107,73 +107,32 @@ body[data-theme="dark"]
.folderItem-right-dangerButton
colorDarkDangerButton()
+apply-theme(theme)
+ body[data-theme={theme}]
+ .folderItem
+ &:hover
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ .folderItem-left-danger
+ color $danger-color
-body[data-theme="solarized-dark"]
- .folderItem
- &:hover
- background-color $ui-solarized-dark-button-backgroundColor
-
- .folderItem-left-danger
- color $danger-color
-
- .folderItem-left-key
- color $ui-dark-inactive-text-color
-
- .folderItem-left-colorButton
- colorSolarizedDarkPrimaryButton()
-
- .folderItem-right-button
- colorSolarizedDarkPrimaryButton()
-
- .folderItem-right-confirmButton
- colorSolarizedDarkPrimaryButton()
-
- .folderItem-right-dangerButton
- colorSolarizedDarkPrimaryButton()
-
-body[data-theme="monokai"]
- .folderItem
- &:hover
- background-color $ui-monokai-button-backgroundColor
-
- .folderItem-left-danger
- color $danger-color
+ .folderItem-left-key
+ color $ui-dark-inactive-text-color
- .folderItem-left-key
- color $ui-dark-inactive-text-color
-
- .folderItem-left-colorButton
- colorMonokaiPrimaryButton()
-
- .folderItem-right-button
- colorMonokaiPrimaryButton()
-
- .folderItem-right-confirmButton
- colorMonokaiPrimaryButton()
-
- .folderItem-right-dangerButton
- colorMonokaiPrimaryButton()
-
-body[data-theme="dracula"]
- .folderItem
- &:hover
- background-color $ui-dracula-button-backgroundColor
+ .folderItem-left-colorButton
+ colorThemedPrimaryButton(theme)
- .folderItem-left-danger
- color $danger-color
+ .folderItem-right-button
+ colorThemedPrimaryButton(theme)
- .folderItem-left-key
- color $ui-dark-inactive-text-color
+ .folderItem-right-confirmButton
+ colorThemedPrimaryButton(theme)
- .folderItem-left-colorButton
- colorDraculaPrimaryButton()
+ .folderItem-right-dangerButton
+ colorThemedPrimaryButton(theme)
- .folderItem-right-button
- colorDraculaPrimaryButton()
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
- .folderItem-right-confirmButton
- colorDraculaPrimaryButton()
-
- .folderItem-right-dangerButton
- colorDraculaPrimaryButton()
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl
index c541c91ca..4701d8092 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -59,29 +59,19 @@ body[data-theme="dark"]
.appId
color $ui-dark-text-color
-body[data-theme="solarized-dark"]
- .root
- color $ui-solarized-dark-text-color
- .appId
- color $ui-solarized-dark-text-color
-.list
- a
- color $ui-solarized-dark-active-color
-body[data-theme="monokai"]
- .root
- color $ui-monokai-text-color
- .appId
- color $ui-monokai-text-color
-.list
- a
- color $ui-monokai-active-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ color get-theme-var(theme, 'text-color')
+ .appId
+ color get-theme-var(theme, 'text-color')
+ .list
+ a
+ color get-theme-var(theme, 'active-color')
-body[data-theme="dracula"]
- .root
- color $ui-dracula-text-color
- .appId
- color $ui-dracula-text-color
-.list
- a
- color $ui-dracula-active-color
\ No newline at end of file
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl
index 7004259b3..2e3b40400 100644
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -64,102 +64,31 @@ top-bar--height = 50px
margin-top 10px
overflow-y auto
-body[data-theme="dark"]
- .root
- modalDark()
-
- .top-bar
- background-color transparent
- border-color #4A4D52
- p
- color $tab--dark-text-color
-
- .nav
- background-color transparent
- border-color $ui-dark-borderColor
-
- .nav-button
- background-color transparent
- color $tab--dark-text-color
- &:hover
- color $ui-dark-text-color
-
- .nav-button--active
- @extend .nav-button
- color white
- background-color $dark-primary-button-background--active
- &:hover
- color white
-
-
-body[data-theme="solarized-dark"]
- .root
- background-color transparent
- .top-bar
- background-color transparent
- border-color $ui-solarized-dark-borderColor
- p
- color $ui-solarized-dark-text-color
- .nav
- background-color transparent
- border-color $ui-solarized-dark-borderColor
- .nav-button
- background-color transparent
- color $ui-solarized-dark-text-color
- &:hover
- color $ui-solarized-dark-text-color
-
- .nav-button--active
- @extend .nav-button
- color $ui-solarized-dark-button--active-color
- background-color $ui-solarized-dark-button--active-backgroundColor
- &:hover
- color white
-
-body[data-theme="monokai"]
- .root
- background-color transparent
- .top-bar
- background-color transparent
- border-color $ui-monokai-borderColor
- p
- color $ui-monokai-text-color
- .nav
- background-color transparent
- border-color $ui-monokai-borderColor
- .nav-button
- background-color transparent
- color $ui-monokai-text-color
- &:hover
- color $ui-monokai-text-color
-
- .nav-button--active
- @extend .nav-button
- color $ui-monokai-button--active-color
- background-color $ui-monokai-button--active-backgroundColor
- &:hover
- color white
-
-body[data-theme="dracula"]
- .root
- background-color transparent
- .top-bar
- background-color transparent
- border-color $ui-dracula-borderColor
- p
- color $ui-dracula-text-color
- .nav
- background-color transparent
- border-color $ui-dracula-borderColor
- .nav-button
- background-color transparent
- color $ui-dracula-text-color
- &:hover
- color $ui-dracula-text-color
-
- .nav-button--active
- @extend .nav-button
- color $ui-dracula-button--active-color
- background-color $ui-dracula-button--active-backgroundColor
- &:hover
- color #f8f8f2
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ background-color transparent
+ .top-bar
+ background-color transparent
+ border-color get-theme-var(theme, 'borderColor')
+ p
+ color get-theme-var(theme, 'text-color')
+ .nav
+ background-color transparent
+ border-color get-theme-var(theme, 'borderColor')
+ .nav-button
+ background-color transparent
+ color get-theme-var(theme, 'text-color')
+ &:hover
+ color get-theme-var(theme, 'text-color')
+
+ .nav-button--active
+ @extend .nav-button
+ color get-theme-var(theme, 'button--active-color')
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
+
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl
index 296f81674..83b0a2960 100644
--- a/browser/main/modals/PreferencesModal/SnippetTab.styl
+++ b/browser/main/modals/PreferencesModal/SnippetTab.styl
@@ -140,66 +140,25 @@ body[data-theme="default"], body[data-theme="white"]
.snippet-item-selected
background darken($ui-backgroundColor, 5)
-body[data-theme="dark"]
- .snippets
- background $ui-dark-backgroundColor
- .snippet-item
- color white
- &::after
- background $ui-dark-borderColor
- &:hover
- background darken($ui-dark-backgroundColor, 5)
- .snippet-item-selected
- background darken($ui-dark-backgroundColor, 5)
- .snippet-detail
- color white
- .group-control-button
- colorDarkPrimaryButton()
-
-body[data-theme="solarized-dark"]
- .snippets
- background $ui-solarized-dark-backgroundColor
- .snippet-item
- color white
- &::after
- background $ui-solarized-dark-borderColor
- &:hover
- background darken($ui-solarized-dark-backgroundColor, 5)
- .snippet-item-selected
- background darken($ui-solarized-dark-backgroundColor, 5)
- .snippet-detail
- color white
- .group-control-button
- colorSolarizedDarkPrimaryButton()
-
-body[data-theme="monokai"]
- .snippets
- background $ui-monokai-backgroundColor
- .snippet-item
- color White
- &::after
- background $ui-monokai-borderColor
- &:hover
- background darken($ui-monokai-backgroundColor, 5)
- .snippet-item-selected
- background darken($ui-monokai-backgroundColor, 5)
- .snippet-detail
- color white
- .group-control-button
- colorMonokaiPrimaryButton()
-
-body[data-theme="dracula"]
- .snippets
- background $ui-dracula-backgroundColor
- .snippet-item
- color #f8f8f2
- &::after
- background $ui-dracula-borderColor
- &:hover
- background darken($ui-dracula-backgroundColor, 5)
- .snippet-item-selected
- background darken($ui-dracula-backgroundColor, 5)
- .snippet-detail
- color #f8f8f2
- .group-control-button
- colorDraculaPrimaryButton()
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .snippets
+ background get-theme-var(theme, 'backgroundColor')
+ .snippet-item
+ color get-theme-var(theme, 'text-color')
+ &::after
+ background get-theme-var(theme, 'borderColor')
+ &:hover
+ background darken(get-theme-var(theme, 'backgroundColor'), 5)
+ .snippet-item-selected
+ background darken(get-theme-var(theme, 'backgroundColor'), 5)
+ .snippet-detail
+ color get-theme-var(theme, 'text-color')
+ .group-control-button
+ colorThemedPrimaryButton(theme)
+
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl
index 3e588a17d..03fa65eb9 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.styl
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -103,10 +103,17 @@ body[data-theme="solarized-dark"]
background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color
-body[data-theme="dracula"]
- .header
- border-color $ui-dracula-borderColor
+apply-theme(theme)
+ body[data-theme={theme}]
+ .header
+ border-color get-theme-var(theme, 'borderColor')
- .header-control-button
- colorDraculaDefaultButton()
- border-color $ui-dracula-borderColor
\ No newline at end of file
+ .header-control-button
+ colorThemedPrimaryButton(theme)
+ border-color get-theme-var(theme, 'borderColor')
+
+for theme in 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl
index fbfa89e6b..285e9c609 100644
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -168,122 +168,49 @@ body[data-theme="dark"]
.list-attachement-clear-button
colorDarkPrimaryButton()
-body[data-theme="solarized-dark"]
- .root
- color $ui-solarized-dark-text-color
-
- .folderList-item
- border-bottom $ui-solarized-dark-borderColor
-
- .folderList-empty
- color $ui-solarized-dark-text-color
-
- .list-empty
- color $ui-solarized-dark-text-color
- .list-control-addStorageButton
- border-color $ui-solarized-dark-button-backgroundColor
- background-color $ui-solarized-dark-button-backgroundColor
- color $ui-solarized-dark-text-color
-
- .addStorage-header
- color $ui-solarized-dark-text-color
- border-color $ui-solarized-dark-borderColor
-
- .addStorage-body-section-name-input
- border-color $$ui-solarized-dark-borderColor
-
- .addStorage-body-section-type-description
- color $ui-solarized-dark-text-color
-
- .addStorage-body-section-path-button
- colorPrimaryButton()
- .addStorage-body-control
- border-color $ui-solarized-dark-borderColor
-
- .addStorage-body-control-createButton
- colorDarkPrimaryButton()
- .addStorage-body-control-cancelButton
- colorDarkDefaultButton()
- border-color $ui-solarized-dark-borderColor
- .list-attachement-clear-button
- colorSolarizedDarkPrimaryButton()
-
-body[data-theme="monokai"]
- .root
- color $ui-monokai-text-color
-
- .folderList-item
- border-bottom $ui-monokai-borderColor
-
- .folderList-empty
- color $ui-monokai-text-color
-
- .list-empty
- color $ui-monokai-text-color
- .list-control-addStorageButton
- border-color $ui-monokai-button-backgroundColor
- background-color $ui-monokai-button-backgroundColor
- color $ui-monokai-text-color
-
- .addStorage-header
- color $ui-monokai-text-color
- border-color $ui-monokai-borderColor
-
- .addStorage-body-section-name-input
- border-color $$ui-monokai-borderColor
-
- .addStorage-body-section-type-description
- color $ui-monokai-text-color
-
- .addStorage-body-section-path-button
- colorPrimaryButton()
- .addStorage-body-control
- border-color $ui-monokai-borderColor
-
- .addStorage-body-control-createButton
- colorDarkPrimaryButton()
- .addStorage-body-control-cancelButton
- colorDarkDefaultButton()
- border-color $ui-monokai-borderColor
- .list-attachement-clear-button
- colorMonokaiPrimaryButton()
-
-body[data-theme="dracula"]
- .root
- color $ui-dracula-text-color
-
- .folderList-item
- border-bottom $ui-dracula-borderColor
-
- .folderList-empty
- color $ui-dracula-text-color
-
- .list-empty
- color $ui-dracula-text-color
- .list-control-addStorageButton
- border-color $ui-dracula-button-backgroundColor
- background-color $ui-dracula-button-backgroundColor
- color $ui-dracula-text-color
-
- .addStorage-header
- color $ui-dracula-text-color
- border-color $ui-dracula-borderColor
-
- .addStorage-body-section-name-input
- border-color $$ui-dracula-borderColor
-
- .addStorage-body-section-type-description
- color $ui-dracula-text-color
-
- .addStorage-body-section-path-button
- colorPrimaryButton()
- .addStorage-body-control
- border-color $ui-dracula-borderColor
-
- .addStorage-body-control-createButton
- colorDarkPrimaryButton()
- .addStorage-body-control-cancelButton
- colorDarkDefaultButton()
- border-color $ui-dracula-borderColor
- .list-attachement-clear-button
- colorDraculaPrimaryButton()
\ No newline at end of file
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ color get-theme-var(theme, 'text-color')
+
+ .folderList-item
+ border-bottom get-theme-var(theme, 'borderColor')
+
+ .folderList-empty
+ color get-theme-var(theme, 'text-color')
+
+ .list-empty
+ color get-theme-var(theme, 'text-color')
+ .list-control-addStorageButton
+ border-color get-theme-var(theme, 'button-backgroundColor')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ color get-theme-var(theme, 'text-color')
+
+ .addStorage-header
+ color get-theme-var(theme, 'text-color')
+ border-color get-theme-var(theme, 'borderColor')
+
+ .addStorage-body-section-name-input
+ border-color $get-theme-var(theme, 'borderColor')
+
+ .addStorage-body-section-type-description
+ color get-theme-var(theme, 'text-color')
+
+ .addStorage-body-section-path-button
+ colorPrimaryButton()
+ .addStorage-body-control
+ border-color get-theme-var(theme, 'borderColor')
+
+ .addStorage-body-control-createButton
+ colorDarkPrimaryButton()
+ .addStorage-body-control-cancelButton
+ colorDarkDefaultButton()
+ border-color get-theme-var(theme, 'borderColor')
+ .list-attachement-clear-button
+ colorThemedPrimaryButton(theme)
+
+for theme in 'solarized-dark' 'dracula'
+ apply-theme(theme)
+
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 329dbfa42..c54ed0980 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -12,6 +12,7 @@ import _ from 'lodash'
import i18n from 'browser/lib/i18n'
import { getLanguages } from 'browser/lib/Languages'
import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
+import uiThemes from 'browser/lib/ui-themes'
const OSX = global.process.platform === 'darwin'
@@ -214,12 +215,20 @@ class UiTab extends React.Component {
onChange={(e) => this.handleUIChange(e)}
ref='uiTheme'
>
-
-
-
-
-
-
+
+
diff --git a/browser/main/modals/RenameFolderModal.styl b/browser/main/modals/RenameFolderModal.styl
index c9909d008..435aa6a07 100644
--- a/browser/main/modals/RenameFolderModal.styl
+++ b/browser/main/modals/RenameFolderModal.styl
@@ -43,23 +43,31 @@
border-radius 2px
padding 0 25px
margin 0 auto
+ font-size 14px
colorPrimaryButton()
-body[data-theme="dark"]
- .root
- modalDark()
+apply-theme(theme)
+ body[data-theme={theme}]
+ .root
+ background-color transparent
+
+ .header
+ background-color get-theme-var(theme, 'button--hover-backgroundColor')
+ border-color get-theme-var(theme, 'borderColor')
+ color get-theme-var(theme, 'text-color')
+
+ .description
+ color $ui-inactive-text-color
- .header
- background-color $ui-dark-button--hover-backgroundColor
- border-color $ui-dark-borderColor
- color $ui-dark-text-color
+ .control-input
+ border-color get-theme-var(theme, 'borderColor')
+ color get-theme-var(theme, 'text-color')
- .description
- color $ui-inactive-text-color
+ .control-confirmButton
+ colorThemedPrimaryButton(theme)
- .control-input
- border-color $ui-dark-borderColor
- color $ui-dark-text-color
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
- .control-confirmButton
- colorDarkPrimaryButton()
+for theme in $themes
+ apply-theme(theme)
diff --git a/browser/styles/Detail/TagSelect.styl b/browser/styles/Detail/TagSelect.styl
index 8900422c7..5fc233101 100644
--- a/browser/styles/Detail/TagSelect.styl
+++ b/browser/styles/Detail/TagSelect.styl
@@ -51,78 +51,34 @@
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color
-body[data-theme="dark"]
- .TagSelect
- .react-autosuggest__input
- color $ui-dark-text-color
-
- ul
- border-color $ui-dark-borderColor
- background-color $ui-dark-noteList-backgroundColor
- color $ui-dark-text-color
-
- &:before
- background-color $ui-dark-noteList-backgroundColor
-
- li[aria-selected="true"]
- background-color $ui-dark-button--active-backgroundColor
- color $ui-dark-text-color
-
-body[data-theme="monokai"]
- .TagSelect
- .react-autosuggest__input
- color $ui-monokai-text-color
-
- ul
- border-color $ui-monokai-borderColor
- background-color $ui-monokai-noteList-backgroundColor
- color $ui-monokai-text-color
-
- &:before
- background-color $ui-dark-noteList-backgroundColor
-
- li[aria-selected="true"]
- background-color $ui-monokai-button-backgroundColor
- color $ui-monokai-text-color
-
-body[data-theme="dracula"]
+body[data-theme="white"]
.TagSelect
- .react-autosuggest__input
- color $ui-dracula-text-color
-
ul
- border-color $ui-dracula-borderColor
- background-color $ui-dracula-noteList-backgroundColor
- color $ui-dracula-text-color
-
- &:before
- background-color $ui-dark-noteList-backgroundColor
+ background-color $ui-white-noteList-backgroundColor
li[aria-selected="true"]
- background-color $ui-dracula-button-backgroundColor
- color $ui-dracula-text-color
+ background-color $ui-button--active-backgroundColor
-body[data-theme="solarized-dark"]
- .TagSelect
- .react-autosuggest__input
- color $ui-solarized-dark-text-color
+apply-theme(theme)
+ body[data-theme={theme}]
+ .TagSelect
+ .react-autosuggest__input
+ color get-theme-var(theme, 'text-color')
- ul
- border-color $ui-solarized-dark-borderColor
- background-color $ui-solarized-dark-noteList-backgroundColor
- color $ui-solarized-dark-text-color
+ ul
+ border-color get-theme-var(theme, 'borderColor')
+ background-color get-theme-var(theme, 'noteList-backgroundColor')
+ color get-theme-var(theme, 'text-color')
- &:before
- background-color $ui-solarized-dark-noteList-backgroundColor
+ &:before
+ background-color $ui-dark-noteList-backgroundColor
- li[aria-selected="true"]
- background-color $ui-dark-button--active-backgroundColor
- color $ui-solarized-dark-text-color
+ li[aria-selected="true"]
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ color get-theme-var(theme, 'text-color')
-body[data-theme="white"]
- .TagSelect
- ul
- background-color $ui-white-noteList-backgroundColor
+for theme in 'dark' 'solarized-dark' 'dracula'
+ apply-theme(theme)
- li[aria-selected="true"]
- background-color $ui-button--active-backgroundColor
\ No newline at end of file
+for theme in $themes
+ apply-theme(theme)
\ No newline at end of file
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 53456da91..3fc650652 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -107,36 +107,18 @@ colorDarkPrimaryButton()
&:active:hover
background-color $dark-primary-button-background--active
-
-colorSolarizedDarkPrimaryButton()
- color $ui-solarized-dark-text-color
- background-color $ui-solarized-dark-button-backgroundColor
- border none
- &:hover
- background-color $dark-primary-button-background--hover
- &:active
- &:active:hover
- background-color $dark-primary-button-background--active
-
-colorMonokaiPrimaryButton()
- color $ui-monokai-text-color
- background-color $ui-monokai-button-backgroundColor
- border none
- &:hover
- background-color $dark-primary-button-background--hover
- &:active
- &:active:hover
- background-color $dark-primary-button-background--active
-
-colorDraculaPrimaryButton()
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
- border none
- &:hover
- background-color $ui-dracula-button--active-backgroundColor
- &:active
- &:active:hover
- background-color $ui-dracula-button--active-backgroundColor
+colorThemedPrimaryButton(theme)
+ if theme == 'dark'
+ colorDarkPrimaryButton()
+ else
+ color get-theme-var(theme, 'text-color')
+ background-color get-theme-var(theme, 'button-backgroundColor')
+ border none
+ &:hover
+ background-color get-theme-var(theme, 'button--hover-backgroundColor')
+ &:active
+ &:active:hover
+ background-color get-theme-var(theme, 'button--active-backgroundColor')
// Danger button(Brand color)
@@ -257,12 +239,14 @@ $ui-dark-borderColor = #444444
$ui-dark-backgroundColor = #2C3033
$ui-dark-noteList-backgroundColor = #2C3033
$ui-dark-noteDetail-backgroundColor = #2C3033
+$ui-dark-tagList-backgroundColor = #FFFFFF
$ui-dark-tag-backgroundColor = #3A404C
$dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = #f4f4f4
$ui-dark-button--active-backgroundColor = #3A404C
+$ui-dark-button--hover-color = #c0392b
$ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
$ui-dark-topbar-button-color = #939395
@@ -332,19 +316,11 @@ darkTooltip()
pointer-events none
transition 0.1s
-modalDark()
- position relative
- z-index $modal-z-index
- width 100%
- background-color $ui-dark-backgroundColor
- overflow hidden
- border-radius $modal-border-radius
-
-
/******* Solarized Dark theme ********/
$ui-solarized-dark-backgroundColor = #073642
$ui-solarized-dark-noteList-backgroundColor = #073642
$ui-solarized-dark-noteDetail-backgroundColor = #073642
+$ui-solarized-dark-tagList-backgroundColor = #FFFFFF
$ui-solarized-dark-text-color = #93a1a1
$ui-solarized-dark-active-color = #2aa198
@@ -356,21 +332,23 @@ $ui-solarized-dark-tag-backgroundColor = #002b36
$ui-solarized-dark-button-backgroundColor = #002b36
$ui-solarized-dark-button--active-color = #93a1a1
$ui-solarized-dark-button--active-backgroundColor = #073642
+$ui-solarized-dark-button--hover-color = #c0392b
$ui-solarized-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%)
-modalSolarizedDark()
- position relative
- z-index $modal-z-index
- width 100%
- background-color $ui-solarized-dark-backgroundColor
- overflow hidden
- border-radius $modal-border-radius
+$ui-solarized-dark-kbd-backgroundColor = darken(#21252B, 10%)
+$ui-solarized-dark-kbd-color = $ui-solarized-dark-text-color
+
+$ui-solarized-dark-table-odd-backgroundColor = $ui-solarized-dark-noteDetail-backgroundColor
+$ui-solarized-dark-table-even-backgroundColor = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
+$ui-solarized-dark-table-head-backgroundColor = $ui-solarized-dark-table-even-backgroundColor
+$ui-solarized-dark-table-borderColor = lighten(darken(#21252B, 10%), 20%)
/******* Monokai theme ********/
$ui-monokai-backgroundColor = #272822
$ui-monokai-noteList-backgroundColor = #272822
$ui-monokai-noteDetail-backgroundColor = #272822
+$ui-monokai-tagList-backgroundColor = #FFFFFF
$ui-monokai-text-color = #f8f8f2
$ui-monokai-active-color = #f92672
@@ -382,21 +360,23 @@ $ui-monokai-tag-backgroundColor = #373831
$ui-monokai-button-backgroundColor = #373831
$ui-monokai-button--active-color = white
$ui-monokai-button--active-backgroundColor = #f92672
+$ui-monokai-button--hover-color = #f92672
$ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%)
-modalMonokai()
- position relative
- z-index $modal-z-index
- width 100%
- background-color $ui-monokai-backgroundColor
- overflow hidden
- border-radius $modal-border-radius
+$ui-monokai-kbd-backgroundColor = darken(#21252B, 10%)
+$ui-monokai-kbd-color = $ui-monokai-text-color
+
+$ui-monokai-table-odd-backgroundColor = $ui-monokai-noteDetail-backgroundColor
+$ui-monokai-table-even-backgroundColor = darken($ui-monokai-noteDetail-backgroundColor, 10%)
+$ui-monokai-table-head-backgroundColor = $ui-monokai-table-even-backgroundColor
+$ui-monokai-table-borderColor = lighten(darken(#21252B, 10%), 20%)
/******* Dracula theme ********/
$ui-dracula-backgroundColor = #282a36
$ui-dracula-noteList-backgroundColor = #282a36
$ui-dracula-noteDetail-backgroundColor = #282a36
+$ui-dracula-tagList-backgroundColor = #f8f8f2
$ui-dracula-text-color = #f8f8f2
$ui-dracula-active-color = #bd93f9
@@ -408,22 +388,52 @@ $ui-dracula-tag-backgroundColor = #8be9fd
$ui-dracula-button-backgroundColor = #44475a
$ui-dracula-button--active-color = #f8f8f2
$ui-dracula-button--active-backgroundColor = #bd93f9
+$ui-dracula-button--hover-color = #ff79c6
$ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%)
$ui-dracula-button--focus-borderColor = lighten(#44475a, 25%)
-colorDraculaDefaultButton()
- border-color $ui-dracula-borderColor
- color $ui-dracula-text-color
- background-color $ui-dracula-button-backgroundColor
- &:hover
- background-color $ui-dracula-button--hover-backgroundColor
- &:active
- &:active:hover
- background-color $ui-dracula-button--active-backgroundColor
-modalDracula()
- position relative
- z-index $modal-z-index
- width 100%
- background-color $ui-dracula-backgroundColor
- overflow hidden
- border-radius $modal-border-radius
\ No newline at end of file
+$ui-dracula-kbd-backgroundColor = darken(#21252B, 10%)
+$ui-dracula-kbd-color = $ui-monokai-text-color
+
+$ui-dracula-table-odd-backgroundColor = $ui-dracula-noteDetail-backgroundColor
+$ui-dracula-table-even-backgroundColor = darken($ui-dracula-noteDetail-backgroundColor, 10%)
+$ui-dracula-table-head-backgroundColor = $ui-dracula-table-even-backgroundColor
+$ui-dracula-table-borderColor = lighten(darken(#21252B, 10%), 20%)
+
+/******* Nord theme ********/
+$ui-nord-backgroundColor = #2e3440
+$ui-nord-noteList-backgroundColor = #2e3440
+$ui-nord-noteDetail-backgroundColor = #2e3440
+$ui-nord-tagList-backgroundColor = #FFFFFF
+
+$ui-nord-text-color = #d8dee9
+$ui-nord-inactive-text-color = #8fbcbb
+$ui-nord-active-color = #5e81ac
+
+$ui-nord-borderColor = #3b4252
+
+$ui-nord-tag-backgroundColor = #3b4252
+
+$ui-nord-button-backgroundColor = #434c5e
+$ui-nord-button--active-color = #d8dee9
+$ui-nord-button--active-backgroundColor = #5e81ac
+$ui-nord-button--hover-color = #c0392b
+$ui-nord-button--hover-backgroundColor = #434c5e
+
+$ui-nord-kbd-backgroundColor = $ui-nord-text-color
+$ui-nord-kbd-color = $ui-nord-backgroundColor
+
+$ui-nord-table-odd-backgroundColor = $ui-nord-noteDetail-backgroundColor
+$ui-nord-table-even-backgroundColor = darken($ui-nord-noteDetail-backgroundColor, 10%)
+$ui-nord-table-head-backgroundColor = $ui-nord-table-even-backgroundColor
+$ui-nord-table-borderColor = lighten(darken(#21252B, 10%), 20%)
+
+
+
+debug-theme-var(theme, suffix)
+ '$ui-' + theme + '-' + suffix
+
+get-theme-var(theme, suffix)
+ lookup('$ui-' + theme + '-' + suffix)
+
+$themes = 'monokai' 'nord'
\ No newline at end of file