Updates.

Author: DariuszDepta

.vitepress/theme/components/ChapterLabel.vue

@@ -1,25 +1,29 @@
 <script setup>
 defineProps({
   label: {
-    type: String
+    type: String,
+    default: 'CosmWasm Docs',
+  },
+  bgColor: {
+    type: String,
+    default: 'var(--bg-medium-blue)'
   }
 })
 </script>
 
 <template>
-  <span class="chapter-label">{{ label }}</span>
+  <span class="chapter-label" :style="{backgroundColor: bgColor}">{{ label }}</span>
 </template>
 
 <style scoped>
 .chapter-label {
   display: inline-block;
   color: white;
-  background-color: #7954FF;
   border: none;
-  padding: 0 10px 2px 8px;
+  padding: 2px 10px 2px 8px;
   border-radius: 12px;
   user-select: none;
-  margin-bottom: 20px;
+  margin: 0 4px 20px 0;
   font-size: 0.9em;
 }
 </style>

.vitepress/theme/style.css

@@ -1,6 +1,12 @@
 :root {
-    --dt-light-background: #A855F7;
-    --dt-dark-background: #334155;
+    --bg-maya-blue: #70BCFF;
+    --bg-medium-blue: #7954FF;
+    --bg-persian-pink: #FC8ADC;
+    --bg-congo-pink: #FF8B89;
+    --bg-champagne: #FCECB2;
+
+    --dt-light-background: var(--bg-persian-pink);
+    --dt-dark-background: var(--bg-medium-blue);
     --vp-home-hero-name-color: transparent;
     --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--dt-dark-background), var(--dt-light-background));
 }