docs(fix): blurry text color in light mode

henryhale · Oct 15, 2024 · e8b8090 · e8b8090
1 parent 2ce43ed
commit e8b8090
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/docs/.vitepress/theme/components/BrowserPreview.vue b/docs/.vitepress/theme/components/BrowserPreview.vue
@@ -1,7 +1,16 @@
+<script setup>
+const props = defineProps({
+    hidelabel: {
+        type: Boolean,
+        default: () => false
+    }
+})
+</script>
+
 <template>
     <div>
-        <div class="bp-preview">
-            <b>Preview: </b>
+        <div v-if="!props.hidelabel" class="bp-preview">
+            <b>Result: </b>
         </div>
         <div class="bp-container">
             <header class="bp-header">
@@ -35,15 +44,16 @@
     flex-direction: column;
     border-radius: 6px;
     background-color: var(--vp-code-block-bg);
-    color: #efefef;
+    color: var(--vp-c-text-1);
     overflow: hidden;
-    border: 1px solid var(--vp-code-block-bg);
+    border: 1px solid var(--vp-c-divider);
 }
 
 .bp-header {
     display: flex;
     align-items: center;
     padding: 0.25rem 0.75rem;
+    border-bottom: 1px solid var(--vp-c-divider);
 }
 .bp-header > .bp-title {
     flex-grow: 1;

diff --git a/docs/guide/prompt.md b/docs/guide/prompt.md
@@ -6,16 +6,18 @@ In most terminal emulators, the prompt style appears before the cursor. This is
 
 For example:
 
-```
-user@host:~ $ ▊
-```
+<browser-preview hidelabel>
+
+    user@host:~ $ ▊
+</browser-preview>
 
 Or even
 
-```
-┌[user@host]
-└$ ▊
-```
+<browser-preview hidelabel>
+
+    ┌[user@host]
+    └$ ▊
+</browser-preview>
 
 In the same way, you can organize the flow of input with a prompt style just before the cursor.