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

adding Nord theme and streamlining UI theming

Browse Source
This commit is contained in:
Baptiste Augrain
2019-02-08 00:50:47 +01:00
parent 8b8d915ab7
commit 1cdac943ba
45 changed files with 1192 additions and 2306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
browser/components/MarkdownPreview.js
View File

@@ -24,6 +24,7 @@ import fs from 'fs'
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'
const { remote, shell } = require('electron') const { remote, shell } = require('electron')
const attachmentManagement = require('../main/lib/dataApi/attachmentManagement') const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
@@ -426,15 +427,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 () {

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

172
browser/components/markdown.styl
View File

@@ -511,137 +511,51 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
background-color $ui-dark-tag-backgroundColor background-color $ui-dark-tag-backgroundColor
themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor apply-theme(theme)
themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%) body[data-theme={theme}]
themeSolarizedDarkTableHead = themeSolarizedDarkTableEven color get-theme-var(theme, 'text-color')
themeSolarizedDarkTableBorder = themeDarkBorder
body[data-theme="solarized-dark"]
color $ui-solarized-dark-text-color
border-color themeDarkBorder
background-color $ui-solarized-dark-noteDetail-backgroundColor
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')
themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor pre.fence
themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%) .gallery
themeMonokaiTableHead = themeMonokaiTableEven .carousel-main, .carousel-footer
themeMonokaiTableBorder = themeDarkBorder background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.prev, .next
color get-theme-var(theme, 'button--active-color')
background-color get-theme-var(theme, 'button-backgroundColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
color $ui-monokai-text-color apply-theme(theme)
border-color themeDarkBorder
background-color $ui-monokai-noteDetail-backgroundColor
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
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 $ui-dracula-noteDetail-backgroundColor
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

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 = `
@@ -22,15 +23,19 @@ function getId () {
function render (element, content, theme) { function render (element, content, theme) {
try { try {
const height = element.attributes.getNamedItem('data-height') const height = element.attributes.getNamedItem('data-height')
if (height && height.value !== 'undefined') { if (height && height.value !== 'undefined') {
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 : '',
useMaxWidth: false useMaxWidth: false
}) })
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,37 @@ 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 border-color get-theme-var(theme, 'borderColor')
background-color lighten($ui-monokai-button--hover-backgroundColor, 15%) 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-item-name-surfix
color get-theme-var(theme, 'inactive-text-color')
.search-optionList for theme in 'solarized-dark' 'dracula'
color #f8f8f2 apply-theme(theme)
border-color $ui-dracula-borderColor
background-color $ui-dracula-button-backgroundColor
.search-optionList-item for theme in $themes
&:hover apply-theme(theme)
background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
.search-optionList-item--active
background-color $ui-dracula-button--active-backgroundColor
color $ui-dracula-button--active-color
&:hover
background-color $ui-dark-button--hover-backgroundColor
color $ui-dracula-button--active-color
.search-optionList-item-name-surfix
color $ui-dracula-inactive-text-color

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

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

@@ -66,18 +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"] for theme in $themes
.root apply-theme(theme)
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

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

@@ -94,17 +94,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

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

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

@@ -1,77 +1,77 @@
.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 .tooltip
tooltip() tooltip()
position absolute position absolute
pointer-events none pointer-events none
top 33px top 33px
left -10px left -10px
z-index 200 z-index 200
width 80px width 80px
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
left -8px left -8px
width 70px width 70px
body[data-theme="dark"] body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() topBarButtonDark()
.control-toggleModeButton .control-toggleModeButton
background-color #3A404C background-color #3A404C
.active .active
background-color #1EC38B background-color #1EC38B
box-shadow 2px 0px 7px #444444 box-shadow 2px 0px 7px #444444
body[data-theme="solarized-dark"] body[data-theme="solarized-dark"]
.control-toggleModeButton .control-toggleModeButton
background-color #002B36 background-color #002B36
.active .active
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"]
.control-toggleModeButton for theme in 'dracula'
background-color #44475a apply-theme(theme)
.active
background-color #bd93f9 for theme in $themes
box-shadow 2px 0px 7px #222222 apply-theme(theme)

5
browser/main/Main.js
View File

@@ -17,6 +17,7 @@ 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'
const path = require('path') const path = require('path')
const electron = require('electron') const electron = require('electron')
const { remote } = electron const { remote } = electron
@@ -142,9 +143,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%)

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

@@ -78,24 +78,20 @@ 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 navButtonColor()
border-color $ui-dark-borderColor .zoom
color $ui-monokai-text-color border-color $ui-dark-borderColor
&:hover color get-theme-var(theme, 'text-color')
transition 0.15s &:hover
color $ui-monokai-active-color transition 0.15s
&:active color get-theme-var(theme, 'active-color')
color $ui-monokai-active-color &:active
color get-theme-var(theme, 'active-color')
body[data-theme="dracula"] for theme in 'dracula'
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'
@@ -154,16 +155,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()

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

@@ -47,70 +47,26 @@
text-align center text-align center
margin-bottom 25px margin-bottom 25px
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 .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
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
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

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

@@ -128,20 +128,10 @@ 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()
border none
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
colorDraculaControl()
border none
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
body[data-theme="dark"] body[data-theme="dark"]
.root .root
@@ -170,84 +160,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
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
border-color $ui-solarized-dark-borderColor
.group-header2 .group-section-control-input
color $ui-solarized-dark-text-color border-color get-theme-var(theme, 'borderColor')
.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
color $ui-monokai-text-color
border-color $ui-monokai-borderColor
.group-header2
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
color $ui-dracula-text-color
border-color $ui-dracula-borderColor
.group-header2
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

@@ -30,20 +30,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()

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

@@ -61,24 +61,16 @@ body[data-theme="dark"]
.root .root
color alpha($tab--dark-text-color, 80%) color alpha($tab--dark-text-color, 80%)
apply-theme(theme)
body[data-theme={theme}]
.root
color get-theme-var(theme, 'text-color')
.list
a
color get-theme-var(theme, 'active-color')
body[data-theme="solarized-dark"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
color $ui-solarized-dark-text-color
.list
a
color $ui-solarized-dark-active-color
body[data-theme="monokai"] for theme in $themes
.root apply-theme(theme)
color $ui-monokai-text-color
.list
a
color $ui-monokai-active-color
body[data-theme="dracula"]
.root
color $ui-dracula-text-color
.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

@@ -149,66 +149,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()

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

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

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'
@@ -197,12 +198,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)

139
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--active-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,13 +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%)
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'