adding Nord theme and streamlining UI theming

2025-12-13 09:46:22 +00:00 · 2019-02-08 00:50:47 +01:00
parent 8b8d915ab7
commit 1cdac943ba
45 changed files with 1192 additions and 2306 deletions
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -24,23 +24,16 @@ body[data-theme="dark"]
  .empty-message
    color $ui-dark-inactive-text-color

-body[data-theme="solarized-dark"]
-  .root
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
-    border-left 1px solid $ui-solarized-dark-borderColor
-  .empty-message
-    color $ui-solarized-dark-text-color
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+      border-left 1px solid get-theme-var(theme, 'borderColor')
+    .empty-message
+      color get-theme-var(theme, '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
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-body[data-theme="dracula"]
-  .root
-    background-color $ui-dracula-noteDetail-backgroundColor
-    border-left 1px solid $ui-dracula-borderColor
-  .empty-message
-    color $ui-dracula-text-color
+for theme in $themes
+  apply-theme(theme)
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -134,54 +134,37 @@ body[data-theme="dark"]
  .search-optionList-item-name-surfix
    color $ui-dark-inactive-text-color

-body[data-theme="monokai"]
- .root
-    color $ui-dark-text-color
-    &:hover
-      color white
-      background-color $ui-monokai-button--hover-backgroundColor
-      border-color $ui-monokai-borderColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      &:hover
+        background-color get-theme-var(theme, 'button--hover-backgroundColor')
+        border-color get-theme-var(theme, 'borderColor')

-  .search-optionList
-    color white
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-button-backgroundColor
+    .search-input
+      color get-theme-var(theme, 'text-color')
+      background-color transparent
+      border-color get-theme-var(theme, 'borderColor')

-  .search-optionList-item
-    &:hover
-      background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
+    .search-optionList
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'button-backgroundColor')

-  .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
+    .search-optionList-item
+      &:hover
+        background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%)

-body[data-theme="dracula"]
- .root
-    color $ui-dracula-text-color
-    &:hover
-      color #f8f8f2
-      background-color $ui-dark-button--hover-backgroundColor
-      border-color $ui-dracula-borderColor
+    .search-optionList-item--active
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      color get-theme-var(theme, 'button--active-color')
+      &:hover
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
+        color get-theme-var(theme, 'button--active-color')
+    .search-optionList-item-name-surfix
+      color get-theme-var(theme, 'inactive-text-color')

-  .search-optionList
-    color #f8f8f2
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-button-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-  .search-optionList-item
-    &:hover
-      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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/main/Detail/FullscreenButton.styl
+++ b/browser/main/Detail/FullscreenButton.styl
@@ -1,26 +1,26 @@
-.control-fullScreenButton
-  top 80px
-  topBarButtonRight()
-  &:hover .tooltip
-    opacity 1
-
-.tooltip
-  tooltip()
-  position absolute
-  pointer-events none
-  top 50px
-  right 70px
-  z-index 200
-  padding 5px
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
-
-.tooltip:lang(ja)
-  @extend .tooltip
-  right 35px
-
-body[data-theme="dark"]
-  .control-fullScreenButton
+.control-fullScreenButton
+  top 80px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.tooltip:lang(ja)
+  @extend .tooltip
+  right 35px
+
+body[data-theme="dark"]
+  .control-fullScreenButton
    topBarButtonDark()
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -138,162 +138,49 @@
 .export--unable
  cursor not-allowed

-body[data-theme="dark"]
-  .control-infoButton-panel
-    background-color $ui-dark-noteList-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .control-infoButton-panel
+      background-color get-theme-var(theme, 'noteList-backgroundColor')

-  .control-infoButton-panel-trash
-    background-color $ui-dark-noteList-backgroundColor
+    .control-infoButton-panel-trash
+      background-color get-theme-var(theme, 'noteList-backgroundColor')

-  .modification-date
-    color $ui-dark-text-color
+    .modification-date
+      color get-theme-var(theme, 'text-color')

-  .modification-date-desc
-    color $ui-inactive-text-color
+    .modification-date-desc
+      color $ui-inactive-text-color

-  .infoPanel-defaul-count
-    color $ui-dark-text-color
+    .infoPanel-defaul-count
+      color get-theme-var(theme, 'text-color')

-  .infoPanel-sub-count
-    color $ui-inactive-text-color
+    .infoPanel-sub-count
+      color $ui-inactive-text-color

-  .infoPanel-default
-    color $ui-dark-text-color
+    .infoPanel-default
+      color get-theme-var(theme, 'text-color')

-  .infoPanel-sub
-    color $ui-inactive-text-color
+    .infoPanel-sub
+      color $ui-inactive-text-color

-  .infoPanel-noteLink
-    background-color alpha($ui-dark-borderColor, 60%)
-    color $ui-dark-text-color
+    .infoPanel-noteLink
+      background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
+      color get-theme-var(theme, 'text-color')

-  [id=export-wrap]
-    button
-      color $ui-dark-inactive-text-color
-      &:hover
-        background-color alpha($ui-dark-borderColor, 20%)
-        color $ui-dark-text-color
-    p
-      color $ui-dark-inactive-text-color
-      &:hover
-        color $ui-dark-text-color
+    [id=export-wrap]
+      button
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
+          color get-theme-var(theme, 'text-color')
+      p
+        color $ui-dark-inactive-text-color
+        &:hover
+          color get-theme-var(theme, 'text-color')

-body[data-theme="solarized-dark"]
-  .control-infoButton-panel
-    background-color $ui-solarized-dark-noteList-backgroundColor
+for theme in 'dark' 'solarized-dark' 'dracula'
+  apply-theme(theme)

