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

Merge branch 'master' into filter-tags-and-folders

Browse Source 
# Conflicts:
#	browser/main/SideNav/PreferenceButton.styl
#	browser/main/SideNav/SideNav.styl
This commit is contained in:
amedora
2020-02-05 09:07:13 +09:00
parent f1d03acbad 051ce9e208
commit 725bf2a691
56 changed files with 1487 additions and 2569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

@@ -66,19 +66,14 @@ body[data-theme="dark"]
.control-fullScreenButton
topBarButtonDark()
apply-theme(theme)
body[data-theme={theme}]
.root
border-left 1px solid get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
body[data-theme="solarized-dark"]
.root
border-left 1px solid $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteDetail-backgroundColor
body[data-theme="monokai"]
.root
border-left 1px solid $ui-monokai-borderColor
background-color $ui-monokai-noteDetail-backgroundColor
body[data-theme="dracula"]
.root
border-left 1px solid $ui-dracula-borderColor
background-color $ui-dracula-noteDetail-backgroundColor
for theme in 'solarized-dark' 'dracula'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

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

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

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

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

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

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

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

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

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

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

6
browser/main/Main.js
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

51
browser/main/global.styl
View File

@@ -96,16 +96,6 @@ modalBackColor = white
z-index modalZIndex + 1
body[data-theme="dark"]
background-color $ui-dark-backgroundColor
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-dark-backgroundColor
.sortableItemHelper
color: $ui-dark-text-color
.CodeMirror
font-family inherit !important
line-height 1.4em
@@ -148,35 +138,22 @@ body[data-theme="dark"]
.sortableItemHelper
z-index modalZIndex + 5
body[data-theme="solarized-dark"]
background-color $ui-solarized-dark-backgroundColor
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-solarized-dark-backgroundColor
.sortableItemHelper
color: $ui-solarized-dark-text-color
apply-theme(theme)
body[data-theme={theme}]
background-color get-theme-var(theme, 'backgroundColor')
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color get-theme-var(theme, 'backgroundColor')
.sortableItemHelper
color get-theme-var(theme, 'text-color')
body[data-theme="monokai"]
background-color $ui-monokai-backgroundColor
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-monokai-backgroundColor
.sortableItemHelper
color: $ui-monokai-text-color
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
body[data-theme="dracula"]
background-color $ui-dracula-backgroundColor
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-dracula-backgroundColor
.sortableItemHelper
color: $ui-dracula-text-color
for theme in $themes
apply-theme(theme)
body[data-theme="default"]
.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 i18n from 'browser/lib/i18n'
import ee from 'browser/main/lib/eventEmitter'
import uiThemes from 'browser/lib/ui-themes'
const OSX = global.process.platform === 'darwin'
const win = global.process.platform === 'win32'
@@ -180,16 +181,8 @@ function set (updates) {
if (!validate(newConfig)) throw new Error('INVALID CONFIG')
_save(newConfig)
if (newConfig.ui.theme === 'dark') {
document.body.setAttribute('data-theme', 'dark')
} else if (newConfig.ui.theme === 'white') {
document.body.setAttribute('data-theme', 'white')
} else if (newConfig.ui.theme === 'solarized-dark') {
document.body.setAttribute('data-theme', 'solarized-dark')
} else if (newConfig.ui.theme === 'monokai') {
document.body.setAttribute('data-theme', 'monokai')
} else if (newConfig.ui.theme === 'dracula') {
document.body.setAttribute('data-theme', 'dracula')
if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) {
document.body.setAttribute('data-theme', newConfig.ui.theme)
} else {
document.body.setAttribute('data-theme', 'default')
}

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

@@ -51,106 +51,40 @@
font-size 14px
colorPrimaryButton()
body[data-theme="dark"]
.root
modalDark()
width 500px
height 270px
overflow hidden
position relative
apply-theme(theme)
body[data-theme={theme}]
.root
width 500px
height 270px
overflow hidden
position relative
position relative
z-index $modal-z-index
width 100%
background-color get-theme-var(theme, 'backgroundColor')
overflow hidden
border-radius $modal-border-radius
.header
background-color transparent
border-color $ui-dark-borderColor
color $ui-dark-text-color
.header
background-color transparent
border-color $ui-dark-borderColor
color get-theme-var(theme, 'text-color')
.control-folder-label
color $ui-dark-text-color
.control-folder-label
color get-theme-var(theme, 'text-color')
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.description
color $ui-inactive-text-color
.control-confirmButton
colorDarkPrimaryButton()
.control-confirmButton
colorThemedPrimaryButton(theme)
body[data-theme="solarized-dark"]
.root
modalSolarizedDark()
width 500px
height 270px
overflow hidden
position relative
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
.header
background-color transparent
border-color $ui-dark-borderColor
color $ui-solarized-dark-text-color
.control-folder-label
color $ui-solarized-dark-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorSolarizedDarkPrimaryButton()
body[data-theme="monokai"]
.root
modalMonokai()
width 500px
height 270px
overflow hidden
position relative
.header
background-color transparent
border-color $ui-dark-borderColor
color $ui-monokai-text-color
.control-folder-label
color $ui-monokai-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorMonokaiPrimaryButton()
body[data-theme="dracula"]
.root
modalDracula()
width 500px
height 270px
overflow hidden
position relative
.header
background-color transparent
border-color $ui-dark-borderColor
color $ui-dracula-text-color
.control-folder-label
color $ui-dracula-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorDraculaPrimaryButton()
for theme in $themes
apply-theme(theme)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -140,66 +140,25 @@ body[data-theme="default"], body[data-theme="white"]
.snippet-item-selected
background darken($ui-backgroundColor, 5)
body[data-theme="dark"]
.snippets
background $ui-dark-backgroundColor
.snippet-item
color white
&::after
background $ui-dark-borderColor
&:hover
background darken($ui-dark-backgroundColor, 5)
.snippet-item-selected
background darken($ui-dark-backgroundColor, 5)
.snippet-detail
color white
.group-control-button
colorDarkPrimaryButton()
apply-theme(theme)
body[data-theme={theme}]
.snippets
background get-theme-var(theme, 'backgroundColor')
.snippet-item
color get-theme-var(theme, 'text-color')
&::after
background get-theme-var(theme, 'borderColor')
&:hover
background darken(get-theme-var(theme, 'backgroundColor'), 5)
.snippet-item-selected
background darken(get-theme-var(theme, 'backgroundColor'), 5)
.snippet-detail
color get-theme-var(theme, 'text-color')
.group-control-button
colorThemedPrimaryButton(theme)
body[data-theme="solarized-dark"]
.snippets
background $ui-solarized-dark-backgroundColor
.snippet-item
color white
&::after
background $ui-solarized-dark-borderColor
&:hover
background darken($ui-solarized-dark-backgroundColor, 5)
.snippet-item-selected
background darken($ui-solarized-dark-backgroundColor, 5)
.snippet-detail
color white
.group-control-button
colorSolarizedDarkPrimaryButton()
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
body[data-theme="monokai"]
.snippets
background $ui-monokai-backgroundColor
.snippet-item
color White
&::after
background $ui-monokai-borderColor
&:hover
background darken($ui-monokai-backgroundColor, 5)
.snippet-item-selected
background darken($ui-monokai-backgroundColor, 5)
.snippet-detail
color white
.group-control-button
colorMonokaiPrimaryButton()
body[data-theme="dracula"]
.snippets
background $ui-dracula-backgroundColor
.snippet-item
color #f8f8f2
&::after
background $ui-dracula-borderColor
&:hover
background darken($ui-dracula-backgroundColor, 5)
.snippet-item-selected
background darken($ui-dracula-backgroundColor, 5)
.snippet-detail
color #f8f8f2
.group-control-button
colorDraculaPrimaryButton()
for theme in $themes
apply-theme(theme)

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
color $ui-solarized-dark-text-color
body[data-theme="dracula"]
.header
border-color $ui-dracula-borderColor
apply-theme(theme)
body[data-theme={theme}]
.header
border-color get-theme-var(theme, 'borderColor')
.header-control-button
colorDraculaDefaultButton()
border-color $ui-dracula-borderColor
.header-control-button
colorThemedPrimaryButton(theme)
border-color get-theme-var(theme, 'borderColor')
for theme in 'dracula'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

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

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

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

@@ -12,6 +12,7 @@ import _ from 'lodash'
import i18n from 'browser/lib/i18n'
import { getLanguages } from 'browser/lib/Languages'
import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
import uiThemes from 'browser/lib/ui-themes'
const OSX = global.process.platform === 'darwin'
@@ -214,12 +215,20 @@ class UiTab extends React.Component {
onChange={(e) => this.handleUIChange(e)}
ref='uiTheme'
>
<option value='default'>{i18n.__('Default')}</option>
<option value='white'>{i18n.__('White')}</option>
<option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
<option value='monokai'>{i18n.__('Monokai')}</option>
<option value='dracula'>{i18n.__('Dracula')}</option>
<option value='dark'>{i18n.__('Dark')}</option>
<optgroup label='Light 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>
<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>
</div>
</div>

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

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