Change default color and add white theme

2025-12-13 17:56:25 +00:00 · 2017-11-11 19:06:27 +09:00
parent 4a6c16df8d
commit bb46a9ba4c
7 changed files with 234 additions and 83 deletions
--- a/browser/components/NavToggleButton.styl
+++ b/browser/components/NavToggleButton.styl
@@ -10,6 +10,9 @@
  line-height 32px
  padding 0

+body[data-theme="white"]
+  navWhiteButtonColor()
+
 body[data-theme="dark"]
  .navToggle
    &:hover
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -9,6 +9,13 @@
  width 100%
  text-align left
  overflow ellipsis
+  &:hover
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color $ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor

 .counters
  float right
@@ -17,53 +24,17 @@
 .menu-button--active
  @extend .menu-button
  color #e74c3c
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #e74c3c
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #e74c3c
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()

 .menu-button-star--active
  @extend .menu-button
  color #F9BF3B
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #F9BF3B
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #F9BF3B
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()

 .menu-button-trash--active
  @extend .menu-button
  color #5D9E36
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #5D9E36
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #5D9E36
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()

 .menu-button-label
  margin-left 5px
@@ -94,6 +65,64 @@
    opacity 0
    font-size 13px

+body[data-theme="white"]
+  .menu-button
+    navWhiteButtonColor()
+
+  .counters
+    color $ui-inactive-text-color
+
+  .menu-button--active
+    @extend .menu-button
+    color #e74c3c
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-star--active
+    @extend .menu-button
+    color #F9BF3B
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-trash--active
+    @extend .menu-button
+    color #5D9E36
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+
 body[data-theme="dark"]
  .menu-button
    &:active
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -17,20 +17,20 @@
  &:first-child
    margin-top 0
  &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
    transition background-color 0.15s
  &:active
-    color $ui-text-color
-    background-color $ui-button--active-backgroundColor
+    color $$ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor

 .folderList-item--active
  @extend .folderList-item
-  color $ui-text-color
-  background-color $ui-button--active-backgroundColor
+  color $ui-button-default-color
+  background-color $ui-button-default--active-backgroundColor
  &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 50%)

 .folderList-item-name
  display block
@@ -71,6 +71,24 @@
  @extend .folderList-item-name
  padding-left 12px

+body[data-theme="white"]
+  .folderList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      transition background-color 0.15s
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 50%)

 body[data-theme="dark"]
  .folderList-item
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -1,7 +1,7 @@
 .root
  absolute top left bottom
  width $sideNav-width
-  background-color #f9f9f9
+  background-color #2E3235
  user-select none
  color $ui-text-color
  height: 100vh
@@ -11,18 +11,19 @@
 .top
  padding-bottom 15px

-.top-menu
+.top-menu-preference
  navButtonColor()
  position absolute
  top 22px
-  right 5px
-  height 23px
+  right 10px
  width 2em
+  background-color transparent
  &:hover
-    color $ui-text-color
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
  &:active, &:active:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-button-default--active-backgroundColor
+    background-color transparent

 .switch-buttons
  background-color transparent
@@ -37,11 +38,11 @@
  background-color transparent
  transition 0.2s
  &:hover
-    color alpha(#0B99F1, 60%)
+    color alpha(#239F86, 60%)

 .active-button
  @extend .non-active-button
-  color #0B99F1
+  color $ui-button-default--active-backgroundColor

 .top-menu-label
  margin-left 5px
@@ -88,7 +89,6 @@
    opacity 0
    margin-left 0
    overflow hidden
-    background-color $ui-tooltip-backgroundColor
    z-index 10
    color white
    line-height 30px
@@ -97,6 +97,35 @@
    pointer-events none
    font-size 13px

+body[data-theme="white"]
+  .root, .root--folded
+    background-color #f9f9f9
+    color $ui-text-color
+
+  .top-menu-preference
+    navWhiteButtonColor()
+    &:hover
+      color #0B99F1
+    &:active, &:active:hover
+      color #0B99F1
+
+  .non-active-button
+    color $ui-inactive-text-color
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
+      color $ui-text-color
+
+  .non-active-button
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .active-button
+    @extend .non-active-button
+    color #0B99F1
+
 body[data-theme="dark"]
  .root, .root--folded
    border-color $ui-dark-borderColor
@@ -106,7 +135,7 @@ body[data-theme="dark"]
  .top
    border-color $ui-dark-borderColor

-  .top-menu
+  .top-menu-preference
    navDarkButtonColor()
    &:active
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -12,20 +12,12 @@

 .header--active
  margin-bottom 5px
-  background-color $ui-button--active-backgroundColor
+  background-color $ui-button-default--active-backgroundColor
  transition color background-color  0.15s
-
-.header--active
  .header-toggleButton
-    color $ui-text-color
-
-.header--active
  .header-info
-    color $ui-text-color
-
-.header--active
  .header-addFolderButton
-    color $ui-text-color
+    color $ui-button-default-color

 .header-toggleButton
  navButtonColor()
@@ -38,7 +30,7 @@
  border-radius 50%
  &:hover
    transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button-default--hover-backgroundColor, 40%)
    color $ui-text-color

 .header-info
@@ -54,7 +46,14 @@
  border none
  overflow ellipsis
  text-align left
-  background-color alpha($ui-button--active-backgroundColor, 20%)
+  background-color transparent
+  &:hover
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color $ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor

 .header-info-path
  font-size 10px
@@ -72,7 +71,7 @@
  border-radius 50%
  &:hover
    transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button-default--hover-backgroundColor, 40%)
    color $ui-text-color

 .root--folded
