Merge pull request #79 from schettino72/dark-mode

Dark mode
schettino72 · Mar 22, 2024 · e61aac6 · e61aac6
2 parents aa544af + d358210
commit e61aac6
Show file tree

Hide file tree

Showing 27 changed files with 591 additions and 105 deletions.
diff --git a/CHANGES b/CHANGES
@@ -2,6 +2,12 @@
 Changes
 =======
 
+1.0.0 (*XXXX-XX-XX*)
+====================
+
+- GH-54 Add dark mode feature from [Mister-Hope's vuepress PR]("https://github.com/vuejs/vuepress/pull/2301")
+
+
 0.9.0 (*2024-03-XX*)
 ====================
 

diff --git a/ui/src/components/NavLinks.vue b/ui/src/components/NavLinks.vue
@@ -144,7 +144,7 @@ export default {
 @media (min-width: $MQMobile)
   .nav-links a
     &:hover, &.router-link-active
-      color $textColor
+      color var(--text-color)
   .nav-item > a:not(.external)
     &:hover, &.router-link-active
       margin-bottom -2px

diff --git a/ui/src/components/Navbar.vue b/ui/src/components/Navbar.vue
@@ -23,17 +23,19 @@
     <!--   /> -->
     <!--   <SearchBox v-else-if="$site.themeConfig.search !== false"/> -->
     <!-- </div> -->
+  <DarkmodeSwitch/>
   </header>
 </template>
 
 <script>
 import SidebarButton from '../vuepress/components/SidebarButton.vue'
+import DarkmodeSwitch from '../vuepress/global-components/DarkmodeSwitch.vue'
 // import AlgoliaSearchBox from '@AlgoliaSearchBox'
 // import SearchBox from './SearchBox.vue'
 // import NavLinks from './NavLinks.vue'
 
 export default {
-  components: { SidebarButton }, // NavLinks, SearchBox, AlgoliaSearchBox },
+  components: { SidebarButton, DarkmodeSwitch }, // NavLinks, SearchBox, AlgoliaSearchBox },
 
 //   computed: {
 //     algolia () {
@@ -65,7 +67,7 @@ export default {
   .site-name
     font-size 1.3rem
     font-weight 600
-    color $textColor
+    color var(--text-color)
     position relative
   .links
     font-size 0.9rem

diff --git a/ui/src/components/Page.vue b/ui/src/components/Page.vue
@@ -213,14 +213,14 @@ function find (page, items, offset) {
   .edit-link
     display inline-block
     a
-      color lighten($textColor, 25%)
+      color var(--text-color, $textColor)
       margin-right 0.25rem
   .last-updated
     float right
     font-size 0.9em
     .prefix
       font-weight 500
-      color lighten($textColor, 25%)
+      color var(--text-color, $textColor)
     .time
       font-weight 400
       color #aaa

diff --git a/ui/src/components/Sidebar.vue b/ui/src/components/Sidebar.vue
@@ -174,7 +174,7 @@ function resolveOpenGroupIndex (route, items) {
   .toctree-l1 a, .toctree-l2 a
     font-weight 400
     display inline-block
-    color $textColor
+    color var(--text-color)
     line-height 1.4
     width: 100%
     box-sizing: border-box

diff --git a/ui/src/sphinx-theme.styl b/ui/src/sphinx-theme.styl
@@ -192,15 +192,15 @@ pre, div[class*="highlight-"] {
     .custom-block-title
       color darken(#ffe564, 50%)
     a
-      color $textColor
+      color var(--text-color)
   &.danger, &.error
     background-color #ffe6e6
     border-color darken(red, 20%)
     color darken(red, 70%)
     .custom-block-title
       color darken(red, 40%)
     a
-      color $textColor
+      color var(--text-color)
 
 
 .line-block
@@ -237,7 +237,7 @@ div.topic
   border: 1px solid #ccc;
   padding: 7px;
   margin: 10px 0 10px 0;
-  background-color: #f7f7f7;
+  background-color: var(--bg-color);
 p.topic-title
   font-size: 1.1em;
   font-weight: bold;

diff --git a/ui/src/vuepress/components/AlgoliaSearchBox.vue b/ui/src/vuepress/components/AlgoliaSearchBox.vue
@@ -53,15 +53,13 @@ export default {
           {
             inputSelector: '#algolia-search-input',
             // #697 Make docsearch work well at i18n mode.
-            algoliaOptions: {
-              ...algoliaOptions,
-              facetFilters: [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
-            },
+            algoliaOptions: Object.assign({
+              'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
+            }, algoliaOptions),
             handleSelected: (input, event, suggestion) => {
               const { pathname, hash } = new URL(suggestion.url)
               const routepath = pathname.replace(this.$site.base, '/')
-              const _hash = decodeURIComponent(hash)
-              this.$router.push(`${routepath}${_hash}`)
+              this.$router.push(`${routepath}${hash}`)
             }
           }
         ))
@@ -83,32 +81,35 @@ export default {
   .algolia-autocomplete
     line-height normal
     .ds-dropdown-menu
-      background-color #fff
-      border 1px solid #999
+      background-color var(--background-color)
+      border 1px solid var(--light-grey)
       border-radius 4px
       font-size 16px
       margin 6px 0 0
       padding 4px
       text-align left
       &:before
-        border-color #999
+        border-color var(--light-grey)
       [class*=ds-dataset-]
+        background var(--background-color)
         border none
         padding 0
       .ds-suggestions
         margin-top 0
       .ds-suggestion
-        border-bottom 1px solid $borderColor
+        border-bottom 1px solid var(--border-color)
     .algolia-docsearch-suggestion--highlight
-      color #2c815b
+      color $accentColor
     .algolia-docsearch-suggestion
-      border-color $borderColor
       padding 0
+      color var(--text-color)
+      background var(--background-color)
+      border-color var(--border-color)
       .algolia-docsearch-suggestion--category-header
         padding 5px 10px
         margin-top 0
         background $accentColor
-        color #fff
+        color var(--white)
         font-weight 600
         .algolia-docsearch-suggestion--highlight
           background rgba(255, 255, 255, 0.6)
@@ -117,21 +118,22 @@ export default {
       .algolia-docsearch-suggestion--title
         font-weight 600
         margin-bottom 0
-        color $textColor
+        color var(--text-color)
       .algolia-docsearch-suggestion--subcategory-column
         vertical-align top
         padding 5px 7px 5px 5px
-        border-color $borderColor
-        background #f1f3f5
+        color var(--text-color)
+        background var(--background-color)
+        border-color var(--border-color)
         &:after
           display none
       .algolia-docsearch-suggestion--subcategory-column-text
         color #555
     .algolia-docsearch-footer
-      border-color $borderColor
+      border-color var(--border-color)
     .ds-cursor .algolia-docsearch-suggestion--content
-      background-color #e7edf3 !important
-      color $textColor
+      background-color var(--grey3)
+      color var(--text-color)
 
 @media (min-width: $MQMobile)
   .algolia-search-wrapper
@@ -168,5 +170,4 @@ export default {
       width 5px
       margin -3px 3px 0
       vertical-align middle
-
-</style>
+</style>
diff --git a/ui/src/vuepress/components/DropdownLink.vue b/ui/src/vuepress/components/DropdownLink.vue
@@ -145,7 +145,7 @@ export default {
     background transparent
     border none
     font-weight 500
-    color $textColor
+    color var(--text-color)
     &:hover
       border-color transparent
     .arrow

diff --git a/ui/src/vuepress/components/Home.vue b/ui/src/vuepress/components/Home.vue
@@ -137,12 +137,12 @@ export default {
       padding-bottom 0
       color lighten($textColor, 10%)
     p
-      color lighten($textColor, 25%)
+      color var(--text-color, $textColor)
   .footer
     padding 2.5rem
     border-top 1px solid $borderColor
     text-align center
-    color lighten($textColor, 25%)
+    color var(--text-color, $textColor)
 
 @media (max-width: $MQMobile)
   .home

diff --git a/ui/src/vuepress/components/NavLinks.vue b/ui/src/vuepress/components/NavLinks.vue
@@ -148,7 +148,7 @@ export default {
 @media (min-width: $MQMobile)
   .nav-links a
     &:hover, &.router-link-active
-      color $textColor
+      color var(--text-color)
   .nav-item > a:not(.external)
     &:hover, &.router-link-active
       margin-bottom -2px

diff --git a/ui/src/vuepress/components/Navbar.vue b/ui/src/vuepress/components/Navbar.vue
@@ -109,7 +109,7 @@ $navbar-horizontal-padding = 1.5rem
   .site-name
     font-size 1.3rem
     font-weight 600
-    color $textColor
+    color var(--text-color)
     position relative
   .links
     padding-left 1.5rem

diff --git a/ui/src/vuepress/components/PageEdit.vue b/ui/src/vuepress/components/PageEdit.vue
@@ -131,14 +131,14 @@ export default {
   .edit-link
     display inline-block
     a
-      color lighten($textColor, 25%)
+      color var(--text-color, $textColor)
       margin-right 0.25rem
   .last-updated
     float right
     font-size 0.9em
     .prefix
       font-weight 500
-      color lighten($textColor, 25%)
+      color var(--text-color, $textColor)
     .time
       font-weight 400
       color #767676

diff --git a/ui/src/vuepress/components/SidebarGroup.vue b/ui/src/vuepress/components/SidebarGroup.vue
@@ -109,7 +109,7 @@ export default {
       border-left none
 
 .sidebar-heading
-  color $textColor
+  color var(--text-color)
   transition color .15s ease
   cursor pointer
   font-size 1.1em

diff --git a/ui/src/vuepress/components/SidebarLink.vue b/ui/src/vuepress/components/SidebarLink.vue
@@ -110,7 +110,7 @@ a.sidebar-link
   font-size 1em
   font-weight 400
   display inline-block
-  color $textColor
+  color var(--text-color)
   border-left 0.25rem solid transparent
   padding 0.35rem 1rem 0.35rem 1.25rem
   line-height 1.4