Improve the color of prompts

_sass/addon/commons.scss

@@ -3,35 +3,29 @@
 */
 @import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
 
-@mixin mode-toggle($dark-mode: false) {
+html {
-  @if $dark-mode {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    [data-mode=light] {
+      @include light-scheme;
+    }
+
+    &[data-mode=dark] {
       @include dark-scheme;
-  } @else {
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode=dark] {
+      @include dark-scheme;
+    }
+
+    &[data-mode=light] {
       @include light-scheme;
     }
   }
 
-html:not([data-mode]),
-html[data-mode=light] {
-  @include mode-toggle();
-}
-
-html[data-mode=dark] {
-  @include mode-toggle(true);
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([data-mode]),
-  html[data-mode=dark] {
-    @include mode-toggle(true);
-  }
-
-  html[data-mode=light] {
-    @include mode-toggle();
-  }
-}
-
-:root {
   font-size: 16px;
 }
 
@@ -109,10 +103,11 @@ blockquote {
     display: flex;
     border-left: 0;
     border-radius: 6px;
-    padding: 0.75rem 1rem;
+    padding: 0.75rem 1.2rem;
+    color: var(--prompt-text-color);
 
     &::before {
-      margin-right: 0.8rem;
+      margin-right: 1rem;
       font-family: "Font Awesome 5 Free";
       text-align: center;
       width: 1.25rem;

_sass/addon/module.scss

@@ -146,7 +146,6 @@
 @mixin prompt($type, $fw-icon, $icon-weight: 900) {
   &.prompt-#{$type} {
     background-color: var(--prompt-#{$type}-bg);
-    color: var(--prompt-text-color);
 
     &::before {
       content: $fw-icon;

_sass/addon/syntax.scss

@@ -5,25 +5,29 @@
 @import "colors/light-syntax";
 @import "colors/dark-syntax";
 
-html:not([data-mode]),
+html {
-html[data-mode=light] {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    [data-mode=light] {
       @include light-syntax;
     }
 
-html[data-mode=dark] {
+    &[data-mode=dark] {
       @include dark-syntax;
     }
+  }
 
   @media (prefers-color-scheme: dark) {
-  html:not([data-mode]),
+    &:not([data-mode]),
-  html[data-mode=dark] {
+    &[data-mode=dark] {
       @include dark-syntax;
     }
 
-  html[data-mode=light] {
+    &[data-mode=light] {
       @include light-syntax;
     }
   }
+}
 
 /* -- Codes Snippet -- */
 
@@ -110,11 +114,6 @@ code {
     background-color: var(--inline-code-bg);
   }
 
-  [class^="prompt-"] & {
-    background-color: var(--prompt-code-bg);
-    color: var(--prompt-code-text-color);
-  }
-
   &.filepath {
     background-color: inherit;
     color: var(--filepath-text-color);

_sass/colors/dark-syntax.scss

@@ -80,10 +80,6 @@
   --clipboard-checked-color: #2bcc2b;
   --filepath-text-color: #bdbdbd;
 
-  /* the code of prompts */
-  --prompt-code-bg: rgb(38 38 38 / 47%);
-  --prompt-code-text-color: var(--highlighter-rouge-color);
-
   .highlight {
     .gp { color: #818c96; }
   }

_sass/colors/dark-typography.scss

@@ -75,7 +75,7 @@
   --prompt-warning-bg: rgb(90 69 3 / 95%);
   --prompt-warning-icon-color: rgb(255 165 0 / 80%);
   --prompt-danger-bg: rgb(86 28 8 / 80%);
-  --prompt-danger-icon-color: rgb(255 0 0 / 60%);
+  --prompt-danger-icon-color: #cd0202;
 
   /* tags */
   --tag-border: rgb(59, 79, 88);

_sass/colors/light-syntax.scss

@@ -76,8 +76,9 @@
   --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
-  /* the code of prompts */
+  [class^=prompt-] {
-  --prompt-code-bg: rgb(219 217 217 / 35%);
+    --inline-code-bg: #fbfafa;
-  --prompt-code-text-color: rgb(78 78 84);
+    --highlighter-rouge-color: rgb(82 82 82);
+  }
 
 } /* light-syntax */

_sass/colors/light-typography.scss

@@ -68,13 +68,17 @@
   --kbd-wrap-color: #bdbdbd;
   --kbd-text-color: var(--text-color);
   --kbd-bg-color: white;
-  --prompt-text-color: rgb(70 70 70 / 90%);
+  --prompt-text-color: rgb(46 46 46 / 77%);
   --prompt-note-bg: rgb(123 247 144 / 20%);
-  --prompt-note-icon-color: green;
+  --prompt-note-icon-color: #03b303;
   --prompt-warning-bg: rgb(255 243 205);
-  --prompt-warning-icon-color: rgb(215 138 24);
+  --prompt-warning-icon-color: #ef9c03;
   --prompt-danger-bg: rgb(248 215 218 / 56%);
-  --prompt-danger-icon-color: #b31d1d;
+  --prompt-danger-icon-color: #df3c30;
+
+  [class^=prompt-] {
+    --link-underline-color: rgb(219 216 216);
+  }
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);