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

added monokai theme

Browse Source
This commit is contained in:
William Grant
2018-04-27 08:10:50 +02:00
parent 90ff0f43ea
commit 92be3f32d6
33 changed files with 642 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
browser/components/NoteItem.styl
View File

@@ -321,3 +321,76 @@ body[data-theme="solarized-dark"]
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
body[data-theme="monokai"]
.root
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteList-backgroundColor
.item
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteList-backgroundColor
&:hover
transition 0.15s
// background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
color $ui-monokai-text-color
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color $ui-monokai-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
color $ui-monokai-text-color
&:active
transition 0.15s
background-color $ui-monokai-noteList-backgroundColor
color $ui-monokai-text-color
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color $ui-monokai-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
color $ui-monokai-text-color
.item-wrapper
border-color alpha($ui-monokai-button--active-backgroundColor, 60%)
.item--active
border-color $ui-monokai-borderColor
background-color $ui-monokai-button-backgroundColor
.item-wrapper
border-color transparent
.item-title
.item-title-icon
.item-bottom-time
color $ui-monokai-text-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 #c0392b
.item-bottom-tagList-item
background-color alpha(#fff, 20%)
.item-title
color $ui-inactive-text-color
.item-title-icon
color $ui-inactive-text-color
.item-title-empty
color $ui-inactive-text-color
.item-bottom-tagList-item
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-inactive-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle

58
browser/components/NoteItemSimple.styl
View File

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

11
browser/components/RealtimeNotification.styl
View File

@@ -41,3 +41,14 @@ body[data-theme="solarized-dark"]
background-color $ui-solarized-dark-button-backgroundColor
&:hover
color #5CB85C
body[data-theme="monokai"]
.notification-area
background-color none
.notification-link
color $ui-monokai-text-color
border none
background-color $ui-monokai-button-backgroundColor
&:hover
color #5CB85C

44
browser/components/SideNavFilter.styl
View File

@@ -222,4 +222,46 @@ body[data-theme="solarized-dark"]
background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color
.menu-button-label
color $ui-solarized-dark-text-color
color $ui-solarized-dark-text-color
body[data-theme="monokai"]
.menu-button
&:active
background-color $ui-monokai-noteList-backgroundColor
color $ui-monokai-text-color
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.menu-button--active
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
.menu-button-label
color $ui-monokai-text-color
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.menu-button-label
color $ui-monokai-text-color
.menu-button-star--active
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
.menu-button-label
color $ui-monokai-text-color
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.menu-button-label
color $ui-monokai-text-color
.menu-button-trash--active
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
.menu-button-label
color $ui-monokai-text-color
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.menu-button-label
color $ui-monokai-text-color

19
browser/components/StorageItem.styl
View File

@@ -138,3 +138,22 @@ body[data-theme="solarized-dark"]
&:hover
color $ui-solarized-dark-text-color
background-color $ui-solarized-dark-button-backgroundColor
body[data-theme="monokai"]
.folderList-item
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
&:active
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
.folderList-item--active
@extend .folderList-item
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
&:active
background-color $ui-monokai-button-backgroundColor
&:hover
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor

10
browser/components/TodoListPercentage.styl
View File

@@ -47,5 +47,15 @@ body[data-theme="solarized-dark"]
.progressBar
background-color: #2aa198
.percentageText
color #fdf6e3
body[data-theme="monokai"]
.percentageBar
background-color #f92672
.progressBar
background-color: #373831
.percentageText
color #fdf6e3

27
browser/components/markdown.styl
View File

@@ -371,3 +371,30 @@ body[data-theme="solarized-dark"]
border-color themeSolarizedDarkTableBorder
&:last-child
border-right solid 1px themeSolarizedDarkTableBorder
themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
themeMonokaiTableHead = themeMonokaiTableEven
themeMonokaiTableBorder = themeDarkBorder
body[data-theme="monokai"]
color $ui-monokai-text-color
border-color themeDarkBorder
background-color $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

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

@@ -30,3 +30,10 @@ body[data-theme="solarized-dark"]
border-left 1px solid $ui-solarized-dark-borderColor
.empty-message
color $ui-solarized-dark-text-color
body[data-theme="monokai"]
.root
background-color $ui-monokai-noteDetail-backgroundColor
border-left 1px solid $ui-monokai-borderColor
.empty-message
color $ui-monokai-text-color

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

@@ -133,3 +133,22 @@ body[data-theme="dark"]
color $ui-dark-button--active-color
.search-optionList-item-name-surfix
color $ui-dark-inactive-text-color
body[data-theme="monokai"]
.search-optionList
color white
border-color $ui-monokai-borderColor
background-color $ui-monokai-button-backgroundColor
.search-optionList-item
&:hover
background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
.search-optionList-item--active
background-color $ui-monokai-button--active-backgroundColor
color $ui-monokai-button--active-color
&:hover
background-color $ui-monokai-button--active-backgroundColor
color $ui-monokai-button--active-color
.search-optionList-item-name-surfix
color $ui-monokai-inactive-text-color

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

@@ -215,3 +215,43 @@ body[data-theme="solarized-dark"]
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

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

@@ -71,3 +71,8 @@ body[data-theme="solarized-dark"]
.root
border-left 1px solid $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteDetail-backgroundColor
body[data-theme="monokai"]
.root
border-left 1px solid $ui-monokai-borderColor
background-color $ui-monokai-noteDetail-backgroundColor

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

@@ -98,3 +98,7 @@ body[data-theme="solarized-dark"]
border-color $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteDetail-backgroundColor
body[data-theme="monokai"]
.info
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteDetail-backgroundColor

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

@@ -152,4 +152,21 @@ body[data-theme="solarized-dark"]
.tabList
background-color $ui-solarized-dark-noteDetail-backgroundColor
color $ui-solarized-dark-text-color
color $ui-solarized-dark-text-color
body[data-theme="monokai"]
.root
border-left 1px solid $ui-monokai-borderColor
background-color $ui-monokai-noteDetail-backgroundColor
.body
background-color $ui-monokai-noteDetail-backgroundColor
.body .description textarea
background-color $ui-monokai-noteDetail-backgroundColor
color $ui-monokai-text-color
border 1px solid $ui-monokai-borderColor
.tabList
background-color $ui-monokai-noteDetail-backgroundColor
color $ui-monokai-text-color

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

@@ -81,4 +81,20 @@ body[data-theme="solarized-dark"]
.newTag
border-color none
background-color transparent
color $ui-solarized-dark-text-color
color $ui-solarized-dark-text-color
body[data-theme="monokai"]
.tag
background-color $ui-monokai-tag-backgroundColor
.tag-removeButton
border-color $ui-button--focus-borderColor
background-color transparent
.tag-label
color $ui-monokai-text-color
.newTag
border-color none
background-color transparent
color $ui-monokai-text-color

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

@@ -56,3 +56,10 @@ body[data-theme="solarized-dark"]
.active
background-color #1EC38B
box-shadow 2px 0px 7px #222222
body[data-theme="monokai"]
.control-toggleModeButton
background-color #272822
.active
background-color #1EC38B
box-shadow 2px 0px 7px #222222

3
browser/main/Main.js
View File

@@ -143,7 +143,8 @@ class Main extends React.Component {
const supportedThemes = [
'dark',
'white',
'solarized-dark'
'solarized-dark',
'monokai'
]
if (supportedThemes.indexOf(config.ui.theme) !== -1) {

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

@@ -74,4 +74,8 @@ body[data-theme="dark"]
body[data-theme="solarized-dark"]
.root, .root--expanded
background-color $ui-solarized-dark-noteList-backgroundColor
background-color $ui-solarized-dark-noteList-backgroundColor
body[data-theme="monokai"]
.root, .root--expanded
background-color $ui-monokai-noteList-backgroundColor

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

@@ -113,4 +113,28 @@ body[data-theme="solarized-dark"]
.control-button--active
color $ui-solarized-dark-text-color
&:active
color $ui-solarized-dark-text-color
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

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

@@ -117,3 +117,8 @@ body[data-theme="solarized-dark"]
.root, .root--folded
background-color $ui-solarized-dark-backgroundColor
border-right 1px solid $ui-solarized-dark-borderColor
body[data-theme="monokai"]
.root, .root--folded
background-color $ui-monokai-backgroundColor
border-right 1px solid $ui-monokai-borderColor

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

@@ -69,3 +69,14 @@ body[data-theme="dark"]
navDarkButtonColor()
border-color $ui-dark-borderColor
border-left 1px solid $ui-dark-borderColor
body[data-theme="monokai"]
navButtonColor()
.zoom
border-color $ui-dark-borderColor
color $ui-monokai-text-color
&:hover
transition 0.15s
color $ui-monokai-active-color
&:active
color $ui-monokai-active-color

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

@@ -234,3 +234,25 @@ body[data-theme="solarized-dark"]
input
background-color $ui-solarized-dark-noteList-backgroundColor
color $ui-solarized-dark-text-color
body[data-theme="monokai"]
.root, .root--expanded
background-color $ui-monokai-noteList-backgroundColor
.control
border-color $ui-monokai-borderColor
.control-search
background-color $ui-monokai-noteList-backgroundColor
.control-search-icon
absolute top bottom left
line-height 32px
width 35px
color $ui-monokai-inactive-text-color
background-color $ui-monokai-noteList-backgroundColor
.control-search-input
background-color $ui-monokai-noteList-backgroundColor
input
background-color $ui-monokai-noteList-backgroundColor
color $ui-monokai-text-color

6
browser/main/global.styl
View File

@@ -134,4 +134,10 @@ body[data-theme="solarized-dark"]
.sortableItemHelper
color: $ui-solarized-dark-text-color
body[data-theme="monokai"]
.ModalBase
.modalBack
background-color $ui-monokai-backgroundColor
.sortableItemHelper
color: $ui-monokai-text-color

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

@@ -135,6 +135,8 @@ function set (updates) {
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 {
document.body.setAttribute('data-theme', 'default')
}

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

@@ -102,3 +102,29 @@ body[data-theme="solarized-dark"]
.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()

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

@@ -81,3 +81,19 @@ body[data-theme="solarized-dark"]
.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

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

@@ -133,6 +133,11 @@ colorSolarizedDarkControl()
background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color
colorMonokaiControl()
border none
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
body[data-theme="dark"]
.root
@@ -189,4 +194,29 @@ body[data-theme="solarized-dark"]
select, .group-section-control-input
colorSolarizedDarkControl()
body[data-theme="monokai"]
.root
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()

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

@@ -33,4 +33,10 @@ body[data-theme="solarized-dark"]
.root
color $ui-solarized-dark-text-color
p
color $ui-solarized-dark-text-color
color $ui-solarized-dark-text-color
body[data-theme="monokai"]
.root
color $ui-monokai-text-color
p
color $ui-monokai-text-color

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

@@ -126,3 +126,26 @@ body[data-theme="solarized-dark"]
.folderItem-right-dangerButton
colorSolarizedDarkPrimaryButton()
body[data-theme="monokai"]
.folderItem
&:hover
background-color $ui-monokai-button-backgroundColor
.folderItem-left-danger
color $danger-color
.folderItem-left-key
color $ui-dark-inactive-text-color
.folderItem-left-colorButton
colorMonokaiPrimaryButton()
.folderItem-right-button
colorMonokaiPrimaryButton()
.folderItem-right-confirmButton
colorMonokaiPrimaryButton()
.folderItem-right-dangerButton
colorMonokaiPrimaryButton()

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

@@ -68,3 +68,10 @@ body[data-theme="solarized-dark"]
.list
a
color $ui-solarized-dark-active-color
body[data-theme="monokai"]
.root
color $ui-monokai-text-color
.list
a
color $ui-monokai-active-color

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

@@ -116,3 +116,26 @@ body[data-theme="solarized-dark"]
&: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

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

@@ -199,3 +199,40 @@ body[data-theme="solarized-dark"]
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

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

@@ -170,6 +170,7 @@ class UiTab extends React.Component {
<option value='default'>{i18n.__('Default')}</option>
<option value='white'>{i18n.__('White')}</option>
<option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
<option value='monokai'>{i18n.__('Monokai')}</option>
<option value='dark'>{i18n.__('Dark')}</option>
</select>
</div>

36
browser/styles/index.styl
View File

@@ -118,6 +118,16 @@ colorSolarizedDarkPrimaryButton()
&:active:hover
background-color $dark-primary-button-background--active
colorMonokaiPrimaryButton()
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
border none
&:hover
background-color $dark-primary-button-background--hover
&:active
&:active:hover
background-color $dark-primary-button-background--active
// Danger button(Brand color)
$danger-button-background = #c9302c
@@ -348,3 +358,29 @@ modalSolarizedDark()
background-color $ui-solarized-dark-backgroundColor
overflow hidden
border-radius $modal-border-radius
/******* Monokai theme ********/
$ui-monokai-backgroundColor = #272822
$ui-monokai-noteList-backgroundColor = #272822
$ui-monokai-noteDetail-backgroundColor = #272822
$ui-monokai-text-color = #f8f8f2
$ui-monokai-active-color = #f92672
$ui-monokai-borderColor = #373831
$ui-monokai-tag-backgroundColor = #f92672
$ui-monokai-button-backgroundColor = #373831
$ui-monokai-button--active-color = white
$ui-monokai-button--active-backgroundColor = #f92672
$ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%)
modalmonokai()
position relative
z-index $modal-z-index
width 100%
background-color $ui-monokai-backgroundColor
overflow hidden
border-radius $modal-border-radius