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

dark theme

Browse Source
This commit is contained in:
Dick Choi
2016-08-14 17:28:46 +09:00
parent dd0440519b
commit 8736d87b95
32 changed files with 803 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
browser/components/MarkdownEditor.js
View File

@@ -147,6 +147,7 @@ class MarkdownEditor extends React.Component {
: 'preview--hide'
}
style={previewStyle}
theme={config.ui.theme}
fontSize={config.preview.fontSize}
fontFamily={config.preview.fontFamily}
codeBlockTheme={config.preview.codeBlockTheme}

7
browser/components/MarkdownPreview.js
View File

@@ -88,7 +88,8 @@ export default class MarkdownPreview extends React.Component {
prevProps.fontSize !== this.props.fontSize ||
prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
prevProps.lineNumber !== this.props.lineNumber
prevProps.lineNumber !== this.props.lineNumber ||
prevProps.theme !== this.props.theme
) this.rewriteIframe()
}
@@ -100,7 +101,7 @@ export default class MarkdownPreview extends React.Component {
el.removeEventListener('click', this.checkboxClickHandler)
})
let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, theme } = this.props
fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
? [fontFamily].concat(defaultFontFamily)
: defaultFontFamily
@@ -137,6 +138,8 @@ export default class MarkdownPreview extends React.Component {
<link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
<link rel="stylesheet" href="../resources/katex.min.css">
`
this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {

45
browser/components/markdown.styl
View File

@@ -244,3 +244,48 @@ table
border-color borderColor
&:last-child
border-right solid 1px borderColor
themeDarkBackground = darken(#21252B, 10%)
themeDarkText = #DDDDDD
themeDarkBorder = lighten(themeDarkBackground, 20%)
themeDarkPreview = #282C34
themeDarkTableOdd = themeDarkPreview
themeDarkTableEven = darken(themeDarkPreview, 10%)
themeDarkTableHead = themeDarkTableEven
themeDarkTableBorder = themeDarkBorder
themeDarkModalButtonDefault = themeDarkPreview
themeDarkModalButtonDanger = #BF360C
body[data-theme="dark"]
color themeDarkText
border-color themeDarkBorder
background-color themeDarkPreview
a:hover
background-color alpha(lighten(brandColor, 30%), 0.2) !important
code
border-color darken(themeDarkBorder, 10%)
background-color lighten(themeDarkPreview, 5%)
pre
code
background-color transparent
label.taskListItem
background-color themeDarkPreview
table
thead
tr
background-color themeDarkTableHead
th
border-color themeDarkTableBorder
&:last-child
border-right solid 1px themeDarkTableBorder
tbody
tr:nth-child(2n + 1)
background-color themeDarkTableOdd
tr:nth-child(2n)
background-color themeDarkTableEven
td
border-color themeDarkTableBorder
&:last-child
border-right solid 1px themeDarkTableBorder

30
browser/finder/FinderMain.styl
View File

@@ -20,6 +20,7 @@ $list-width = 250px
border none
outline none
text-align center
background-color transparent
.result
absolute left right bottom
top $search-height
@@ -76,3 +77,32 @@ $list-width = 250px
.result-detail
absolute top bottom right
left $nav-width + $list-width
body[data-theme="dark"]
.root
background-color $ui-dark-backgroundColor
.search
border-color $ui-dark-borderColor
.search-input
color $ui-dark-text-color
.result-nav
background-color $ui-dark-backgroundColor
label
color $ui-dark-text-color
.result-nav-menu
navDarkButtonColor()
.result-nav-menu--active
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
&:hover
background-color $ui-dark-button--active-backgroundColor
.result-list
border-color $ui-dark-borderColor
.result-detail
absolute top bottom right
left $nav-width + $list-width

46
browser/finder/NoteDetail.styl
View File

@@ -31,14 +31,6 @@
position relative
flex 1
border-right $ui-border
&:hover
.tabList-item-deleteButton
color $ui-inactive-text-color
&:hover
background-color darken($ui-backgroundColor, 15%)
&:active
color white
background-color $ui-active-color
.tabList-item--active
@extend .tabList-item
.tabList-item-button
@@ -47,6 +39,7 @@
width 100%
height 29px
navButtonColor()
outline none
border-left 4px solid transparent
.tabList-item-deleteButton
position absolute
@@ -91,3 +84,40 @@
box-sizing border-box
height 100%
width 100%
body[data-theme="dark"]
.description
border-color $ui-dark-borderColor
.description-textarea
background-color $ui-dark-button--hover-backgroundColor
color white
.tabList
background-color $ui-button--active-backgroundColor
border-bottom-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.tabList-item
border-color $ui-dark-borderColor
&:hover
background-color $ui-dark-button--hover-backgroundColor
.tabList-item--active
border-color $ui-dark-borderColor
.tabList-item-button
border-color $brand-color
.tabList-item-button
navDarkButtonColor()
border-left 4px solid transparent
.tabList-plusButton
navDarkButtonColor()
.tabView-top
border-color $ui-dark-borderColor
.tabView-top-name
border-color $ui-dark-borderColor
color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor
.tabView-top-mode
border-color $ui-dark-borderColor
background-color $dark-default-button-background
color $ui-dark-inactive-text-color

35
browser/finder/NoteItem.styl
View File

@@ -84,3 +84,38 @@
color $ui-inactive-text-color
vertical-align middle
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
&:hover
background-color alpha($ui-active-color, 20%)
.root--active
@extend .root
.border
border-color $ui-active-color
.info
color $ui-dark-inactive-text-color
.info-left-folder
color $ui-dark-text-color
.info-left-folder-surfix
color $ui-dark-inactive-text-color
.title
color $ui-dark-text-color
.title-icon
color $ui-dark-inactive-text-color
.title-empty
color $ui-dark-inactive-text-color
.tagList-icon
color $ui-dark-button-color
.tagList-item
border-color $ui-dark-button--focus-borderColor
background-color $ui-dark-backgroundColor
.tagList-empty
color $ui-dark-inactive-text-color

26
browser/finder/StorageSection.styl
View File

@@ -57,3 +57,29 @@
color $ui-button--active-color
&:hover
background-color $ui-button--active-backgroundColor
body[data-theme="dark"]
.header-toggleButton
navDarkButtonColor()
.header-name
navDarkButtonColor()
.header-name--active
@extend .header-name
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:hover
background-color $ui-button--active-backgroundColor
.folderList-item
navDarkButtonColor()
border-width 0 0 0 6px
border-style solid
border-color transparent
.folderList-item--active
@extend .folderList-item
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:hover
background-color $ui-button--active-backgroundColor

5
browser/finder/ipcClient.js
View File

@@ -79,6 +79,11 @@ nodeIpc.connectTo(
nodeIpc.of.node.on('config-renew', function (payload) {
console.log('config', payload)
if (payload.ui.theme === 'dark') {
document.body.setAttribute('data-theme', 'dark')
} else {
document.body.setAttribute('data-theme', 'default')
}
store.default.dispatch({
type: 'SET_CONFIG',
config: payload

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

@@ -15,3 +15,10 @@
line-height 72px
text-align center
color $ui-inactive-text-color
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.empty-message
color $ui-dark-inactive-text-color

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

@@ -57,10 +57,11 @@
.search-optionList
position fixed
border $ui-border
z-index 200
background-color white
border-radius 2px
box-shadow 2px 2px 10px gray
.search-optionList-item
height 34px
@@ -86,3 +87,45 @@
font-size 10px
color $ui-inactive-text-color
margin-left 5px
body[data-theme="dark"]
.root
color $ui-dark-text-color
&:hover
color white
background-color $ui-dark-button--hover-backgroundColor
border-color $ui-dark-borderColor
.root--search, .root--focus
@extend .root
background-color $ui-dark-button--hover-backgroundColor
border-color $ui-input--focus-borderColor
&:hover
background-color $ui-dark-button--hover-backgroundColor
border-color $ui-input--focus-borderColor
.idle-label-name-surfix
color $ui-dark-inactive-text-color
.search-input
color white
background-color transparent
border-color $ui-dark-borderColor
.search-optionList
color white
background-color $ui-dark-button--hover-backgroundColor
box-shadow 2px 2px 10px black
.search-optionList-item
&:hover
background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
.search-optionList-item--active
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
&:hover
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
.search-optionList-item-name-surfix
color $ui-dark-inactive-text-color

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

@@ -29,7 +29,6 @@ $info-height = 75px
padding 0 25px
border-radius 2px
border none
color $ui-text-color
colorDangerButton()
.info-delete-cancelButton
@@ -88,6 +87,7 @@ $info-height = 75px
top 45px
padding 5px
opacity 0
border-radius 2px
.body
absolute bottom left right
@@ -95,3 +95,36 @@ $info-height = 75px
.body-noteEditor
absolute top bottom left right
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
.info
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.info-delete
color $ui-dark-text-color
.info-delete-confirmButton
colorDarkDangerButton()
color $ui-dark-text-color
.info-delete-cancelButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
color $ui-dark-text-color
.info-right-button
navDarkButtonColor()
border-color $ui-dark-borderColor
&:active
border-color $ui-dark-button--focus-borderColor
&:hover .info-right-button-tooltip
opacity 1
&:focus
border-color $ui-button--focus-borderColor
.info-right-button-tooltip
darkTooltip()

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

@@ -174,3 +174,95 @@ $info-height = 75px
.tabView-content
absolute left right bottom
top 30px
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
.info
border-bottom-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.info-delete
color $ui-dark-text-color
.info-delete-confirmButton
colorDarkDangerButton()
color $ui-dark-text-color
.info-delete-cancelButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
color $ui-dark-text-color
.info-right-button
navDarkButtonColor()
border-color $ui-dark-borderColor
&:active
border-color $ui-dark-button--focus-borderColor
&:hover .info-right-button-tooltip
opacity 1
&:focus
border-color $ui-button--focus-borderColor
.info-right-button-tooltip
darkTooltip()
.body-description
border-bottom-color $ui-dark-borderColor
.body-description-textarea
background-color $ui-dark-button--hover-backgroundColor
color white
.tabList
background-color $ui-button--active-backgroundColor
border-bottom-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.tabList-item
border-color $ui-dark-borderColor
&:hover
background-color $ui-dark-button--hover-backgroundColor
.tabList-item-deleteButton
color $ui-dark-inactive-text-color
&:hover
background-color darken($ui-dark-button--hover-backgroundColor, 15%)
&:active
color white
background-color $ui-dark-button--active-backgroundColor
.tabList-item--active
border-color $ui-dark-borderColor
.tabList-item-button
border-color $brand-color
&:hover
background-color $ui-dark-button--hover-backgroundColor
.tabList-item-deleteButton
color $ui-dark-inactive-text-color
&:hover
background-color darken($ui-dark-button--hover-backgroundColor, 15%)
&:active
color white
background-color $ui-dark-button--active-backgroundColor
.tabList-item-button
navDarkButtonColor()
border-left 4px solid transparent
.tabList-plusButton
navDarkButtonColor()
.tabView-top
border-color $ui-dark-borderColor
.tabView-top-name
border-color $ui-dark-borderColor
color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor
.tabView-top-mode
border-color $ui-dark-borderColor
background-color $dark-default-button-background
color $ui-dark-inactive-text-color
&:hover
color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
&:active:hover
background-color $ui-dark-button--active-backgroundColor

6
browser/main/Detail/StarButton.styl
View File

@@ -7,10 +7,11 @@
.tooltip
opacity 1
.root--active
@extend .root
color $ui-active-color
color $brand-color
&:hover
color $brand-color !important
.icon
transform rotate(-72deg)
.icon
@@ -23,3 +24,4 @@
right 65px
padding 5px
opacity 0
border-radius 2px

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

@@ -61,3 +61,27 @@
border-color $ui-input--focus-borderColor = #369DCD
&:disabled
background-color $ui-input--disabled-backgroundColor = #DDD
body[data-theme="dark"]
.icon
color $ui-dark-button-color
.tag
background-color $ui-dark-button--hover-backgroundColor
.tag-removeButton
border-color $ui-button--focus-borderColor
background-color transparent
color $ui-button-color
.tag-label
color $ui-dark-text-color
.newTag
border-color $ui-dark-borderColor
background-color transparent
color $ui-dark-text-color
&:focus
border-color $ui-input--focus-borderColor = #369DCD
&:disabled
background-color $ui-input--disabled-backgroundColor = #DDD

8
browser/main/Main.js
View File

@@ -27,7 +27,13 @@ class Main extends React.Component {
}
componentDidMount () {
let { dispatch } = this.props
let { dispatch, config } = this.props
if (config.ui.theme === 'dark') {
document.body.setAttribute('data-theme', 'dark')
} else {
document.body.setAttribute('data-theme', 'default')
}
// Reload all data
dataApi.init()

12
browser/main/Main.styl
View File

@@ -28,3 +28,15 @@
left -3px
z-index 10
cursor col-resize
body[data-theme="dark"]
.root
absolute top left bottom right
.slider
background-color $ui-dark-borderColor
border-color $ui-dark-borderColor
.slider--active
background-color $ui-button--active-backgroundColor

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

@@ -91,3 +91,44 @@
color $ui-inactive-text-color
vertical-align middle
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.item
border-color $ui-dark-borderColor
&:hover
background-color alpha($ui-active-color, 20%)
.item--active
@extend .item
.item-border
border-color $ui-active-color
.item-info
color $ui-dark-inactive-text-color
.item-info-left-folder
color $ui-dark-text-color
.item-info-left-folder-surfix
color $ui-dark-inactive-text-color
.item-title
color $ui-dark-text-color
.item-title-icon
color $ui-darkinactive-text-color
.item-title-empty
color $ui-dark-inactive-text-color
.item-tagList-icon
color $ui-dark-button-color
.item-tagList-item
border-color $ui-dark-button--focus-borderColor
background-color $ui-dark-button--hover-backgroundColor
color $ui-dark-text-color
.item-tagList-empty
color $ui-inactive-text-color
vertical-align middle

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

@@ -122,3 +122,32 @@
pointer-events none
opacity 0
font-size 12px
body[data-theme="dark"]
.root, .root--folded
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
color $ui-dark-text-color
.top
border-color $ui-dark-borderColor
.top-menu
navDarkButtonColor()
.menu-button
navDarkButtonColor()
.menu-button--active
@extend .menu-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
&:hover
background-color $ui-dark-button--active-backgroundColor
.storageList-empty
color $ui-dark-inactive-text-color
.navToggle
navDarkButtonColor()

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

@@ -35,3 +35,18 @@
.update-icon
color $brand-color
body[data-theme="dark"]
.root
background-color $ui-dark-backgroundColor
.pathname
color $ui-dark-inactive-text-color
.zoom
border-color $ui-dark-borderColor
.update
navDarkButtonColor()
border-color $ui-dark-borderColor
border-left 1px solid $ui-dark-borderColor

2
browser/main/StatusBar/index.js
View File

@@ -74,7 +74,7 @@ class StatusBar extends React.Component {
<div styleName='pathname'>{location.pathname + location.search}</div>
{this.state.updateReady
? <button onClick={this.updateApp} styleName='update'>
<i styleName='update-icon' className='fa fa-cloud-download'/> Update is ready!
<i styleName='update-icon' className='fa fa-cloud-download'/> Ready to Update!
</button>
: null
}

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

@@ -102,3 +102,65 @@ $control-height = 34px
line-height normal
opacity 0
transition 0.1s
body[data-theme="dark"]
.root, .root--expanded
background-color $ui-dark-backgroundColor
.control
border-color $ui-dark-borderColor
.control-search
background-color $dark-background-color
.control-search-icon
absolute top bottom left
line-height 32px
width 35px
color $ui-dark-inactive-text-color
.control-search-input
input
background-color $dark-background-color
color $ui-dark-text-color
.control-search-optionList
color white
background-color $ui-dark-button--hover-backgroundColor
border-color $ui-dark-borderColor
box-shadow 2px 2px 10px black
.control-search-optionList-item
border-color $ui-dark-borderColor
&:hover
background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
.control-search-optionList-item-folder
color $ui-dark-text-color
.control-search-optionList-item-folder-surfix
font-size 10px
margin-left 5px
color $ui-inactive-text-color
.control-search-optionList-item-type
font-size 12px
color $ui-inactive-text-color
padding-right 3px
.control-search-optionList-empty
height 150px
color $ui-inactive-text-color
line-height 150px
text-align center
.control-newPostButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
&:active
border-color $ui-dark-button--active-backgroundColor
.control-newPostButton-tooltip
darkTooltip()
position fixed
pointer-events none
top 45px
left 385px
z-index 10
padding 5px
line-height normal
opacity 0
transition 0.1s

4
browser/main/global.styl
View File

@@ -83,3 +83,7 @@ modalBackColor = transparentify(white, 65%)
absolute top left bottom right
background-color modalBackColor
z-index modalZIndex + 1
body[data-theme="dark"]
.ModalBase
.modalBack
background-color alpha(black, 60%)

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

@@ -67,6 +67,12 @@ function set (updates) {
if (!validate(newConfig)) throw new Error('INVALID CONFIG')
_save(newConfig)
if (newConfig.ui.theme === 'dark') {
document.body.setAttribute('data-theme', 'dark')
} else {
document.body.setAttribute('data-theme', 'default')
}
remote.getCurrentWindow().webContents.send('config-renew', {
config: get(),
silent: false

1
browser/main/lib/ipc.js
View File

@@ -114,6 +114,7 @@ nodeIpc.serve(
nodeIpc.server.on('connect', function (socket) {
console.log('connected')
nodeIpc.server.broadcast('config-renew', ConfigManager.get())
socket.on('close', function () {
console.log('socket dead')
})

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

@@ -54,3 +54,28 @@
color $ui-inactive-text-color
text-align center
margin-bottom 25px
body[data-theme="dark"]
.root
modalDark()
.header
background-color $ui-dark-button--hover-backgroundColor
border-color $ui-dark-borderColor
color $ui-dark-text-color
.closeButton
border-color $ui-dark-borderColor
color $ui-dark-text-color
colorDarkDefaultButton()
.control-button
border-color $ui-dark-borderColor
color $ui-dark-text-color
background-color transparent
&:focus
colorPrimaryButton()
.description
color $ui-inactive-text-color

1
browser/main/modals/PreferencesModal/ConfigTab.js
View File

@@ -230,7 +230,6 @@ class ConfigTab extends React.Component {
<select value={config.ui.theme}
onChange={(e) => this.handleUIChange(e)}
ref='uiTheme'
disabled
>
<option value='default'>Light</option>
<option value='dark'>Dark</option>

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

@@ -24,6 +24,7 @@
width 150px
text-align right
margin-right 10px
font-size 14px
.group-section-control
flex 1
.group-section-control-input
@@ -85,4 +86,28 @@
p
line-height 1.2
body[data-theme="dark"]
.root
color $ui-dark-text-color
.group-header
color $ui-dark-text-color
border-color $ui-dark-borderColor
.group-header2
color $ui-dark-text-color
.group-section-control-input
border-color $ui-dark-borderColor
.group-control
border-color $ui-dark-borderColor
.group-control-leftButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
.group-control-rightButton
colorDarkPrimaryButton()
.group-hint
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
color $ui-dark-text-color

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

@@ -33,3 +33,13 @@
padding-left 2em
li
white-space normal
body[data-theme="dark"]
.root
color $ui-dark-text-color
.madeBy
color $ui-dark-inactive-text-color
.copyright
color $ui-dark-inactive-text-color

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

@@ -35,3 +35,17 @@
absolute left right bottom
top 50px
overflow-y auto
body[data-theme="dark"]
.root
modalDark()
.nav
background-color $ui-dark-button--hover-backgroundColor
border-color $ui-dark-borderColor
.nav-button
background-color transparent
color #939395
&:hover
color $ui-dark-text-color

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

@@ -130,3 +130,50 @@
@extend .folderList-item-right-button
border none
colorDangerButton()
body[data-theme="dark"]
.header
border-color $ui-dark-borderColor
.header-label-path
color $ui-dark-inactive-text-color
.header-label-editButton
color $ui-dark-text-color
.header-control-button
colorDarkDefaultButton()
border-color $ui-dark-borderColor
.header-control-button-tooltip
tooltip()
position absolute
opacity 0
padding 5px
top 25px
z-index 10
white-space nowrap
.folderList-item
&:hover
background-color lighten($ui-dark-button--hover-backgroundColor, 5%)
.folderList-item-left-danger
color $danger-color
font-weight bold
.folderList-item-left-key
color $ui-dark-inactive-text-color
.folderList-item-left-colorButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
.folderList-item-right-button
colorDarkDefaultButton()
border-color $ui-dark-borderColor
.folderList-item-right-confirmButton
colorDarkPrimaryButton()
.folderList-item-right-dangerButton
colorDarkDangerButton()

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

@@ -113,3 +113,42 @@
border-radius 2px
height 30px
padding 0 15px
body[data-theme="dark"]
.root
padding 15px
color $ui-dark-text-color
.folderList-item
border-bottom $ui-dark-border
.folderList-empty
color $ui-dark-inactive-text-color
.list-empty
color $ui-dark-inactive-text-color
.list-control-addStorageButton
border-color $ui-dark-borderColor
colorDarkDefaultButton()
border-radius 2px
.addStorage-header
color $ui-dark-text-color
border-color $ui-dark-borderColor
.addStorage-body-section-name-input
border-color $ui-dark-borderColor
.addStorage-body-section-type-description
color $ui-dark-inactive-text-color
.addStorage-body-section-path-button
colorPrimaryButton()
.addStorage-body-control
border-color $ui-dark-borderColor
.addStorage-body-control-createButton
colorDarkPrimaryButton()
.addStorage-body-control-cancelButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor

75
browser/styles/index.styl
View File

@@ -1,3 +1,4 @@
// Default theme
$brand-color = #6AA5E9
$danger-color = #c9302c
@@ -137,3 +138,77 @@ modal()
overflow hidden
border-radius $modal-border-radius
box-shadow 2px 2px 10px gray
// Dark theme
$ui-dark-borderColor = lighten(#21252B, 20%)
$ui-dark-backgroundColor = darken(#21252B, 10%)
$dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = white
$ui-dark-button--active-backgroundColor = #6AA5E9
$ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
$dark-default-button-background = $ui-dark-backgroundColor
$dark-default-button-background--hover = $ui-dark-button--hover-backgroundColor
$dark-default-button-background--active = $ui-dark-button--active-backgroundColo
colorDarkDefaultButton()
border-color $ui-dark-borderColor
color $ui-dark-text-color
background-color $dark-default-button-background
&:hover
background-color $dark-default-button-background--hover
&:active
background-color $ui-dark-button--active-backgroundColor
&:active:hover
background-color $ui-dark-button--active-backgroundColor
$dark-danger-button-background = #c9302c
$dark-danger-button-background--hover = darken(#c9302c, 5%)
$dark-danger-button-background--active = darken(#c9302c, 10%)
colorDarkDangerButton()
color white
background-color $dark-danger-button-background
&:hover
background-color $dark-danger-button-background--hover
&:active
background-color $dark-danger-button-background--active
&:active:hover
background-color $dark-danger-button-background--active
navDarkButtonColor()
border none
color $ui-dark-button-color
background-color transparent
transition color background-color 0.15s
&:hover
color white
background-color $ui-dark-button--hover-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
&:active, &:active:hover
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
$ui-dark-tooltip-text-color = white
$ui-dark-tooltip-backgroundColor = alpha(#444, 70%)
$ui-dark-tooltip-button-backgroundColor = #D1D1D1
$ui-dark-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)
$ui-tooltip-font-size = 12px
darkTooltip()
background-color $ui-dark-tooltip-backgroundColor = alpha(#444, 70%)
color $ui-dark-tooltip-text-color = white
font-size $ui-dark-tooltip-font-size
pointer-events none
transition 0.1s
modalDark()
position relative
z-index $modal-z-index
width 100%
background-color $ui-dark-backgroundColor
overflow hidden
border-radius $modal-border-radius
box-shadow 2px 2px 10px black