Add Solarized Dark theme

2026-05-19 22:12:11 +00:00 · 2017-12-14 15:46:29 +09:00
parent 7afe3d5181
commit 1aafee2a7c
17 changed files with 234 additions and 19 deletions
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -22,3 +22,9 @@ body[data-theme="dark"]
    background-color $ui-dark-backgroundColor
  .empty-message
    color $ui-dark-inactive-text-color
+    
+body[data-theme="solarized-dark"]
+  .root
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+  .empty-message
+    color $ui-solarized-dark-text-color
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -3,7 +3,7 @@

 .root
  absolute top right bottom
-  border-left 1px solid alpha(#DEDEDE, 60%)
+  border-left 1px solid $ui-solarized-dark-borderColor
  background-color $ui-noteDetail-backgroundColor
  box-shadow none
  padding 20px 40px
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -101,3 +101,4 @@ body[data-theme="solarized-dark"]
  .info
    border-color $ui-solarized-dark-borderColor
    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -63,4 +63,20 @@ body[data-theme="dark"]
  .newTag
    border-color none
    background-color transparent
-    color $ui-dark-text-color
+    color $ui-dark-text-color
+    
+body[data-theme="solarized-dark"]
+  .tag
+    background-color $ui-solarized-dark-tag-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+
+  .tag-label
+    color $ui-solarized-dark-text-color
+
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-solarized-dark-text-color
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -166,4 +166,5 @@ body[data-theme="dark"]

 body[data-theme="solarized-dark"]
  .root, .root--folded
-    background-color $ui-dark-backgroundColor
+    background-color $ui-solarized-dark-backgroundColor
+    border-right 1px solid $ui-solarized-dark-borderColor
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -179,4 +179,8 @@ body[data-theme="dark"]
      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
    &:active, &:active:hover
      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
+      background-color $ui-dark-button--active-backgroundColor
+      
+
+
+
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -85,10 +85,14 @@ modalBackColor = white
    absolute top left bottom right
    background-color modalBackColor
    z-index modalZIndex + 1
+    
+
 body[data-theme="dark"]
  .ModalBase
    .modalBack
      background-color $ui-dark-backgroundColor
+  .sortableItemHelper
+    color: $ui-dark-text-color

 .CodeMirror
  font-family inherit !important
@@ -108,6 +112,11 @@ body[data-theme="dark"]
 .sortableItemHelper
  z-index modalZIndex + 5

-body[data-theme="dark"]
+body[data-theme="solarized-dark"]
+  .ModalBase
+    .modalBack
+      background-color $ui-solarized-dark-backgroundColor
  .sortableItemHelper
-    color: $ui-dark-text-color
+    color: $ui-solarized-dark-text-color
+
+
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -127,6 +127,12 @@ colorDarkControl()
  border-color $ui-dark-borderColor
  background-color $ui-dark-backgroundColor
  color $ui-dark-text-color
+  
+colorSolarizedDarkControl()
+  border none
+  background-color $ui-solarized-dark-button-backgroundColor
+  color $ui-solarized-dark-text-color
+

 body[data-theme="dark"]
  .root
@@ -154,3 +160,33 @@ body[data-theme="dark"]
  .group-section-control
    select, .group-section-control-input
      colorDarkControl()
+     
+      
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+
+  .group-header
+    color $ui-solarized-dark-text-color
+    border-color $ui-solarized-dark-borderColor 
+
+  .group-header2
+    color $ui-solarized-dark-text-color
+
+  .group-section-control-input
+    border-color $ui-solarized-dark-borderColor 
+
+  .group-control
+    border-color $ui-solarized-dark-borderColor 
+  .group-control-leftButton
+    colorDarkDefaultButton()
+    border-color $ui-solarized-dark-borderColor 
+  .group-control-rightButton
+    colorSolarizedDarkPrimaryButton()
+  .group-hint
+    colorSolarizedDarkControl()
+  .group-section-control
+    select, .group-section-control-input
+      colorSolarizedDarkControl()
+
+
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl
@@ -27,4 +27,10 @@ p

 body[data-theme="dark"]
  p
-    color $ui-dark-text-color
+    color $ui-dark-text-color
+    
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+  p
+    color $ui-solarized-dark-text-color
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -101,3 +101,28 @@ body[data-theme="dark"]

  .folderItem-right-dangerButton
    colorDarkDangerButton()
+
+
+
+body[data-theme="solarized-dark"]
+  .folderItem
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+
+  .folderItem-left-danger
+    color $danger-color
+
+  .folderItem-left-key
+    color $ui-dark-inactive-text-color
+
+  .folderItem-left-colorButton
+    colorSolarizedDarkPrimaryButton()
+
+  .folderItem-right-button
+    colorSolarizedDarkPrimaryButton()
+
+  .folderItem-right-confirmButton
+    colorSolarizedDarkPrimaryButton()
+
+  .folderItem-right-dangerButton
+    colorSolarizedDarkPrimaryButton()
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -60,3 +60,11 @@
 body[data-theme="dark"]
  .root
    color alpha($tab--dark-text-color, 80%)
+    
+
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+.list
+  a
+    color $ui-solarized-dark-active-color
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -86,3 +86,29 @@ body[data-theme="dark"]
    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
+
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -158,3 +158,44 @@ body[data-theme="dark"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
+    
+
+
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+
+  .folderList-item
+    border-bottom $ui-solarized-dark-borderColor
+
+  .folderList-empty
+    color $ui-solarized-dark-text-color
+
+  .list-empty
+    color $ui-solarized-dark-text-color
+  .list-control-addStorageButton
+    border-color $ui-solarized-dark-button-backgroundColor
+    background-color $ui-solarized-dark-button-backgroundColor
+    color $ui-solarized-dark-text-color
+
+  .addStorage-header
+    color $ui-solarized-dark-text-color
+    border-color $ui-solarized-dark-borderColor
+
+  .addStorage-body-section-name-input
+    border-color $$ui-solarized-dark-borderColor
+
+  .addStorage-body-section-type-description
+    color $ui-solarized-dark-text-color
+
+  .addStorage-body-section-path-button
+    colorPrimaryButton()
+  .addStorage-body-control
+    border-color $ui-solarized-dark-borderColor
+
+  .addStorage-body-control-createButton
+    colorDarkPrimaryButton()
+  .addStorage-body-control-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-solarized-dark-borderColor
+