public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-12 17:26:17 +00:00
Code Issues Releases Wiki Activity

Merge pull request #2879 from daiyam/theme-nord

Browse Source 
add Nord UI theme
This commit is contained in:
Junyoung Choi
2020-02-03 19:49:09 +09:00
committed by GitHub
parent 31ffbd98b6 69831571a5
commit 8a87c06b97
50 changed files with 1300 additions and 2508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
browser/components/MarkdownPreview.js
View File

@@ -21,6 +21,7 @@ import yaml from 'js-yaml'
import { render } from 'react-dom' import { render } from 'react-dom'
import Carousel from 'react-image-carousel' import Carousel from 'react-image-carousel'
import ConfigManager from '../main/lib/ConfigManager' import ConfigManager from '../main/lib/ConfigManager'
import uiThemes from 'browser/lib/ui-themes'
import i18n from 'browser/lib/i18n' import i18n from 'browser/lib/i18n'
const { remote, shell } = require('electron') const { remote, shell } = require('electron')
@@ -488,15 +489,7 @@ export default class MarkdownPreview extends React.Component {
getScrollBarStyle () { getScrollBarStyle () {
const { theme } = this.props const { theme } = this.props
switch (theme) { return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle
case 'dark':
case 'solarized-dark':
case 'monokai':
case 'dracula':
return scrollBarDarkStyle
default:
return scrollBarStyle
}
} }
componentDidMount () { componentDidMount () {

26
browser/components/MarkdownSplitEditor.styl
View File

@@ -16,22 +16,14 @@
z-index 10 z-index 10
cursor col-resize cursor col-resize
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
.slider .root
border-left 1px solid $ui-dark-borderColor .slider
border-left 1px solid get-theme-var(theme, 'borderColor')
body[data-theme="solarized-dark"] for theme in 'dark' 'dracula' 'solarized-dark'
.root apply-theme(theme)
.slider
border-left 1px solid $ui-solarized-dark-borderColor
body[data-theme="monokai"] for theme in $themes
.root apply-theme(theme)
.slider
border-left 1px solid $ui-monokai-borderColor
body[data-theme="dracula"]
.root
.slider
border-left 1px solid $ui-dracula-borderColor

16
browser/components/NavToggleButton.styl
View File

@@ -17,10 +17,16 @@
body[data-theme="white"] body[data-theme="white"]
navWhiteButtonColor() navWhiteButtonColor()
body[data-theme="dark"] apply-theme(theme)
.navToggle body[data-theme={theme}]
&:hover .navToggle:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%) background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
border 1px solid get-theme-var(theme, 'button--active-backgroundColor')
transition 0.15s 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)

200
browser/components/NoteItem.styl
View File

@@ -194,7 +194,7 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
transition 0.15s transition 0.15s
background-color alpha(#fff, 20%) background-color alpha($ui-dark-tagList-backgroundColor, 20%)
color $ui-dark-text-color color $ui-dark-text-color
&:active &:active
transition 0.15s transition 0.15s
@@ -207,7 +207,7 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
transition 0.15s transition 0.15s
background-color alpha(white, 10%) background-color alpha($ui-dark-tagList-backgroundColor, 10%)
color $ui-dark-text-color color $ui-dark-text-color
.item-wrapper .item-wrapper
@@ -223,13 +223,13 @@ body[data-theme="dark"]
.item-bottom-time .item-bottom-time
color $ui-dark-text-color color $ui-dark-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color alpha(white, 10%) background-color alpha($ui-dark-tagList-backgroundColor, 10%)
color $ui-dark-text-color color $ui-dark-text-color
&:hover &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 60%) background-color alpha($ui-dark-button--active-backgroundColor, 60%)
color #c0392b color $ui-dark-button--hover-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color alpha(#fff, 20%) background-color alpha($ui-dark-tagList-backgroundColor, 20%)
.item-title .item-title
color $ui-inactive-text-color color $ui-inactive-text-color
@@ -322,148 +322,82 @@ body[data-theme="solarized-dark"]
color $ui-inactive-text-color color $ui-inactive-text-color
vertical-align middle vertical-align middle
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
border-color $ui-monokai-borderColor .root
background-color $ui-monokai-noteList-backgroundColor border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')
.item .item
border-color $ui-monokai-borderColor border-color get-theme-var(theme, 'borderColor')
background-color $ui-monokai-noteList-backgroundColor background-color get-theme-var(theme, 'noteList-backgroundColor')
&:hover &: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
transition 0.15s transition 0.15s
color $ui-monokai-text-color // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
.item-bottom-tagList-item 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 transition 0.15s
background-color alpha($ui-monokai-noteList-backgroundColor, 20%) background-color get-theme-var(theme, 'noteList-backgroundColor')
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
&:active .item-title
transition 0.15s .item-title-icon
background-color $ui-monokai-noteList-backgroundColor .item-bottom-time
color $ui-monokai-text-color transition 0.15s
.item-title color get-theme-var(theme, 'text-color')
.item-title-icon .item-bottom-tagList-item
.item-bottom-time transition 0.15s
transition 0.15s background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
color $ui-monokai-text-color color get-theme-var(theme, '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%)
.item--active
border-color $ui-monokai-borderColor
background-color $ui-monokai-button-backgroundColor
.item-wrapper .item-wrapper
border-color transparent border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
.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 .item--active
color $ui-inactive-text-color border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'button-backgroundColor')
.item-title-icon .item-wrapper
color $ui-inactive-text-color border-color transparent
.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
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-title .item-title
.item-title-icon .item-title-icon
.item-bottom-time .item-bottom-time
transition 0.15s color get-theme-var(theme, 'active-color')
color $ui-dracula-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
transition 0.15s background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
background-color alpha($ui-dracula-noteList-backgroundColor, 20%) color get-theme-var(theme, 'text-color')
color $ui-dracula-text-color &:hover
&:active // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
transition 0.15s color get-theme-var(theme, 'button--hover-color')
background-color $ui-dracula-noteList-backgroundColor .item-bottom-tagList-item
color $ui-dracula-text-color background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
.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
.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 .item-title
color $ui-inactive-text-color
.item-title-icon .item-title-icon
.item-bottom-time color $ui-inactive-text-color
color $ui-dracula-active-color
.item-title-empty
color $ui-inactive-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color alpha(#f8f8f2, 10%) background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-dracula-text-color color $ui-inactive-text-color
&:hover
// background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
color #ff79c6
.item-bottom-tagList-item
background-color alpha(#f8f8f2, 20%)
.item-title .item-bottom-tagList-empty
color $ui-inactive-text-color color $ui-inactive-text-color
vertical-align middle
.item-title-icon for theme in 'dracula'
color $ui-inactive-text-color apply-theme(theme)
.item-title-empty for theme in $themes
color $ui-inactive-text-color apply-theme(theme)
.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

179
browser/components/NoteItemSimple.styl
View File

@@ -223,130 +223,73 @@ body[data-theme="solarized-dark"]
padding-left 4px padding-left 4px
opacity 0.4 opacity 0.4
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
border-color $ui-monokai-borderColor .root
background-color $ui-monokai-noteList-backgroundColor border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')
.item-simple .item-simple
border-color $ui-monokai-borderColor border-color get-theme-var(theme, 'borderColor')
background-color $ui-monokai-noteList-backgroundColor background-color get-theme-var(theme, 'noteList-backgroundColor')
&:hover &:hover
transition 0.15s transition 0.15s
background-color alpha($ui-monokai-button-backgroundColor, 60%) background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
color $ui-monokai-text-color 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 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
.item-simple-title-empty .item-simple-title-empty
.item-simple-title-icon .item-simple-title-icon
.item-simple-bottom-time .item-simple-bottom-time
transition 0.15s color get-theme-var(theme, 'text-color')
color $ui-monokai-text-color
.item-simple-bottom-tagList-item .item-simple-bottom-tagList-item
transition 0.15s background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
background-color alpha(#fff, 20%) color get-theme-var(theme, 'text-color')
color $ui-monokai-text-color &:hover
&:active // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
transition 0.15s color #c0392b
background-color $ui-monokai-button--active-backgroundColor .item-simple-bottom-tagList-item
color $ui-monokai-text-color 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
transition 0.15s
color $ui-monokai-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
.item-simple-title .item-simple-title
.item-simple-title-empty color $ui-dark-text-color
.item-simple-title-icon border-bottom $ui-dark-borderColor
.item-simple-bottom-time .item-simple-right
color $ui-monokai-text-color float right
.item-simple-bottom-tagList-item .item-simple-right-storageName
background-color alpha(white, 10%) padding-left 4px
color $ui-monokai-text-color opacity 0.4
&: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"] for theme in 'dracula'
.root apply-theme(theme)
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteList-backgroundColor
.item-simple for theme in $themes
border-color $ui-dracula-borderColor apply-theme(theme)
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
.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

44
browser/components/RealtimeNotification.styl
View File

@@ -30,36 +30,20 @@ body[data-theme="dark"]
&:hover &:hover
color #5CB85C color #5CB85C
apply-theme(theme)
body[data-theme={theme}]
.notification-area
background-color none
body[data-theme="solarized-dark"] .notification-link
.notification-area color get-theme-var(theme, 'text-color')
background-color none border none
background-color get-theme-var(theme, 'button-backgroundColor')
&:hover
color get-theme-var(theme, 'button--hover-color')
.notification-link for theme in 'solarized-dark' 'dracula'
color $ui-solarized-dark-text-color apply-theme(theme)
border none
background-color $ui-solarized-dark-button-backgroundColor
&:hover
color #5CB85C
body[data-theme="monokai"] for theme in $themes
.notification-area apply-theme(theme)
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

158
browser/components/SideNavFilter.styl
View File

@@ -180,129 +180,51 @@ body[data-theme="dark"]
.menu-button-label .menu-button-label
color $ui-dark-text-color color $ui-dark-text-color
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')
body[data-theme="solarized-dark"] .menu-button--active
.menu-button color get-theme-var(theme, 'text-color')
&:active background-color get-theme-var(theme, 'button-backgroundColor')
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 .menu-button-label
color $ui-solarized-dark-text-color 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 .menu-button-star--active
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, '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 .menu-button-label
color $ui-solarized-dark-text-color 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 .menu-button-trash--active
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, '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 .menu-button-label
color $ui-solarized-dark-text-color 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')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.menu-button apply-theme(theme)
&: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 for theme in $themes
color $ui-monokai-text-color apply-theme(theme)
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

126
browser/components/SnippetTab.styl
View File

@@ -61,7 +61,7 @@
width 100% width 100%
outline none outline none
body[data-theme="default"], body[data-theme="white"] body[data-theme="default"], body[data-theme="white"]
.root--active .root--active
&:hover &:hover
background-color alpha($ui-button--active-backgroundColor, 60%) background-color alpha($ui-button--active-backgroundColor, 60%)
@@ -100,103 +100,43 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
transition 0.15s transition 0.15s
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
border-color $ui-solarized-dark-borderColor .root
&:hover border-color get-theme-var(theme, 'borderColor')
background-color $ui-solarized-dark-noteDetail-backgroundColor &:hover
transition 0.15s background-color get-theme-var(theme, '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 .deleteButton
color $ui-solarized-dark-button--active-color color get-theme-var(theme, 'text-color')
transition 0.15s
.button .button
color $ui-solarized-dark-button--active-color color get-theme-var(theme, '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 .button
color $ui-solarized-dark-button--active-color border none
color $ui-inactive-text-color
background-color transparent
transition color background-color 0.15s
border-left 4px solid transparent
.button .input
border none background-color get-theme-var(theme, 'noteDetail-backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, '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 transition 0.15s
.deleteButton
color $ui-monokai-text-color
transition 0.15s
.button
color $ui-monokai-text-color
transition 0.15s
.root--active for theme in 'solarized-dark' 'dracula'
color $ui-monokai-active-color apply-theme(theme)
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 for theme in $themes
background-color $ui-monokai-noteDetail-backgroundColor apply-theme(theme)
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
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
.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

75
browser/components/StorageItem.styl
View File

@@ -120,59 +120,28 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 50%) background-color alpha($ui-dark-button--active-backgroundColor, 50%)
body[data-theme="solarized-dark"] apply-theme(theme)
.folderList-item body[data-theme={theme}]
&:hover .folderList-item
background-color $ui-solarized-dark-button-backgroundColor &:hover
color $ui-solarized-dark-text-color background-color get-theme-var(theme, 'button-backgroundColor')
&:active color get-theme-var(theme, 'text-color')
color $ui-solarized-dark-text-color &:active
background-color $ui-solarized-dark-button-backgroundColor color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button-backgroundColor')
.folderList-item--active .folderList-item--active
@extend .folderList-item @extend .folderList-item
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
&:active &:active
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
&:hover &:hover
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.folderList-item apply-theme(theme)
&: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 for theme in $themes
@extend .folderList-item apply-theme(theme)
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

45
browser/components/TagListItem.styl
View File

@@ -94,23 +94,30 @@ body[data-theme="white"]
.tagList-item-count .tagList-item-count
color $ui-text-color color $ui-text-color
body[data-theme="dark"] apply-theme(theme)
.tagList-item body[data-theme={theme}]
color $ui-dark-inactive-text-color .tagList-item
&:hover color get-theme-var(theme, 'inactive-text-color')
color $ui-dark-text-color &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%) color get-theme-var(theme, 'text-color')
&:active background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
color $ui-dark-text-color &:active
background-color $ui-dark-button--active-backgroundColor color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.tagList-item-active .tagList-item-active
background-color $ui-dark-button--active-backgroundColor background-color get-theme-var(theme, 'button--active-backgroundColor')
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
&:active &:active
background-color alpha($ui-dark-button--active-backgroundColor, 50%) background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
&:hover &:hover
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
background-color alpha($ui-dark-button--active-backgroundColor, 50%) background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
.tagList-item-count .tagList-item-count
color $ui-dark-button--active-color color get-theme-var(theme, 'button--active-color')
for theme in 'dark'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

32
browser/components/TodoListPercentage.styl
View File

@@ -54,7 +54,7 @@ body[data-theme="dark"]
.percentageText .percentageText
color $ui-dark-text-color color $ui-dark-text-color
.todoClearText .todoClearText
color $ui-dark-text-color color $ui-dark-text-color
@@ -71,25 +71,19 @@ body[data-theme="solarized-dark"]
.todoClearText .todoClearText
color #fdf6e3 color #fdf6e3
body[data-theme="monokai"] apply-theme(theme)
.percentageBar body[data-theme={theme}]
background-color: $ui-monokai-borderColor .percentageBar
background-color: get-theme-var(theme, 'borderColor')
.progressBar .progressBar
background-color $ui-monokai-active-color background-color get-theme-var(theme, 'active-color')
.percentageText .percentageText
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
body[data-theme="dracula"] for theme in 'dracula'
.percentageBar apply-theme(theme)
background-color $ui-dracula-borderColor
.progressBar for theme in $themes
background-color: $ui-dracula-active-color apply-theme(theme)
.percentageText
color $ui-dracula-text-color
.percentageText
color $ui-dracula-text-color

198
browser/components/markdown.styl
View File

@@ -561,159 +561,57 @@ body[data-theme="dark"]
background-color darken(themeDarkBackground, 5%) background-color darken(themeDarkBackground, 5%)
color themeDarkText color themeDarkText
apply-theme(theme)
themeSolarizedDarkBackground = $ui-solarized-dark-noteDetail-backgroundColor body[data-theme={theme}]
themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor color get-theme-var(theme, 'text-color')
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 border-color themeDarkBorder
background-color themeSolarizedDarkTableHead background-color get-theme-var(theme, 'noteDetail-backgroundColor')
dt table
border-color themeDarkBorder thead
dd tr
border-color themeDarkBorder background-color get-theme-var(theme, 'table-head-backgroundColor')
background-color $ui-solarized-dark-noteDetail-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')
pre.fence dl
.gallery border-color themeDarkBorder
.carousel-main, .carousel-footer background-color get-theme-var(theme, 'table-head-backgroundColor')
background-color $ui-solarized-dark-noteDetail-backgroundColor dt
.prev, .next border-color themeDarkBorder
color $ui-solarized-dark-button--active-color dd
background-color $ui-solarized-dark-button-backgroundColor border-color themeDarkBorder
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.markdownIt-TOC-wrapper pre.fence
&, .gallery
&:before .carousel-main, .carousel-footer
background-color darken(themeSolarizedDarkBackground, 15%) background-color get-theme-var(theme, 'noteDetail-backgroundColor')
color themeDarkText .prev, .next
color get-theme-var(theme, 'button--active-color')
background-color get-theme-var(theme, 'button-backgroundColor')
themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor .markdownIt-TOC-wrapper
themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor &,
themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%) &:before
themeMonokaiTableHead = themeMonokaiTableEven background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)
themeMonokaiTableBorder = themeDarkBorder color themeDarkText
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
color $ui-monokai-text-color apply-theme(theme)
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 for theme in $themes
border-color themeDarkBorder apply-theme(theme)
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

7
browser/components/render/MermaidRender.js
View File

@@ -1,4 +1,5 @@
import mermaidAPI from 'mermaid' import mermaidAPI from 'mermaid'
import uiThemes from 'browser/lib/ui-themes'
// fixes bad styling in the mermaid dark theme // fixes bad styling in the mermaid dark theme
const darkThemeStyling = ` const darkThemeStyling = `
@@ -23,10 +24,13 @@ function render (element, content, theme, enableHTMLLabel) {
try { try {
const height = element.attributes.getNamedItem('data-height') const height = element.attributes.getNamedItem('data-height')
const isPredefined = height && height.value !== 'undefined' const isPredefined = height && height.value !== 'undefined'
if (isPredefined) { if (isPredefined) {
element.style.height = height.value + 'vh' 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({ mermaidAPI.initialize({
theme: isDarkTheme ? 'dark' : 'default', theme: isDarkTheme ? 'dark' : 'default',
themeCSS: isDarkTheme ? darkThemeStyling : '', themeCSS: isDarkTheme ? darkThemeStyling : '',
@@ -37,6 +41,7 @@ function render (element, content, theme, enableHTMLLabel) {
useWidth: element.clientWidth useWidth: element.clientWidth
} }
}) })
mermaidAPI.render(getId(), content, (svgGraph) => { mermaidAPI.render(getId(), content, (svgGraph) => {
element.innerHTML = svgGraph element.innerHTML = svgGraph

39
browser/lib/ui-themes.js Normal file
View File

@@ -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
}
]

29
browser/main/Detail/Detail.styl
View File

@@ -24,23 +24,16 @@ body[data-theme="dark"]
.empty-message .empty-message
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
background-color $ui-solarized-dark-noteDetail-backgroundColor .root
border-left 1px solid $ui-solarized-dark-borderColor background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.empty-message border-left 1px solid get-theme-var(theme, 'borderColor')
color $ui-solarized-dark-text-color .empty-message
color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
background-color $ui-monokai-noteDetail-backgroundColor
border-left 1px solid $ui-monokai-borderColor
.empty-message
color $ui-monokai-text-color
body[data-theme="dracula"] for theme in $themes
.root apply-theme(theme)
background-color $ui-dracula-noteDetail-backgroundColor
border-left 1px solid $ui-dracula-borderColor
.empty-message
color $ui-dracula-text-color

73
browser/main/Detail/FolderSelect.styl
View File

@@ -134,54 +134,39 @@ body[data-theme="dark"]
.search-optionList-item-name-surfix .search-optionList-item-name-surfix
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
color $ui-dark-text-color .root
&:hover &:hover
color white background-color get-theme-var(theme, 'button--hover-backgroundColor')
background-color $ui-monokai-button--hover-backgroundColor border-color get-theme-var(theme, 'borderColor')
border-color $ui-monokai-borderColor
.search-optionList .search-input
color white color get-theme-var(theme, 'text-color')
border-color $ui-monokai-borderColor background-color transparent
background-color $ui-monokai-button-backgroundColor border-color get-theme-var(theme, 'borderColor')
.search-optionList-item .search-optionList
&:hover color get-theme-var(theme, 'text-color')
background-color lighten($ui-monokai-button--hover-backgroundColor, 15%) border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'button-backgroundColor')
.search-optionList-item--active .search-optionList-item
background-color $ui-monokai-button--active-backgroundColor &:hover
color $ui-monokai-button--active-color background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%)
&: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"] .search-optionList-item--active
.root background-color get-theme-var(theme, 'button--active-backgroundColor')
color $ui-dracula-text-color color get-theme-var(theme, 'button--active-color')
&:hover &:hover
color #f8f8f2 background-color get-theme-var(theme, 'button--active-backgroundColor')
background-color $ui-dark-button--hover-backgroundColor color get-theme-var(theme, 'button--active-color')
border-color $ui-dracula-borderColor
.search-optionList .search-optionList-item-name-surfix
color #f8f8f2 color get-theme-var(theme, 'inactive-text-color')
border-color $ui-dracula-borderColor
background-color $ui-dracula-button-backgroundColor
.search-optionList-item for theme in 'solarized-dark' 'dracula'
&:hover apply-theme(theme)
background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
.search-optionList-item--active for theme in $themes
background-color $ui-dracula-button--active-backgroundColor apply-theme(theme)
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

50
browser/main/Detail/FullscreenButton.styl
View File

@@ -1,26 +1,26 @@
.control-fullScreenButton .control-fullScreenButton
top 80px top 80px
topBarButtonRight() topBarButtonRight()
&:hover .tooltip &:hover .tooltip
opacity 1 opacity 1
.tooltip .tooltip
tooltip() tooltip()
position absolute position absolute
pointer-events none pointer-events none
top 50px top 50px
right 70px right 70px
z-index 200 z-index 200
padding 5px padding 5px
line-height normal line-height normal
border-radius 2px border-radius 2px
opacity 0 opacity 0
transition 0.1s transition 0.1s
.tooltip:lang(ja) .tooltip:lang(ja)
@extend .tooltip @extend .tooltip
right 35px right 35px
body[data-theme="dark"] body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() topBarButtonDark()

183
browser/main/Detail/InfoPanel.styl
View File

@@ -138,162 +138,49 @@
.export--unable .export--unable
cursor not-allowed cursor not-allowed
body[data-theme="dark"] apply-theme(theme)
.control-infoButton-panel body[data-theme={theme}]
background-color $ui-dark-noteList-backgroundColor .control-infoButton-panel
background-color get-theme-var(theme, 'noteList-backgroundColor')
.control-infoButton-panel-trash .control-infoButton-panel-trash
background-color $ui-dark-noteList-backgroundColor background-color get-theme-var(theme, 'noteList-backgroundColor')
.modification-date .modification-date
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.modification-date-desc .modification-date-desc
color $ui-inactive-text-color color $ui-inactive-text-color
.infoPanel-defaul-count .infoPanel-defaul-count
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.infoPanel-sub-count .infoPanel-sub-count
color $ui-inactive-text-color color $ui-inactive-text-color
.infoPanel-default .infoPanel-default
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.infoPanel-sub .infoPanel-sub
color $ui-inactive-text-color color $ui-inactive-text-color
.infoPanel-noteLink .infoPanel-noteLink
background-color alpha($ui-dark-borderColor, 60%) background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
[id=export-wrap] [id=export-wrap]
button button
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
&:hover &:hover
background-color alpha($ui-dark-borderColor, 20%) background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
p p
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
&:hover &:hover
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
body[data-theme="solarized-dark"] for theme in 'dark' 'solarized-dark' 'dracula'
.control-infoButton-panel apply-theme(theme)
background-color $ui-solarized-dark-noteList-backgroundColor
.control-infoButton-panel-trash for theme in $themes
background-color $ui-solarized-ark-noteList-backgroundColor apply-theme(theme)
.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
.infoPanel-sub-count
color $ui-inactive-text-color
.infoPanel-default
color $ui-dracula-text-color
.infoPanel-sub
color $ui-inactive-text-color
.infoPanel-noteLink
background-color alpha($ui-dracula-borderColor, 20%)
color $ui-dracula-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

23
browser/main/Detail/MarkdownNoteDetail.styl
View File

@@ -66,19 +66,14 @@ body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() 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"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
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 $themes
apply-theme(theme)

37
browser/main/Detail/NoteDetailInfo.styl
View File

@@ -15,6 +15,14 @@ $info-margin-under-border = 30px
padding 0 20px padding 0 20px
z-index 99 z-index 99
.info > div
> button
-webkit-user-drag none
user-select none
> img, span
-webkit-user-drag none
user-select none
.info-left .info-left
padding 0 10px padding 0 10px
width 100% width 100%
@@ -94,25 +102,14 @@ body[data-theme="dark"]
.undo-button .undo-button
topBarButtonDark() topBarButtonDark()
body[data-theme="solarized-dark"] apply-theme(theme)
.info body[data-theme={theme}]
border-color $ui-solarized-dark-borderColor .info
background-color $ui-solarized-dark-noteDetail-backgroundColor border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.info apply-theme(theme)
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteDetail-backgroundColor
body[data-theme="dracula"] for theme in $themes
.info apply-theme(theme)
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

93
browser/main/Detail/SnippetNoteDetail.styl
View File

@@ -156,78 +156,35 @@ body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() topBarButtonDark()
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
border-left 1px solid $ui-solarized-dark-borderColor .root
background-color $ui-solarized-dark-noteDetail-backgroundColor border-left 1px solid get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.body .body
background-color $ui-solarized-dark-noteDetail-backgroundColor background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.body .description textarea .body .description textarea
background-color $ui-solarized-dark-noteDetail-backgroundColor background-color get-theme-var(theme, 'noteDetail-backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
border 1px solid $ui-solarized-dark-borderColor border 1px solid get-theme-var(theme, 'borderColor')
.tabList .tabButton .tabList .tabButton
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.tabButton .tabButton
&:hover &:hover
color $ui-solarized-dark-button--active-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-noteDetail-backgroundColor background-color get-theme-var(theme, 'noteDetail-backgroundColor')
transition 0.15s transition 0.15s
.tabList
background-color $ui-solarized-dark-noteDetail-backgroundColor
color $ui-solarized-dark-text-color
body[data-theme="monokai"] .tabList
.root background-color get-theme-var(theme, 'noteDetail-backgroundColor')
border-left 1px solid $ui-monokai-borderColor color get-theme-var(theme, 'text-color')
background-color $ui-monokai-noteDetail-backgroundColor
.body for theme in 'solarized-dark' 'dracula'
background-color $ui-monokai-noteDetail-backgroundColor apply-theme(theme)
.body .description textarea for theme in $themes
background-color $ui-monokai-noteDetail-backgroundColor apply-theme(theme)
color $ui-monokai-text-color
border 1px solid $ui-monokai-borderColor
.tabList .tabButton
border-color $ui-monokai-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
.tabList .tabButton
border-color $ui-dracula-borderColor
.tabButton
&:hover
color $ui-dracula-text-color
background-color $ui-dracula-noteDetail-backgroundColor
.tabList
background-color $ui-dracula-noteDetail-backgroundColor
color $ui-dracula-text-color

41
browser/main/Detail/TagSelect.styl
View File

@@ -54,35 +54,20 @@ body[data-theme="dark"]
.tag-label .tag-label
color $ui-dark-text-color color $ui-dark-text-color
body[data-theme="solarized-dark"] apply-theme(theme)
.tag body[data-theme={theme}]
background-color $ui-solarized-dark-tag-backgroundColor .tag
background-color get-theme-var(theme, 'tag-backgroundColor')
.tag-removeButton .tag-removeButton
border-color $ui-button--focus-borderColor border-color $ui-button--focus-borderColor
background-color transparent background-color transparent
.tag-label .tag-label
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.tag apply-theme(theme)
background-color $ui-monokai-tag-backgroundColor
.tag-removeButton for theme in $themes
border-color $ui-button--focus-borderColor apply-theme(theme)
background-color transparent
.tag-label
color $ui-monokai-text-color
body[data-theme="dracula"]
.tag
background-color $ui-dracula-tag-backgroundColor
.tag-removeButton
border-color $ui-dracula-button--focus-borderColor
background-color transparent
.tag-label
color $ui-dracula-borderColor

36
browser/main/Detail/ToggleDirectionButton.styl
View File

@@ -46,6 +46,13 @@
left -8px left -8px
width 70px width 70px
.control-toggleModeButton
-webkit-user-drag none
user-select none
> div img
-webkit-user-drag none
user-select none
body[data-theme="dark"] body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() topBarButtonDark()
@@ -63,23 +70,16 @@ body[data-theme="solarized-dark"]
background-color #1EC38B background-color #1EC38B
box-shadow 2px 0px 7px #222222 box-shadow 2px 0px 7px #222222
body[data-theme="monokai"] apply-theme(theme)
.control-toggleModeButton body[data-theme={theme}]
background-color #373831 .control-toggleModeButton
.active background-color get-theme-var(theme, 'borderColor')
background-color #f92672 .active
box-shadow 2px 0px 7px #222222 background-color get-theme-var(theme, 'active-color')
box-shadow 2px 0px 7px #222222
body[data-theme="dracula"] for theme in 'dracula'
.control-toggleModeButton apply-theme(theme)
background-color #44475a
.active
background-color #bd93f9
box-shadow 2px 0px 7px #222222
.control-toggleModeButton for theme in $themes
-webkit-user-drag none apply-theme(theme)
user-select none
> div img
-webkit-user-drag none
user-select none

168
browser/main/Detail/ToggleModeButton.styl
View File

@@ -1,84 +1,84 @@
.control-toggleModeButton .control-toggleModeButton
height 25px height 25px
border-radius 50px border-radius 50px
background-color #F4F4F4 background-color #F4F4F4
width 52px width 52px
display flex display flex
align-items center align-items center
position: relative position: relative
top 2px top 2px
.active .active
background-color #1EC38B background-color #1EC38B
width 33px width 33px
height 24px height 24px
box-shadow 2px 0px 7px #eee box-shadow 2px 0px 7px #eee
z-index 1 z-index 1
div div
width 40px width 40px
height 100% height 100%
border-radius 50% border-radius 50%
display flex display flex
align-items center align-items center
justify-content center justify-content center
cursor pointer cursor pointer
&:hover .tooltip &:hover .tooltip
opacity 1 opacity 1
.tooltip .control-toggleModeButton
tooltip() -webkit-user-drag none
position absolute user-select none
pointer-events none > div img
top 33px -webkit-user-drag none
left -10px user-select none
z-index 200
width 80px .tooltip
padding 5px tooltip()
line-height normal position absolute
border-radius 2px pointer-events none
opacity 0 top 33px
transition 0.1s left -10px
z-index 200
.tooltip:lang(ja) width 80px
@extend .tooltip padding 5px
left -8px line-height normal
width 70px border-radius 2px
opacity 0
body[data-theme="dark"] transition 0.1s
.control-fullScreenButton
topBarButtonDark() .tooltip:lang(ja)
@extend .tooltip
.control-toggleModeButton left -8px
background-color #3A404C width 70px
.active
background-color #1EC38B body[data-theme="dark"]
box-shadow 2px 0px 7px #444444 .control-fullScreenButton
topBarButtonDark()
body[data-theme="solarized-dark"]
.control-toggleModeButton .control-toggleModeButton
background-color #002B36 background-color #3A404C
.active .active
background-color #1EC38B background-color #1EC38B
box-shadow 2px 0px 7px #222222 box-shadow 2px 0px 7px #444444
body[data-theme="monokai"] body[data-theme="solarized-dark"]
.control-toggleModeButton .control-toggleModeButton
background-color #373831 background-color #002B36
.active .active
background-color #f92672 background-color #1EC38B
box-shadow 2px 0px 7px #222222 box-shadow 2px 0px 7px #222222
body[data-theme="dracula"] apply-theme(theme)
.control-toggleModeButton body[data-theme={theme}]
background-color #44475a .control-toggleModeButton
.active background-color get-theme-var(theme, 'borderColor')
background-color #bd93f9 .active
box-shadow 2px 0px 7px #222222 background-color get-theme-var(theme, 'active-color')
box-shadow 2px 0px 7px #222222
.control-toggleModeButton
-webkit-user-drag none for theme in 'dracula'
user-select none apply-theme(theme)
> div img
-webkit-user-drag none for theme in $themes
user-select none apply-theme(theme)

6
browser/main/Main.js
View File

@@ -16,7 +16,9 @@ import { store } from 'browser/main/store'
import i18n from 'browser/lib/i18n' import i18n from 'browser/lib/i18n'
import { getLocales } from 'browser/lib/Languages' import { getLocales } from 'browser/lib/Languages'
import applyShortcuts from 'browser/main/lib/shortcutManager' import applyShortcuts from 'browser/main/lib/shortcutManager'
import uiThemes from 'browser/lib/ui-themes'
import { push } from 'connected-react-router' import { push } from 'connected-react-router'
const path = require('path') const path = require('path')
const electron = require('electron') const electron = require('electron')
const { remote } = electron const { remote } = electron
@@ -142,9 +144,7 @@ class Main extends React.Component {
componentDidMount () { componentDidMount () {
const { dispatch, config } = this.props const { dispatch, config } = this.props
const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula'] if (uiThemes.some(theme => theme.name === config.ui.theme)) {
if (supportedThemes.indexOf(config.ui.theme) !== -1) {
document.body.setAttribute('data-theme', config.ui.theme) document.body.setAttribute('data-theme', config.ui.theme)
} else { } else {
document.body.setAttribute('data-theme', 'default') document.body.setAttribute('data-theme', 'default')

17
browser/main/NewNoteButton/NewNoteButton.styl
View File

@@ -72,14 +72,13 @@ body[data-theme="dark"]
.control-newNoteButton-tooltip .control-newNoteButton-tooltip
darkTooltip() darkTooltip()
body[data-theme="solarized-dark"] apply-theme(theme)
.root, .root--expanded body[data-theme={theme}]
background-color $ui-solarized-dark-noteList-backgroundColor .root, .root--expanded
background-color get-theme-var(theme, 'noteList-backgroundColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root, .root--expanded apply-theme(theme)
background-color $ui-monokai-noteList-backgroundColor
body[data-theme="dracula"] for theme in $themes
.root, .root--expanded apply-theme(theme)
background-color $ui-dracula-noteList-backgroundColor

114
browser/main/NoteList/NoteList.styl
View File

@@ -66,99 +66,33 @@ body[data-theme="white"]
.control .control
background-color $ui-white-noteList-backgroundColor background-color $ui-white-noteList-backgroundColor
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
border-color $ui-dark-borderColor .root
background-color $ui-dark-noteList-backgroundColor border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')
.control .control
background-color $ui-dark-noteList-backgroundColor background-color get-theme-var(theme, 'noteList-backgroundColor')
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.control-sortBy-select .control-sortBy-select
&:hover &:hover
transition 0.2s transition 0.2s
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-button .control-button
color $ui-dark-inactive-text-color color get-theme-var(theme, 'inactive-text-color')
&:hover &:hover
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-button--active .control-button--active
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
&:active &:active
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
body[data-theme="solarized-dark"] for theme in $themes
.root apply-theme(theme)
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

102
browser/main/SideNav/PreferenceButton.styl
View File

@@ -1,52 +1,50 @@
.top-menu-preference .top-menu-preference
navButtonColor() navButtonColor()
position absolute position absolute
top 22px top 22px
right 10px right 10px
width 2em width 2em
background-color transparent background-color transparent
&:hover &:hover
color $ui-button-default--active-backgroundColor color $ui-button-default--active-backgroundColor
background-color transparent background-color transparent
.tooltip .tooltip
opacity 1 opacity 1
&:active, &:active:hover &:active, &:active:hover
color $ui-button-default--active-backgroundColor color $ui-button-default--active-backgroundColor
body[data-theme="white"] body[data-theme="white"]
.top-menu-preference .top-menu-preference
navWhiteButtonColor() navWhiteButtonColor()
background-color transparent background-color transparent
&:hover &:hover
color #0B99F1 color #0B99F1
background-color transparent background-color transparent
&:active, &:active:hover &:active, &:active:hover
color #0B99F1 color #0B99F1
background-color transparent background-color transparent
body[data-theme="dark"] body[data-theme="dark"]
.top-menu-preference .top-menu-preference
navDarkButtonColor() navDarkButtonColor()
background-color transparent background-color transparent
&:active &:active
background-color alpha($ui-dark-button--active-backgroundColor, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
background-color transparent background-color transparent
&:hover &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
background-color transparent background-color transparent
.tooltip
tooltip()
.tooltip position absolute
tooltip() pointer-events none
position absolute top 26px
pointer-events none left -20px
top 26px z-index 200
left -20px padding 5px
z-index 200 line-height normal
padding 5px border-radius 2px
line-height normal opacity 0
border-radius 2px transition 0.1s
opacity 0 white-space nowrap
transition 0.1s
white-space nowrap

21
browser/main/SideNav/SideNav.styl
View File

@@ -113,17 +113,14 @@ body[data-theme="dark"]
.top .top
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
body[data-theme="solarized-dark"] apply-theme(theme)
.root, .root--folded body[data-theme={theme}]
background-color $ui-solarized-dark-backgroundColor .root, .root--folded
border-right 1px solid $ui-solarized-dark-borderColor background-color get-theme-var(theme, 'backgroundColor')
border-right 1px solid get-theme-var(theme, 'borderColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root, .root--folded apply-theme(theme)
background-color $ui-monokai-backgroundColor
border-right 1px solid $ui-monokai-borderColor
body[data-theme="dracula"] for theme in $themes
.root, .root--folded apply-theme(theme)
background-color $ui-dracula-backgroundColor
border-right 1px solid $ui-dracula-borderColor

90
browser/main/SideNav/StorageItem.styl
View File

@@ -132,55 +132,57 @@ body[data-theme="white"]
background-color alpha($ui-button--active-backgroundColor, 40%) background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color color $ui-text-color
body[data-theme="dark"] apply-theme(theme)
.header--active body[data-theme={theme}]
background-color $ui-dark-button--active-backgroundColor .header--active
transition color background-color 0.15s 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 .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 .header-info
color $ui-dark-text-color background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
background-color $ui-dark-button--active-backgroundColor &:hover
&:active transition 0.2s
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-dark-button--active-backgroundColor 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 .header-addFolderButton
color $ui-dark-text-color &:hover
transition 0.2s
.header-toggleButton color get-theme-var(theme, 'text-color')
&:hover background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
transition 0.2s &:active, &:active:hover
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
background-color alpha($ui-dark-button--active-backgroundColor, 60%) background-color get-theme-var(theme, 'button--active-backgroundColor')
&: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
apply-theme('dark')
for theme in $themes
apply-theme(theme)

118
browser/main/SideNav/SwitchButton.styl
View File

@@ -1,60 +1,60 @@
.non-active-button .non-active-button
color $ui-inactive-text-color color $ui-inactive-text-color
font-size 16px font-size 16px
border 0 border 0
background-color transparent background-color transparent
transition 0.2s transition 0.2s
display flex display flex
text-align center text-align center
margin-right 4px margin-right 4px
position relative position relative
&:hover &:hover
color alpha(#239F86, 60%) color alpha(#239F86, 60%)
.tooltip .tooltip
opacity 1 opacity 1
.active-button .active-button
@extend .non-active-button @extend .non-active-button
color $ui-button-default--active-backgroundColor color $ui-button-default--active-backgroundColor
.tooltip .tooltip
tooltip() tooltip()
position absolute position absolute
pointer-events none pointer-events none
top 22px top 22px
left -2px left -2px
z-index 200 z-index 200
padding 5px padding 5px
line-height normal line-height normal
border-radius 2px border-radius 2px
opacity 0 opacity 0
transition 0.1s transition 0.1s
white-space nowrap white-space nowrap
body[data-theme="white"] body[data-theme="white"]
.non-active-button .non-active-button
color $ui-inactive-text-color color $ui-inactive-text-color
&:hover &:hover
color alpha(#0B99F1, 60%) color alpha(#0B99F1, 60%)
.tag-title .tag-title
p p
color $ui-text-color color $ui-text-color
.non-active-button .non-active-button
&:hover &:hover
color alpha(#0B99F1, 60%) color alpha(#0B99F1, 60%)
.active-button .active-button
@extend .non-active-button @extend .non-active-button
color #0B99F1 color #0B99F1
body[data-theme="dark"] body[data-theme="dark"]
.non-active-button .non-active-button
color alpha($ui-dark-text-color, 60%) color alpha($ui-dark-text-color, 60%)
&:hover &:hover
color alpha(#0B99F1, 60%) color alpha(#0B99F1, 60%)
.tag-title .tag-title
p p
color alpha($ui-dark-text-color, 60%) color alpha($ui-dark-text-color, 60%)

35
browser/main/StatusBar/StatusBar.styl
View File

@@ -78,24 +78,19 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
border-left 1px solid $ui-dark-borderColor border-left 1px solid $ui-dark-borderColor
body[data-theme="monokai"] apply-theme(theme)
navButtonColor() body[data-theme={theme}]
.zoom .zoom
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
&:hover &:hover
transition 0.15s transition 0.15s
color $ui-monokai-active-color color get-theme-var(theme, 'active-color')
&:active &:active
color $ui-monokai-active-color color get-theme-var(theme, 'active-color')
body[data-theme="dracula"] for theme in 'dracula' 'solarized-dark'
navButtonColor() apply-theme(theme)
.zoom
border-color $ui-dark-borderColor for theme in $themes
color $ui-dracula-text-color apply-theme(theme)
&:hover
transition 0.15s
color $ui-dracula-active-color
&:active
color $ui-dracula-active-color

84
browser/main/TopBar/TopBar.styl
View File

@@ -212,69 +212,31 @@ body[data-theme="dark"]
.control-newPostButton-tooltip .control-newPostButton-tooltip
darkTooltip() darkTooltip()
apply-theme(theme)
body[data-theme={theme}]
.root, .root--expanded
background-color get-theme-var(theme, 'noteList-backgroundColor')
body[data-theme="solarized-dark"] .control
.root, .root--expanded border-color get-theme-var(theme, 'borderColor')
background-color $ui-solarized-dark-noteList-backgroundColor .control-search
background-color get-theme-var(theme, 'noteList-backgroundColor')
.control .control-search-icon
border-color $ui-solarized-dark-borderColor absolute top bottom left
.control-search line-height 32px
background-color $ui-solarized-dark-noteList-backgroundColor width 35px
color get-theme-var(theme, 'inactive-text-color')
background-color get-theme-var(theme, 'noteList-backgroundColor')
.control-search-icon .control-search-input
absolute top bottom left background-color get-theme-var(theme, 'noteList-backgroundColor')
line-height 32px input
width 35px background-color get-theme-var(theme, 'noteList-backgroundColor')
color $ui-solarized-dark-inactive-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-noteList-backgroundColor
.control-search-input for theme in 'solarized-dark' 'dracula'
background-color $ui-solarized-dark-noteList-backgroundColor apply-theme(theme)
input
background-color $ui-solarized-dark-noteList-backgroundColor
color $ui-solarized-dark-text-color
body[data-theme="monokai"] for theme in $themes
.root, .root--expanded apply-theme(theme)
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

51
browser/main/global.styl
View File

@@ -96,16 +96,6 @@ modalBackColor = white
z-index modalZIndex + 1 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 .CodeMirror
font-family inherit !important font-family inherit !important
line-height 1.4em line-height 1.4em
@@ -148,35 +138,22 @@ body[data-theme="dark"]
.sortableItemHelper .sortableItemHelper
z-index modalZIndex + 5 z-index modalZIndex + 5
body[data-theme="solarized-dark"] apply-theme(theme)
background-color $ui-solarized-dark-backgroundColor body[data-theme={theme}]
::-webkit-scrollbar-thumb background-color get-theme-var(theme, 'backgroundColor')
background-color rgba(0, 0, 0, 0.3) ::-webkit-scrollbar-thumb
.ModalBase background-color rgba(0, 0, 0, 0.3)
.modalBack .ModalBase
background-color $ui-solarized-dark-backgroundColor .modalBack
.sortableItemHelper background-color get-theme-var(theme, 'backgroundColor')
color: $ui-solarized-dark-text-color .sortableItemHelper
color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'dark' 'solarized-dark' 'dracula'
background-color $ui-monokai-backgroundColor apply-theme(theme)
::-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"] for theme in $themes
background-color $ui-dracula-backgroundColor apply-theme(theme)
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-dracula-backgroundColor
.sortableItemHelper
color: $ui-dracula-text-color
body[data-theme="default"] body[data-theme="default"]
.SideNav ::-webkit-scrollbar-thumb .SideNav ::-webkit-scrollbar-thumb

13
browser/main/lib/ConfigManager.js
View File

@@ -2,6 +2,7 @@ import _ from 'lodash'
import RcParser from 'browser/lib/RcParser' import RcParser from 'browser/lib/RcParser'
import i18n from 'browser/lib/i18n' import i18n from 'browser/lib/i18n'
import ee from 'browser/main/lib/eventEmitter' import ee from 'browser/main/lib/eventEmitter'
import uiThemes from 'browser/lib/ui-themes'
const OSX = global.process.platform === 'darwin' const OSX = global.process.platform === 'darwin'
const win = global.process.platform === 'win32' const win = global.process.platform === 'win32'
@@ -180,16 +181,8 @@ function set (updates) {
if (!validate(newConfig)) throw new Error('INVALID CONFIG') if (!validate(newConfig)) throw new Error('INVALID CONFIG')
_save(newConfig) _save(newConfig)
if (newConfig.ui.theme === 'dark') { if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) {
document.body.setAttribute('data-theme', 'dark') document.body.setAttribute('data-theme', newConfig.ui.theme)
} 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')
} else { } else {
document.body.setAttribute('data-theme', 'default') document.body.setAttribute('data-theme', 'default')
} }

126
browser/main/modals/CreateFolderModal.styl
View File

@@ -51,106 +51,40 @@
font-size 14px font-size 14px
colorPrimaryButton() colorPrimaryButton()
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
modalDark() .root
width 500px width 500px
height 270px height 270px
overflow hidden overflow hidden
position relative 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 .header
background-color transparent background-color transparent
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-folder-label .control-folder-label
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-folder-input .control-folder-input
border 1px solid $ui-input--create-folder-modal border 1px solid $ui-input--create-folder-modal
color white color white
.description .description
color $ui-inactive-text-color color $ui-inactive-text-color
.control-confirmButton .control-confirmButton
colorDarkPrimaryButton() colorThemedPrimaryButton(theme)
body[data-theme="solarized-dark"] for theme in 'dark' 'solarized-dark' 'dracula'
.root apply-theme(theme)
modalSolarizedDark()
width 500px
height 270px
overflow hidden
position relative
.header for theme in $themes
background-color transparent apply-theme(theme)
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()

121
browser/main/modals/CreateMarkdownFromURLModal.styl
View File

@@ -51,110 +51,39 @@
font-size 14px font-size 14px
colorPrimaryButton() 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 .error
text-align center text-align center
color #F44336 color #F44336
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
modalMonokai() .root
width 500px background-color transparent
height 270px width 500px
overflow hidden height 270px
position relative overflow hidden
position relative
.header .header
background-color transparent background-color transparent
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
.control-folder-label .control-folder-label
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
.control-folder-input .control-folder-input
border 1px solid $ui-input--create-folder-modal border 1px solid $ui-input--create-folder-modal
color white color white
.description .description
color $ui-inactive-text-color color $ui-inactive-text-color
.control-confirmButton .control-confirmButton
colorMonokaiPrimaryButton() colorThemedPrimaryButton(theme)
body[data-theme="dracula"] for theme in 'dark' 'dracula' 'solarized-dark'
.root apply-theme(theme)
modalDracula()
width 500px
height 270px
overflow hidden
position relative
.header for theme in $themes
background-color transparent apply-theme(theme)
border-color $ui-dracula-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()

80
browser/main/modals/NewNoteModal.styl
View File

@@ -54,70 +54,26 @@
margin-bottom 25px margin-bottom 25px
cursor pointer cursor pointer
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
modalDark() .root
background-color transparent
.header .header
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-button .control-button
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
background-color transparent background-color transparent
&:focus &:focus
colorDarkPrimaryButton() colorThemedPrimaryButton(theme)
.description, .from-url .description
color $ui-inactive-text-color color get-theme-var(theme, 'text-color')
body[data-theme="solarized-dark"] for theme in 'dark' 'solarized-dark' 'dracula'
.root apply-theme(theme)
background-color transparent
.header for theme in $themes
color $ui-solarized-dark-text-color apply-theme(theme)
.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

130
browser/main/modals/PreferencesModal/ConfigTab.styl
View File

@@ -2,7 +2,6 @@
.root .root
padding 15px padding 15px
color $ui-text-color
margin-bottom 30px margin-bottom 30px
.group .group
@@ -14,7 +13,6 @@
.group-header2 .group-header2
font-size 20px font-size 20px
color $ui-text-color
margin-bottom 15px margin-bottom 15px
margin-top 30px margin-top 30px
@@ -136,20 +134,18 @@ colorDarkControl()
background-color $ui-dark-backgroundColor background-color $ui-dark-backgroundColor
color $ui-dark-text-color color $ui-dark-text-color
colorSolarizedDarkControl() colorThemedControl(theme)
border none border none
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
colorMonokaiControl() body[data-theme="default"],
border none body[data-theme="white"]
background-color $ui-monokai-button-backgroundColor .root
color $ui-monokai-text-color color $ui-text-color
colorDraculaControl() .group-header2
border none color $ui-text-color
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
body[data-theme="dark"] body[data-theme="dark"]
.root .root
@@ -180,90 +176,36 @@ body[data-theme="dark"]
select, .group-section-control-input select, .group-section-control-input
colorDarkControl() colorDarkControl()
apply-theme(theme)
body[data-theme={theme}]
.root
color get-theme-var(theme, 'text-color')
body[data-theme="solarized-dark"] .group-header
.root color get-theme-var(theme, 'text-color')
color $ui-solarized-dark-text-color border-color get-theme-var(theme, 'borderColor')
.group-header .group-header2
.group-header--sub color get-theme-var(theme, 'text-color')
color $ui-solarized-dark-text-color
border-color $ui-solarized-dark-borderColor
.group-header2 .group-section-control-input
.group-header2--sub border-color get-theme-var(theme, 'borderColor')
color $ui-solarized-dark-text-color
.group-section-control-input .group-control
border-color $ui-solarized-dark-borderColor 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)
.group-control for theme in 'solarized-dark' 'dracula'
border-color $ui-solarized-dark-borderColor apply-theme(theme)
.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"] for theme in $themes
.root apply-theme(theme)
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()

25
browser/main/modals/PreferencesModal/Crowdfunding.styl
View File

@@ -24,20 +24,15 @@ body[data-theme="dark"]
p p
color $ui-dark-text-color color $ui-dark-text-color
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
color $ui-solarized-dark-text-color .root
p color get-theme-var(theme, 'text-color')
color $ui-solarized-dark-text-color p
color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
color $ui-monokai-text-color
p
color $ui-monokai-text-color
body[data-theme="dracula"] for theme in $themes
.root apply-theme(theme)
color $ui-dracula-text-color
p
color $ui-dracula-text-color

83
browser/main/modals/PreferencesModal/FolderItem.styl
View File

@@ -107,73 +107,32 @@ body[data-theme="dark"]
.folderItem-right-dangerButton .folderItem-right-dangerButton
colorDarkDangerButton() 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-left-key
.folderItem color $ui-dark-inactive-text-color
&:hover
background-color $ui-solarized-dark-button-backgroundColor
.folderItem-left-danger .folderItem-left-colorButton
color $danger-color colorThemedPrimaryButton(theme)
.folderItem-left-key .folderItem-right-button
color $ui-dark-inactive-text-color colorThemedPrimaryButton(theme)
.folderItem-left-colorButton .folderItem-right-confirmButton
colorSolarizedDarkPrimaryButton() colorThemedPrimaryButton(theme)
.folderItem-right-button .folderItem-right-dangerButton
colorSolarizedDarkPrimaryButton() colorThemedPrimaryButton(theme)
.folderItem-right-confirmButton for theme in 'solarized-dark' 'dracula'
colorSolarizedDarkPrimaryButton() apply-theme(theme)
.folderItem-right-dangerButton for theme in $themes
colorSolarizedDarkPrimaryButton() apply-theme(theme)
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-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-danger
color $danger-color
.folderItem-left-key
color $ui-dark-inactive-text-color
.folderItem-left-colorButton
colorDraculaPrimaryButton()
.folderItem-right-button
colorDraculaPrimaryButton()
.folderItem-right-confirmButton
colorDraculaPrimaryButton()
.folderItem-right-dangerButton
colorDraculaPrimaryButton()

38
browser/main/modals/PreferencesModal/InfoTab.styl
View File

@@ -59,29 +59,19 @@ body[data-theme="dark"]
.appId .appId
color $ui-dark-text-color 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"] apply-theme(theme)
.root body[data-theme={theme}]
color $ui-monokai-text-color .root
.appId color get-theme-var(theme, 'text-color')
color $ui-monokai-text-color .appId
.list color get-theme-var(theme, 'text-color')
a .list
color $ui-monokai-active-color a
color get-theme-var(theme, 'active-color')
body[data-theme="dracula"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
color $ui-dracula-text-color
.appId for theme in $themes
color $ui-dracula-text-color apply-theme(theme)
.list
a
color $ui-dracula-active-color

121
browser/main/modals/PreferencesModal/PreferencesModal.styl
View File

@@ -64,102 +64,31 @@ top-bar--height = 50px
margin-top 10px margin-top 10px
overflow-y auto overflow-y auto
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
modalDark() .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')
.top-bar .nav-button--active
background-color transparent @extend .nav-button
border-color #4A4D52 color get-theme-var(theme, 'button--active-color')
p background-color get-theme-var(theme, 'button--active-backgroundColor')
color $tab--dark-text-color
.nav for theme in 'dark' 'solarized-dark' 'dracula'
background-color transparent apply-theme(theme)
border-color $ui-dark-borderColor
.nav-button for theme in $themes
background-color transparent apply-theme(theme)
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

81
browser/main/modals/PreferencesModal/SnippetTab.styl
View File

@@ -140,66 +140,25 @@ body[data-theme="default"], body[data-theme="white"]
.snippet-item-selected .snippet-item-selected
background darken($ui-backgroundColor, 5) background darken($ui-backgroundColor, 5)
body[data-theme="dark"] apply-theme(theme)
.snippets body[data-theme={theme}]
background $ui-dark-backgroundColor .snippets
.snippet-item background get-theme-var(theme, 'backgroundColor')
color white .snippet-item
&::after color get-theme-var(theme, 'text-color')
background $ui-dark-borderColor &::after
&:hover background get-theme-var(theme, 'borderColor')
background darken($ui-dark-backgroundColor, 5) &:hover
.snippet-item-selected background darken(get-theme-var(theme, 'backgroundColor'), 5)
background darken($ui-dark-backgroundColor, 5) .snippet-item-selected
.snippet-detail background darken(get-theme-var(theme, 'backgroundColor'), 5)
color white .snippet-detail
.group-control-button color get-theme-var(theme, 'text-color')
colorDarkPrimaryButton() .group-control-button
colorThemedPrimaryButton(theme)
body[data-theme="solarized-dark"] for theme in 'dark' 'solarized-dark' 'dracula'
.snippets apply-theme(theme)
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"] for theme in $themes
.snippets apply-theme(theme)
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()

19
browser/main/modals/PreferencesModal/StorageItem.styl
View File

@@ -103,10 +103,17 @@ body[data-theme="solarized-dark"]
background-color $ui-solarized-dark-button-backgroundColor background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color color $ui-solarized-dark-text-color
body[data-theme="dracula"] apply-theme(theme)
.header body[data-theme={theme}]
border-color $ui-dracula-borderColor .header
border-color get-theme-var(theme, 'borderColor')
.header-control-button .header-control-button
colorDraculaDefaultButton() colorThemedPrimaryButton(theme)
border-color $ui-dracula-borderColor border-color get-theme-var(theme, 'borderColor')
for theme in 'dracula'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

145
browser/main/modals/PreferencesModal/StoragesTab.styl
View File

@@ -168,122 +168,49 @@ body[data-theme="dark"]
.list-attachement-clear-button .list-attachement-clear-button
colorDarkPrimaryButton() colorDarkPrimaryButton()
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
color $ui-solarized-dark-text-color .root
color get-theme-var(theme, 'text-color')
.folderList-item .folderList-item
border-bottom $ui-solarized-dark-borderColor border-bottom get-theme-var(theme, 'borderColor')
.folderList-empty .folderList-empty
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
.list-empty .list-empty
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
.list-control-addStorageButton .list-control-addStorageButton
border-color $ui-solarized-dark-button-backgroundColor border-color get-theme-var(theme, 'button-backgroundColor')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
.addStorage-header .addStorage-header
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.addStorage-body-section-name-input .addStorage-body-section-name-input
border-color $$ui-solarized-dark-borderColor border-color $get-theme-var(theme, 'borderColor')
.addStorage-body-section-type-description .addStorage-body-section-type-description
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
.addStorage-body-section-path-button .addStorage-body-section-path-button
colorPrimaryButton() colorPrimaryButton()
.addStorage-body-control .addStorage-body-control
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.addStorage-body-control-createButton .addStorage-body-control-createButton
colorDarkPrimaryButton() colorDarkPrimaryButton()
.addStorage-body-control-cancelButton .addStorage-body-control-cancelButton
colorDarkDefaultButton() colorDarkDefaultButton()
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.list-attachement-clear-button .list-attachement-clear-button
colorSolarizedDarkPrimaryButton() colorThemedPrimaryButton(theme)
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
color $ui-monokai-text-color
.folderList-item for theme in $themes
border-bottom $ui-monokai-borderColor apply-theme(theme)
.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()

21
browser/main/modals/PreferencesModal/UiTab.js
View File

@@ -12,6 +12,7 @@ import _ from 'lodash'
import i18n from 'browser/lib/i18n' import i18n from 'browser/lib/i18n'
import { getLanguages } from 'browser/lib/Languages' import { getLanguages } from 'browser/lib/Languages'
import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily' import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
import uiThemes from 'browser/lib/ui-themes'
const OSX = global.process.platform === 'darwin' const OSX = global.process.platform === 'darwin'
@@ -214,12 +215,20 @@ class UiTab extends React.Component {
onChange={(e) => this.handleUIChange(e)} onChange={(e) => this.handleUIChange(e)}
ref='uiTheme' ref='uiTheme'
> >
<option value='default'>{i18n.__('Default')}</option> <optgroup label='Light Themes'>
<option value='white'>{i18n.__('White')}</option> {
<option value='solarized-dark'>{i18n.__('Solarized Dark')}</option> uiThemes.filter(theme => !theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => {
<option value='monokai'>{i18n.__('Monokai')}</option> return (<option value={theme.name} key={theme.name}>{theme.label}</option>)
<option value='dracula'>{i18n.__('Dracula')}</option> })
<option value='dark'>{i18n.__('Dark')}</option> }
</optgroup>
<optgroup label='Dark Themes'>
{
uiThemes.filter(theme => theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => {
return (<option value={theme.name} key={theme.name}>{theme.label}</option>)
})
}
</optgroup>
</select> </select>
</div> </div>
</div> </div>

36
browser/main/modals/RenameFolderModal.styl
View File

@@ -43,23 +43,31 @@
border-radius 2px border-radius 2px
padding 0 25px padding 0 25px
margin 0 auto margin 0 auto
font-size 14px
colorPrimaryButton() colorPrimaryButton()
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
modalDark() .root
background-color transparent
.header .header
background-color $ui-dark-button--hover-backgroundColor background-color get-theme-var(theme, 'button--hover-backgroundColor')
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.description .description
color $ui-inactive-text-color color $ui-inactive-text-color
.control-input .control-input
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-confirmButton .control-confirmButton
colorDarkPrimaryButton() colorThemedPrimaryButton(theme)
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

94
browser/styles/Detail/TagSelect.styl
View File

@@ -51,78 +51,34 @@
background-color alpha($ui-button--active-backgroundColor, 40%) background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color 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"]
.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
li[aria-selected="true"]
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
body[data-theme="solarized-dark"]
.TagSelect
.react-autosuggest__input
color $ui-solarized-dark-text-color
ul
border-color $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteList-backgroundColor
color $ui-solarized-dark-text-color
&:before
background-color $ui-solarized-dark-noteList-backgroundColor
li[aria-selected="true"]
background-color $ui-dark-button--active-backgroundColor
color $ui-solarized-dark-text-color
body[data-theme="white"] body[data-theme="white"]
.TagSelect .TagSelect
ul ul
background-color $ui-white-noteList-backgroundColor background-color $ui-white-noteList-backgroundColor
li[aria-selected="true"] li[aria-selected="true"]
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
apply-theme(theme)
body[data-theme={theme}]
.TagSelect
.react-autosuggest__input
color get-theme-var(theme, '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-dark-noteList-backgroundColor
li[aria-selected="true"]
background-color get-theme-var(theme, 'button-backgroundColor')
color get-theme-var(theme, 'text-color')
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

148
browser/styles/index.styl
View File

@@ -107,36 +107,18 @@ colorDarkPrimaryButton()
&:active:hover &:active:hover
background-color $dark-primary-button-background--active background-color $dark-primary-button-background--active
colorThemedPrimaryButton(theme)
colorSolarizedDarkPrimaryButton() if theme == 'dark'
color $ui-solarized-dark-text-color colorDarkPrimaryButton()
background-color $ui-solarized-dark-button-backgroundColor else
border none color get-theme-var(theme, 'text-color')
&:hover background-color get-theme-var(theme, 'button-backgroundColor')
background-color $dark-primary-button-background--hover border none
&:active &:hover
&:active:hover background-color get-theme-var(theme, 'button--hover-backgroundColor')
background-color $dark-primary-button-background--active &:active
&:active:hover
colorMonokaiPrimaryButton() background-color get-theme-var(theme, 'button--active-backgroundColor')
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
// Danger button(Brand color) // Danger button(Brand color)
@@ -257,12 +239,14 @@ $ui-dark-borderColor = #444444
$ui-dark-backgroundColor = #2C3033 $ui-dark-backgroundColor = #2C3033
$ui-dark-noteList-backgroundColor = #2C3033 $ui-dark-noteList-backgroundColor = #2C3033
$ui-dark-noteDetail-backgroundColor = #2C3033 $ui-dark-noteDetail-backgroundColor = #2C3033
$ui-dark-tagList-backgroundColor = #FFFFFF
$ui-dark-tag-backgroundColor = #3A404C $ui-dark-tag-backgroundColor = #3A404C
$dark-background-color = lighten($ui-dark-backgroundColor, 10%) $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD $ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = #f4f4f4 $ui-dark-button--active-color = #f4f4f4
$ui-dark-button--active-backgroundColor = #3A404C $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--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
$ui-dark-topbar-button-color = #939395 $ui-dark-topbar-button-color = #939395
@@ -332,19 +316,11 @@ darkTooltip()
pointer-events none pointer-events none
transition 0.1s 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 ********/ /******* Solarized Dark theme ********/
$ui-solarized-dark-backgroundColor = #073642 $ui-solarized-dark-backgroundColor = #073642
$ui-solarized-dark-noteList-backgroundColor = #073642 $ui-solarized-dark-noteList-backgroundColor = #073642
$ui-solarized-dark-noteDetail-backgroundColor = #073642 $ui-solarized-dark-noteDetail-backgroundColor = #073642
$ui-solarized-dark-tagList-backgroundColor = #FFFFFF
$ui-solarized-dark-text-color = #93a1a1 $ui-solarized-dark-text-color = #93a1a1
$ui-solarized-dark-active-color = #2aa198 $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-backgroundColor = #002b36
$ui-solarized-dark-button--active-color = #93a1a1 $ui-solarized-dark-button--active-color = #93a1a1
$ui-solarized-dark-button--active-backgroundColor = #073642 $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--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%)
modalSolarizedDark() $ui-solarized-dark-kbd-backgroundColor = darken(#21252B, 10%)
position relative $ui-solarized-dark-kbd-color = $ui-solarized-dark-text-color
z-index $modal-z-index
width 100% $ui-solarized-dark-table-odd-backgroundColor = $ui-solarized-dark-noteDetail-backgroundColor
background-color $ui-solarized-dark-backgroundColor $ui-solarized-dark-table-even-backgroundColor = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
overflow hidden $ui-solarized-dark-table-head-backgroundColor = $ui-solarized-dark-table-even-backgroundColor
border-radius $modal-border-radius $ui-solarized-dark-table-borderColor = lighten(darken(#21252B, 10%), 20%)
/******* Monokai theme ********/ /******* Monokai theme ********/
$ui-monokai-backgroundColor = #272822 $ui-monokai-backgroundColor = #272822
$ui-monokai-noteList-backgroundColor = #272822 $ui-monokai-noteList-backgroundColor = #272822
$ui-monokai-noteDetail-backgroundColor = #272822 $ui-monokai-noteDetail-backgroundColor = #272822
$ui-monokai-tagList-backgroundColor = #FFFFFF
$ui-monokai-text-color = #f8f8f2 $ui-monokai-text-color = #f8f8f2
$ui-monokai-active-color = #f92672 $ui-monokai-active-color = #f92672
@@ -382,21 +360,23 @@ $ui-monokai-tag-backgroundColor = #373831
$ui-monokai-button-backgroundColor = #373831 $ui-monokai-button-backgroundColor = #373831
$ui-monokai-button--active-color = white $ui-monokai-button--active-color = white
$ui-monokai-button--active-backgroundColor = #f92672 $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--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%) $ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%)
modalMonokai() $ui-monokai-kbd-backgroundColor = darken(#21252B, 10%)
position relative $ui-monokai-kbd-color = $ui-monokai-text-color
z-index $modal-z-index
width 100% $ui-monokai-table-odd-backgroundColor = $ui-monokai-noteDetail-backgroundColor
background-color $ui-monokai-backgroundColor $ui-monokai-table-even-backgroundColor = darken($ui-monokai-noteDetail-backgroundColor, 10%)
overflow hidden $ui-monokai-table-head-backgroundColor = $ui-monokai-table-even-backgroundColor
border-radius $modal-border-radius $ui-monokai-table-borderColor = lighten(darken(#21252B, 10%), 20%)
/******* Dracula theme ********/ /******* Dracula theme ********/
$ui-dracula-backgroundColor = #282a36 $ui-dracula-backgroundColor = #282a36
$ui-dracula-noteList-backgroundColor = #282a36 $ui-dracula-noteList-backgroundColor = #282a36
$ui-dracula-noteDetail-backgroundColor = #282a36 $ui-dracula-noteDetail-backgroundColor = #282a36
$ui-dracula-tagList-backgroundColor = #f8f8f2
$ui-dracula-text-color = #f8f8f2 $ui-dracula-text-color = #f8f8f2
$ui-dracula-active-color = #bd93f9 $ui-dracula-active-color = #bd93f9
@@ -408,22 +388,52 @@ $ui-dracula-tag-backgroundColor = #8be9fd
$ui-dracula-button-backgroundColor = #44475a $ui-dracula-button-backgroundColor = #44475a
$ui-dracula-button--active-color = #f8f8f2 $ui-dracula-button--active-color = #f8f8f2
$ui-dracula-button--active-backgroundColor = #bd93f9 $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--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%)
$ui-dracula-button--focus-borderColor = lighten(#44475a, 25%) $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() $ui-dracula-kbd-backgroundColor = darken(#21252B, 10%)
position relative $ui-dracula-kbd-color = $ui-monokai-text-color
z-index $modal-z-index
width 100% $ui-dracula-table-odd-backgroundColor = $ui-dracula-noteDetail-backgroundColor
background-color $ui-dracula-backgroundColor $ui-dracula-table-even-backgroundColor = darken($ui-dracula-noteDetail-backgroundColor, 10%)
overflow hidden $ui-dracula-table-head-backgroundColor = $ui-dracula-table-even-backgroundColor
border-radius $modal-border-radius $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'