added monokai theme

2026-01-17 10:59:21 +00:00 · 2018-04-27 08:10:50 +02:00
parent 90ff0f43ea
commit 92be3f32d6
33 changed files with 642 additions and 7 deletions
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -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
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -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
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -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
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -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
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -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
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -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
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -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
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -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
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -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) {
--- a/browser/main/NewNoteButton/NewNoteButton.styl
+++ b/browser/main/NewNoteButton/NewNoteButton.styl
@@ -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
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -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
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -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
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -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
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -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
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -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

--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -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')
  }
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -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()
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -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
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -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()
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl
@@ -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
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -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()
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -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
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -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
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -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
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -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>