-  .control-infoButton-panel-trash
-    background-color $ui-solarized-ark-noteList-backgroundColor
-
-  .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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -66,18 +66,14 @@ body[data-theme="dark"]
  .control-fullScreenButton
    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"]
-  .root
-    border-left 1px solid $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-body[data-theme="monokai"]
-  .root
-    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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -94,17 +94,14 @@ body[data-theme="dark"]
  .undo-button
    topBarButtonDark()

-body[data-theme="solarized-dark"]
-  .info
-    border-color $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .info
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')

-body[data-theme="monokai"]
-  .info
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-body[data-theme="dracula"]
-  .info
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteDetail-backgroundColor
+for theme in $themes
+  apply-theme(theme)
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -156,78 +156,35 @@ body[data-theme="dark"]
  .control-fullScreenButton
    topBarButtonDark()

-body[data-theme="solarized-dark"]
-  .root
-    border-left 1px solid $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+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
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    .body
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')

-  .body .description textarea
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
-    color $ui-solarized-dark-text-color
-    border 1px solid $ui-solarized-dark-borderColor
+    .body .description textarea
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+      color get-theme-var(theme, 'text-color')
+      border 1px solid get-theme-var(theme, 'borderColor')

-  .tabList .tabButton
-    border-color $ui-solarized-dark-borderColor
+    .tabList .tabButton
+      border-color get-theme-var(theme, 'borderColor')

-  .tabButton
-    &:hover
-      color $ui-solarized-dark-button--active-color
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
-      transition 0.15s
-    
-  .tabList
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
-    color $ui-solarized-dark-text-color
+    .tabButton
+      &:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+        transition 0.15s

-body[data-theme="monokai"]
-  .root
-    border-left 1px solid $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
+    .tabList
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+      color get-theme-var(theme, 'text-color')

-  .body
-    background-color $ui-monokai-noteDetail-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-  .body .description textarea
-    background-color $ui-monokai-noteDetail-backgroundColor
-    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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -54,35 +54,20 @@ body[data-theme="dark"]
  .tag-label
    color $ui-dark-text-color

-body[data-theme="solarized-dark"]
-  .tag
-    background-color $ui-solarized-dark-tag-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .tag
+      background-color get-theme-var(theme, 'tag-backgroundColor')

-  .tag-removeButton
-    border-color $ui-button--focus-borderColor
-    background-color transparent
+    .tag-removeButton
+      border-color $ui-button--focus-borderColor
+      background-color transparent

-  .tag-label
-    color $ui-solarized-dark-text-color
+    .tag-label
+      color get-theme-var(theme, 'text-color')

-body[data-theme="monokai"]
-  .tag
-    background-color $ui-monokai-tag-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-  .tag-removeButton
-    border-color $ui-button--focus-borderColor
-    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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -1,77 +1,77 @@
-.control-toggleModeButton
-  height 25px
-  border-radius 50px
-  background-color #F4F4F4
-  width 52px
-  display flex
-  align-items center
-  position: relative
-  top 2px
-  .active
-    background-color #1EC38B
-    width 33px
-    height 24px
-    box-shadow 2px 0px 7px #eee
-    z-index 1
-
-  div
-    width 40px
-    height 100%
-    border-radius 50%
-    display flex
-    align-items center
-    justify-content center
-    cursor pointer
-
-  &:hover .tooltip
-    opacity 1
-
-.tooltip
-  tooltip()
-  position absolute
-  pointer-events none
-  top 33px
-  left -10px
-  z-index 200
-  width 80px
-  padding 5px
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
-
-.tooltip:lang(ja)
-  @extend .tooltip
-  left -8px
-  width 70px
-
-body[data-theme="dark"]
-  .control-fullScreenButton
-    topBarButtonDark()
-
-  .control-toggleModeButton
-      background-color #3A404C
-    .active
-      background-color #1EC38B
-      box-shadow 2px 0px 7px #444444
-
-body[data-theme="solarized-dark"]
-  .control-toggleModeButton
-      background-color #002B36
-    .active
-      background-color #1EC38B
-      box-shadow 2px 0px 7px #222222
-
-body[data-theme="monokai"]
-  .control-toggleModeButton
-      background-color #373831
-    .active
-      background-color #f92672
-      box-shadow 2px 0px 7px #222222
-
-body[data-theme="dracula"]
-  .control-toggleModeButton
-      background-color #44475a
-    .active
-      background-color #bd93f9
-      box-shadow 2px 0px 7px #222222
+.control-toggleModeButton
+  height 25px
+  border-radius 50px
+  background-color #F4F4F4
+  width 52px
+  display flex
+  align-items center
+  position: relative
+  top 2px
+  .active
+    background-color #1EC38B
+    width 33px
+    height 24px
+    box-shadow 2px 0px 7px #eee
+    z-index 1
+
+  div
+    width 40px
+    height 100%
+    border-radius 50%
+    display flex
+    align-items center
+    justify-content center
+    cursor pointer
+
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 33px
+  left -10px
+  z-index 200
+  width 80px
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.tooltip:lang(ja)
+  @extend .tooltip
+  left -8px
+  width 70px
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()
+
+  .control-toggleModeButton
+      background-color #3A404C
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #444444
+
+body[data-theme="solarized-dark"]
+  .control-toggleModeButton
+      background-color #002B36
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #222222
+
+apply-theme(theme)
+  body[data-theme={theme}]
+    .control-toggleModeButton
+      background-color get-theme-var(theme, 'borderColor')
+      .active
+        background-color get-theme-var(theme, 'active-color')
+        box-shadow 2px 0px 7px #222222
+
+for theme in 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)