docs: change theme editor accent color

Author: Akryum

docs/.vitepress/components/theme-editor/Sandbox.vue

@@ -132,7 +132,7 @@ export default {
               <textarea
                 v-if="settings.editablePopper"
                 rows="1"
-                class="bg-green-50 text-green-900 border border-green-100 p-1 rounded resize"
+                class="bg-emerald-50 text-emerald-900 border border-emerald-100 p-1 rounded resize"
               >Popper content here</textarea>
               <div v-else>
                 Popper content here

docs/.vitepress/components/theme-editor/Tabs.vue

@@ -20,9 +20,9 @@ defineEmits<{
     <button
       v-for="(tab, index) in tabs"
       :key="index"
-      class="px-3 py-2 relative hover:bg-green-100 dark:hover:bg-green-900 flex items-center"
+      class="px-3 py-2 relative hover:bg-emerald-100 dark:hover:bg-emerald-900 flex items-center"
       :class="{
-        'text-green-500 font-medium': modelValue === tab.id,
+        'text-emerald-500 font-medium': modelValue === tab.id,
       }"
       @click="$emit('update:modelValue', tab.id)"
     >
@@ -38,7 +38,7 @@ defineEmits<{
 
       <div
         v-if="modelValue === tab.id"
-        class="absolute bottom-0 left-0 w-full border-b-2 border-green-500"
+        class="absolute bottom-0 left-0 w-full border-b-2 border-emerald-500"
       />
     </button>
   </div>

docs/.vitepress/components/theme-editor/ThemeButton.vue

@@ -3,7 +3,7 @@ export default {
   props: {
     color: {
       type: String,
-      default: 'green',
+      default: 'emerald',
     },
 
     flat: {
@@ -14,9 +14,9 @@ export default {
 
   created () {
     this.colors = {
-      green: {
-        normal: 'bg-green-300 text-green-900',
-        hover: 'hover:bg-green-200 hover:text-green-900',
+      emerald: {
+        normal: 'bg-emerald-300 text-emerald-900',
+        hover: 'hover:bg-emerald-200 hover:text-emerald-900',
       },
       red: {
         normal: 'bg-red-300 text-red-900',

docs/.vitepress/components/theme-editor/ThemeEditor.vue

@@ -180,7 +180,7 @@ export default {
       >
         <ThemeButton
           v-tooltip="'Settings'"
-          class="px-4 py-1 h-full !rounded-none hover:bg-green-200 dark:bg-green-800 dark:text-white dark:hover:bg-green-700"
+          class="px-4 py-1 h-full !rounded-none hover:bg-emerald-200 dark:bg-emerald-800 dark:text-white dark:hover:bg-emerald-700"
         >
           <SettingsIcon
             class="w-4 h-4"

docs/.vitepress/components/theme-editor/ThemesExplorer.vue

@@ -64,7 +64,7 @@ export default {
 
       <button
         v-tooltip.bottom="'Create a new theme...'"
-        class="flex-none px-3 h-full text-gray-500 hover:text-black hover:bg-green-100 dark:hover:text-white dark:hover:bg-green-800"
+        class="flex-none px-3 h-full text-gray-500 hover:text-black hover:bg-emerald-100 dark:hover:text-white dark:hover:bg-emerald-800"
         @click="$emit('create')"
       >
         <PlusIcon class="w-4 h-4" />
@@ -75,9 +75,9 @@ export default {
       <div
         v-for="t of filteredThemes"
         :key="t.name"
-        class="flex items-stretch hover:bg-green-100 dark:hover:bg-green-800"
+        class="flex items-stretch hover:bg-emerald-100 dark:hover:bg-emerald-800"
         :class="{
-          'bg-green-50 dark:bg-green-700 text-green-500 dark:text-green-200 font-medium': theme === t,
+          'bg-emerald-50 dark:bg-emerald-700 text-emerald-500 dark:text-emerald-200 font-medium': theme === t,
         }"
       >
         <button