docs: improve documentation (#1801)

* docs: improve documentation

* docs: updates

* fix: updates

Author: kazupon

docs/.vitepress/config.mts

@@ -67,7 +67,7 @@ function nav() {
     },
     {
       text: 'Roadmap',
-      link: '/guide/roadmap'
+      link: '/guide/extra/roadmap'
     },
     {
       text: 'v9.x',
@@ -90,24 +90,20 @@ function sidebarGuide() {
           text: 'What is Vue I18n?',
           link: '/guide/introduction'
         },
-        {
-          text: 'Getting Started',
-          link: '/guide/'
-        },
         {
           text: 'Installation',
           link: '/guide/installation'
-        },
-        {
-          text: 'Roadmap',
-          link: '/guide/roadmap'
         }
       ]
     },
     {
       text: 'Essentials',
       collapsible: true,
       items: [
+        {
+          text: 'Getting Started',
+          link: '/guide/essentials/started',
+        },
         {
           text: 'Message Format Syntax',
           link: '/guide/essentials/syntax'
@@ -217,13 +213,20 @@ function sidebarGuide() {
       ]
     },
     {
-      text: 'v8.x',
+      text: 'Extra Topics',
       collapsible: true,
-      collapsed: true,
       items: [
+        {
+          text: 'Different Distribution files',
+          link: '/guide/extra/dist'
+        },
         {
           text: 'Documentation for v8.x',
-          link: '/guide/v8-docs'
+          link: '/guide/extra/v8-docs'
+        },
+        {
+          text: 'Roadmap',
+          link: '/guide/extra/roadmap'
         }
       ]
     }

docs/.vitepress/theme/styles/global.css

@@ -1,10 +1,26 @@
 :root {
+  --vp-c-brand-1: var(--vp-c-green-1);
+  --vp-c-brand-2: var(--vp-c-green-2);
+  --vp-c-brand-3: var(--vp-c-green-3);
+  --vp-c-brand-soft: var(--vp-c-green-soft);
+  --vp-code-color: #476582;
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-image-filter: blur(72px);
   --vp-home-hero-image-background-image: linear-gradient( -45deg, #647eff 30%, #42d392 );
   --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #647eff, #42d392);
 }
 
+:root.dark {
+  --vp-code-color: #c9def1;
+
+  --vp-home-hero-image-filter: blur(72px);
+  --vp-home-hero-image-background-image: linear-gradient(
+    0deg,
+    var(--vp-c-brand-soft) 50%,
+    var(--vp-c-brand-soft) 50%
+  );
+}
+
 .vp-sponsor-grid.xmini .vp-sponsor-grid-link   { height: 64px; }
 .vp-sponsor-grid.xmini .vp-sponsor-grid-image  { max-width: 64px; max-height: 22px }