Merge pull request #18 from tolking/dev

feat: add variables (close #17 )

Author: tolking

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 [README](README.md) | [CHANGELOG](CHANGELOG.md)
 
+## 1.0.9
+
+- fix styles
+
+## 1.0.8
+
+- add variables
+
 ## 1.0.7
 
 - uniform code style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-default-prefers-color-scheme",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "index.js",
   "description": "add prefers-color-scheme for vuepress default theme",
   "author": "tolking <qw13131wang@gmail.com>",

styles/index.styl

@@ -5,6 +5,10 @@
   --textColor $textColor
   --borderColor $borderColor
   --codeBgColor $codeBgColor
+  --arrowBgColor $arrowBgColor
+  --badgeTipColor $badgeTipColor
+  --badgeWarningColor $badgeWarningColor
+  --badgeErrorColor $badgeErrorColor
   --bgColor $bgColor
   --kbdBgColor $kbdBgColor
   --blockquoteTextColor $blockquoteTextColor
@@ -15,6 +19,7 @@
   --highlightedBgColor $highlightedBgColor
   --languageTextColor $languageTextColor
   --lineNumbersColor $lineNumbersColor
+  --tipColor $tipColor
   --tipBgColor $tipBgColor
   --warningColor $warningColor
   --warningBgColor $warningBgColor
@@ -32,32 +37,37 @@
   --darken10BgColor darken($bgColor, 5%)
   --darken10BorderColor darken($borderColor, 10%)
 
-  @media (prefers-color-scheme: light)
+  @media (prefers-color-scheme light)
     --codeBgColor $codeBgLightColor
     --preTextColor $preTextLightColor
     --highlightedBgColor $highlightedBgLightColor
     --languageTextColor $languageTextLightColor
     --lineNumbersColor $lineNumbersLightColor
     --lighten20TextColor lighten($textColor, 20%)
 
-  @media (prefers-color-scheme: dark)
+  @media (prefers-color-scheme dark)
     --accentColor $accentDarkColor
     --textColor $textDarkColor
     --borderColor $borderDarkColor
+    --arrowBgColor $arrowBgDarkColor
+    --badgeTipColor $badgeTipDarkColor
+    --badgeWarningColor $badgeWarningDarkColor
+    --badgeErrorColor $badgeErrorDarkColor
     --bgColor $bgDarkColor
     --kbdBgColor $kbdBgDarkColor
     --blockquoteTextColor $blockquoteTextDarkColor
     --blockquoteBorderColor $blockquoteBorderDarkColor
     --tableBorderColor $tableBorderDarkColor
     --tableStripeBgColor $tableStripeBgDarkColor
+    --tipColor $tipDarkColor
     --tipBgColor $tipBgDarkColor
     --warningColor $warningDarkColor
     --warningBgColor $warningBgDarkColor
     --dangerColor $dangerDarkColor
     --dangerBgColor $dangerBgDarkColor
     --miniCodeBgColor $miniCodeBgDarkColor
     --searchBorderColor $searchBorderDarkColor
-    --lightenAccentColor lighten($accentDarkColor, 10%)
+    --lighten10AccentColor lighten($accentDarkColor, 10%)
     --lighten10TextColor lighten($textDarkColor, 10%)
     --lighten20TextColor lighten($textDarkColor, 20%)
     --lighten25TextColor lighten($textDarkColor, 25%)
@@ -161,25 +171,52 @@ div[class*='language-'].line-numbers-mode .line-numbers-wrapper
 
 // custom-block
 .custom-block.tip
-.custom-block.details
+  border-color var(--badgeTipColor)
   background-color var(--tipBgColor)
 
+  .custom-block-title
+  a
+    color var(--tipColor)
+
 .custom-block.warning
+  border-color var(--badgeWarningColor)
   background-color var(--warningBgColor)
 
+  .custom-block-title
   a
     color var(--warningColor)
 
 .custom-block.danger
+  border-color var(--badgeErrorColor)
   background-color var(--dangerBgColor)
 
+  .custom-block-title
   a
     color var(--dangerColor)
 
 .custom-block.warning
 .custom-block.danger
   color var(--textColor)
 
+.custom-block.details
+  background-color var(--tipBgColor)
+
+// badge
+.badge
+  background-color var(--badgeTipColor) !important
+
+  &.tip
+  &.green
+    background-color var(--badgeTipColor) !important
+
+  &.error
+    background-color var(--badgeErrorColor) !important
+
+  &.warning
+  &.warn
+  &.yellow
+    background-color var(--badgeWarningColor) !important
+
 // pwa
 .global-ui
   .sw-update-popup
@@ -196,7 +233,7 @@ div[class*='language-'].line-numbers-mode .line-numbers-wrapper
         background-color var(--lighten10AccentColor) !important
 
 // scroll bar
-@media (min-width: $MQMobile)
+@media (min-width $MQMobile)
   ::-webkit-scrollbar
     max-width 6px
     max-height 12px

styles/palette.styl

@@ -12,6 +12,18 @@ $borderDarkColor ?= #4e4e4e
 $codeBgColor ?= #282c34
 $codeBgLightColor ?= #f8f8f8
 
+$arrowBgColor ?= #ccc
+$arrowBgDarkColor ?= $arrowBgColor
+
+$badgeTipColor ?= #42b983
+$badgeTipDarkColor ?= $badgeTipColor
+
+$badgeWarningColor ?= darken(#ffe564, 35%)
+$badgeWarningDarkColor ?= $badgeWarningColor
+
+$badgeErrorColor ?= #DA5961
+$badgeErrorDarkColor ?= $badgeErrorColor
+
 $preTextColor ?= #fff
 $preTextLightColor ?= #525252
 
@@ -45,6 +57,9 @@ $tableBorderDarkColor ?= $borderDarkColor
 $tableStripeBgColor ?= #f6f8fa
 $tableStripeBgDarkColor ?= #444
 
+$tipColor ?= $textColor
+$tipDarkColor ?= $textDarkColor
+
 $tipBgColor ?= #f3f5f7
 $tipBgDarkColor ?= #3e3b3b