docs: add dark/light theme for PanelView/ChatMessage (#320)

koishijs · Jul 31, 2021 · f026221 · f026221
1 parent 17b50d8
commit f026221
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/docs/.vuepress/components/ChatMessage.vue b/docs/.vuepress/components/ChatMessage.vue
@@ -135,8 +135,9 @@ $msgbox-left: 4.2rem;
   margin-left: $msgbox-left;
   width: fit-content;
   border-radius: 0.5rem;
-  background-color: white;
+  background-color: var(--c-bg);
   word-break: break-all;
+  transition: background-color ease 0.3s;
 
   .chat-message:not(.no-padding) &{
     padding: 0.5rem 0.7rem;
@@ -165,7 +166,8 @@ $msgbox-left: 4.2rem;
     border-bottom-width: 8px;
     border-bottom-color: currentColor;
     border-radius: 0 0 0 32px;
-    color: white;
+    color: var(--c-bg);
+    transition: color ease 0.3s;
   }
 
   p {
@@ -179,7 +181,9 @@ $msgbox-left: 4.2rem;
     border: none;
     border-radius: 0.5rem;
     padding: 0.2rem 0.6rem;
-    color: grayscale(10%);
+    background-color: var(--c-bg-light);
+    color: var(--c-text-lighter);
+    transition: background-color ease 0.3s, color ease 0.3s;
   }
 }
 

diff --git a/docs/.vuepress/components/PanelView.vue b/docs/.vuepress/components/PanelView.vue
@@ -94,7 +94,8 @@ $textShadow: 1px 1px 1px rgba(23, 31, 35, 0.5);
   border-radius: 6px;
   margin: 1rem 0;
   overflow-x: auto;
-  background-color: #f3f6f9;
+  background-color: var(--c-bg-light);
+  transition: background-color ease 0.3s;
 
   &.manager {
     background-color: #032f62;