feat: add the topAppBar.coloredInDark parameter

razonyang · Jul 28, 2022 · 88dbe85 · 88dbe85
1 parent 7597e67
commit 88dbe85
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 9 deletions.
diff --git a/assets/main/scss/_config.scss b/assets/main/scss/_config.scss
@@ -7,7 +7,10 @@ $font-sizes: (
     xl: {{ default "1.15rem" $params.fontSize.extraLarge }},
 );
 
+// Top App Bar
 $fixedHeader: {{ if $params.fixedHeader }}true{{ else }}false{{ end }};
+$colored-top-app-bar-in-dark: {{ default false $params.topAppBar.coloredInDark }};
+
 $fixedSidebar: {{ with $params.sidebar.fixed }}{{ . }}{{ else }}false{{ end }};
 $backgroundImageLight: '{{ with $params.backgroundImage }}{{ index . 0 }}{{ end }}';
 $backgroundImageDark: '{{ with $params.backgroundImage }}{{ if gt (len .) 1 }}{{ index . 1 }}{{ else }}{{ index . 0 }}{{ end }}{{ end }}';

diff --git a/assets/main/scss/_palettes.scss b/assets/main/scss/_palettes.scss
@@ -33,7 +33,7 @@ $palette-classes: 'btn', 'btn-outline';
   @if validate-palette($name) {
     $on-primary: color-contrast($color);
     $primary-secondary: shade-color($color, 20%);
-    $primary-tint: tint-color($color, 30%);
+    $primary-tint: tint-color($color, 20%);
     $theme-colors: map-merge($theme-colors, ('#{$name}-tint': $primary-tint));
     $on-primary-secondary: if(
       $on-primary == $color-contrast-light,

diff --git a/assets/main/scss/_top-app-bar.scss b/assets/main/scss/_top-app-bar.scss
@@ -54,16 +54,18 @@
   }
 }
 
-@include theme(dark) {
-  .top-app-bar {
-    background-color: var(--#{$prefix}surface-bg);
-    color: var(--#{$prefix}surface-color-secondary);
+@if not $colored-top-app-bar-in-dark {
+  @include theme(dark) {
+    .top-app-bar {
+      background-color: var(--#{$prefix}surface-bg);
+      color: var(--#{$prefix}surface-color-secondary);
 
-    --#{$prefix}form-control-bg: var(--#{$prefix}surface-bg);
+      --#{$prefix}form-control-bg: var(--#{$prefix}surface-bg);
 
-    .offcanvas-lg {
-      --#{$prefix}offcanvas-bg: var(--#{$prefix}surface-bg);
-      --#{$prefix}offcanvas-color: var(#{$prefix}surface-color-secondary);
+      .offcanvas-lg {
+        --#{$prefix}offcanvas-bg: var(--#{$prefix}surface-bg);
+        --#{$prefix}offcanvas-color: var(#{$prefix}surface-color-secondary);
+      }
     }
   }
 }
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -238,6 +238,7 @@ viewer = true # Image Viewer
 
 [topAppBar]
   # colorToggle = false # Disable the color toggle
+  # coloredInDark = true # Colored in dark mode
   [topAppBar.social]
     github = "razonyang/hugo-theme-bootstrap"
     patreon = "razonyang"

diff --git a/exampleSite/content/docs/configuration/site-params/index.md b/exampleSite/content/docs/configuration/site-params/index.md
@@ -85,6 +85,7 @@ The site parameters are located in `config/_default/params.toml` by default.
 | `topAppBar` | Object | - |
 | `topAppBar.social` | Object | - | [Social Links]({{< ref "/docs/widgets/social-links" >}}).
 | `topAppBar.colorToggle` | Boolean | `true` | Turn on/off the color/mode toggle.
+| `topAppBar.coloredInDark` | Boolean | `false` | Colored in dark mode.
 | **Webmaster Site Verification** 
 | `siteVerification` | Object | - |
 | `siteVerification.google` | String | - | Google

diff --git a/exampleSite/content/docs/configuration/site-params/index.zh-hans.md b/exampleSite/content/docs/configuration/site-params/index.zh-hans.md
@@ -87,6 +87,7 @@ authors = ["RazonYang"]
 | `topAppBar` | Object | - |
 | `topAppBar.social` | Object | - | [社交链接]({{< ref "/docs/widgets/social-links" >}})。
 | `topAppBar.colorToggle` | Boolean | `true` | 开启或禁用颜色/模式开关。
+| `topAppBar.coloredInDark` | Boolean | `false` | 在深色模式下着色。
 | **Webmaster Site Verification** 
 | `siteVerification` | Object | - |
 | `siteVerification.google` | String | - | Google

diff --git a/exampleSite/content/docs/configuration/site-params/index.zh-hant.md b/exampleSite/content/docs/configuration/site-params/index.zh-hant.md
@@ -87,6 +87,7 @@ authors = ["RazonYang"]
 | `topAppBar` | Object | - |
 | `topAppBar.social` | Object | - | [社交鏈接]({{< ref "/docs/widgets/social-links" >}})。
 | `topAppBar.colorToggle` | Boolean | `true` | 開啟或禁用顏色/模式開關。
+| `topAppBar.coloredInDark` | Boolean | `false` | 在深色模式下著色。
 | **Webmaster Site Verification** 
 | `siteVerification` | Object | - |
 | `siteVerification.google` | String | - | Google