@@ -102,6 +101,33 @@
    font-size 10px
    margin 0 5px

+body[data-theme="white"]
+  .header--active
+    background-color $ui-button--active-backgroundColor
+    transition color background-color  0.15s
+    .header-toggleButton
+      color $ui-text-color
+    .header-info
+      color $ui-text-color
+    .header-addFolderButton
+      color $ui-text-color
+
+  .header-toggleButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+  .header-info
+    navWhiteButtonColor()
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+
+  .header-addFolderButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
 body[data-theme="dark"]
  .header--active
    background-color $ui-dark-button--active-backgroundColor
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -165,7 +165,7 @@ class SideNav extends React.Component {
            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
          </div>
          <div>
-            <button styleName='top-menu'
+            <button styleName='top-menu-preference'
              onClick={(e) => this.handleMenuButtonClick(e)}
            >
              <i className='fa fa-wrench fa-fw' />
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -21,12 +21,12 @@ $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
 $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)

-// UI Button
-$ui-button-color = #939395
-$ui-button--hover-backgroundColor = #D9D9D9
-$ui-button--active-color = white
-$ui-button--active-backgroundColor = #D9D9D9
-$ui-button--focus-borderColor = lighten(#369DCD, 25%)
+// UI Default Button
+$ui-button-default-color = #FBFBFB
+$ui-button-default--hover-backgroundColor = #2B8976
+$ui-button-default--active-color = white
+$ui-button-default--active-backgroundColor = #2B8976
+$ui-button-default--focus-borderColor = lighten(#369DCD, 25%)

 // UI Tooltip
 $ui-tooltip-text-color = white
@@ -119,6 +119,26 @@ colorDangerButton()
  &:active:hover
    background-color $danger-button-background--active

+/**
+* SideNav
+*/
+SideNavFilter()
+  background-color $ui-button-default--active-backgroundColor
+  .counters
+    color $ui-button-default-color
+  .menu-button-label
+    color $ui-button-default-color
+  &:hover
+    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
+    color $ui-button-default-color
+    .menu-button-label
+      color $ui-button-default-color
+  &:active, &:active:hover
+    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
+    color $ui-button-default-color
+    .menu-button-label
+      color $ui-button-default-color
+
 /**
 * Nav
 */
@@ -129,13 +149,14 @@ navButtonColor()
  background-color transparent
  transition 0.15s
  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
    transition  0.15s
-    color $ui-text-color
+    color $ui-button-default-color
  &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-text-color
+    background-color #1EC38B
+    color $ui-button-default-color
    transition 0.15s
+
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -175,7 +196,32 @@ topBarButtonLight()
    .control-lockButton-tooltip
      opacity 1

-// Dark theme
+// White theme
+/**
+* Nav
+*/
+navWhiteButtonColor()
+  border none
+  color $ui-button-color
+  background-color transparent
+  transition 0.15s
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition  0.15s
+    color $ui-text-color
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    transition 0.15s
+
+// UI Button
+$ui-button-color = #939395
+$ui-button--hover-backgroundColor = #D9D9D9
+$ui-button--active-color = white
+$ui-button--active-backgroundColor = #D9D9D9
+$ui-button--focus-borderColor = lighten(#369DCD, 25%)
+
+/******* Dark theme ********/
 $ui-dark-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
 $ui-dark-backgroundColor = #1E2124