docs(style): add theme switching to the document website (vllm-project#221)

* feat: add theme switching to the document website

Signed-off-by: yuluo-yx <[email protected]>

* remove theme btn

Signed-off-by: yuluo-yx <[email protected]>

* fix: fix mobile sidecar

Signed-off-by: yuluo-yx <[email protected]>

---------

Signed-off-by: yuluo-yx <[email protected]>

Author: yuluo-yx

website/docusaurus.config.js

@@ -207,12 +207,12 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
-        additionalLanguages: ['bash', 'json', 'yaml', 'go', 'rust'],
+        additionalLanguages: ['bash', 'json', 'yaml', 'go', 'rust', 'python'],
       },
       colorMode: {
         defaultMode: 'light',
-        disableSwitch: true,
-        respectPrefersColorScheme: false,
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
       },
     }),
 }

website/src/components/AcknowledgementsSection/index.module.css

@@ -4,6 +4,12 @@
   background: linear-gradient(135deg, #F6F8FA 0%, #FFFFFF 50%, #F0F3F6 100%);
   position: relative;
   overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+/* Dark theme acknowledgements section */
+[data-theme='dark'] .acknowledgementsSection {
+  background: linear-gradient(135deg, #161B22 0%, #21262D 50%, #161B22 100%);
 }
 
 .acknowledgementsSection::before {
@@ -19,6 +25,15 @@
     radial-gradient(circle at 50% 50%, rgba(130, 80, 223, 0.03) 0%, transparent 50%);
   pointer-events: none;
   animation: acknowledgementsBackgroundFlow 15s ease-in-out infinite;
+  transition: all 0.3s ease;
+}
+
+/* Dark theme acknowledgements background */
+[data-theme='dark'] .acknowledgementsSection::before {
+  background-image:
+    radial-gradient(circle at 25% 25%, rgba(88, 166, 255, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 75% 75%, rgba(253, 181, 22, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.06) 0%, transparent 50%);
 }
 
 .acknowledgementsContainer {
@@ -39,6 +54,15 @@
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: acknowledgementsTitleGlow 4s ease-in-out infinite;
+  transition: all 0.3s ease;
+}
+
+/* Dark theme title */
+[data-theme='dark'] .acknowledgementsTitle {
+  background: linear-gradient(135deg, #58A6FF, #FDB516, #A855F7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .acknowledgementsSubtitle {
@@ -49,6 +73,12 @@
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
+  transition: color 0.3s ease;
+}
+
+/* Dark theme subtitle */
+[data-theme='dark'] .acknowledgementsSubtitle {
+  color: #8B949E;
 }
 
 .projectsGrid {
@@ -73,6 +103,13 @@
   color: inherit;
 }
 
+/* Dark theme project card */
+[data-theme='dark'] .projectCard {
+  background: rgba(33, 38, 45, 0.8);
+  border-color: rgba(88, 166, 255, 0.3);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
 .projectCard:hover {
   background: rgba(255, 255, 255, 0.95);
   border-color: rgba(88, 166, 255, 0.4);
@@ -82,6 +119,13 @@
   color: inherit;
 }
 
+/* Dark theme project card hover */
+[data-theme='dark'] .projectCard:hover {
+  background: rgba(33, 38, 45, 0.95);
+  border-color: rgba(88, 166, 255, 0.5);
+  box-shadow: 0 8px 32px rgba(88, 166, 255, 0.2);
+}
+
 .projectLogoWrapper {
   width: 80px;
   height: 80px;
@@ -92,6 +136,13 @@
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 2px 8px rgba(9, 105, 218, 0.1);
+  transition: all 0.3s ease;
+}
+
+/* Dark theme logo wrapper */
+[data-theme='dark'] .projectLogoWrapper {
+  background: rgba(48, 54, 61, 0.9);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .projectLogo {
@@ -113,6 +164,12 @@
   color: #1F2328;
   text-align: center;
   line-height: 1.4;
+  transition: color 0.3s ease;
+}
+
+/* Dark theme project name */
+[data-theme='dark'] .projectName {
+  color: #F0F6FC;
 }
 
 /* Animations */

website/src/components/HomepageFeatures/styles.module.css

@@ -8,6 +8,12 @@
   backdrop-filter: blur(10px);
   position: relative;
   overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+/* Dark theme features section */
+[data-theme='dark'] .features {
+  background: linear-gradient(135deg, #161B22 0%, #21262D 50%, #161B22 100%);
 }
 
 .features::before {
@@ -22,6 +28,14 @@
     radial-gradient(circle at 75% 75%, rgba(253, 181, 22, 0.05) 0%, transparent 50%);
   pointer-events: none;
   animation: featuresBackgroundFlow 10s ease-in-out infinite;
+  transition: all 0.3s ease;
+}
+
+/* Dark theme features background */
+[data-theme='dark'] .features::before {
+  background-image:
+    radial-gradient(circle at 25% 25%, rgba(88, 166, 255, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 75% 75%, rgba(253, 181, 22, 0.08) 0%, transparent 50%);
 }
 
 .featuresHeader {
@@ -48,6 +62,12 @@
   max-width: 600px;
   margin: 0 auto;
   line-height: 1.6;
+  transition: color 0.3s ease;
+}
+
+/* Dark theme subtitle */
+[data-theme='dark'] .featuresSubtitle {
+  color: #8B949E;
 }
 
 .featureCard {
@@ -66,6 +86,15 @@
   overflow: hidden;
 }
 
+/* Dark theme feature card */
+[data-theme='dark'] .featureCard {
+  background: rgba(33, 38, 45, 0.9);
+  border-color: rgba(88, 166, 255, 0.3);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(88, 166, 255, 0.2);
+}
+
 .featureCard::before {
   content: '';
   position: absolute;
@@ -92,6 +121,15 @@
   border-color: rgba(88, 166, 255, 0.4);
 }
 
+/* Dark theme feature card hover */
+[data-theme='dark'] .featureCard:hover {
+  box-shadow:
+    0 20px 60px rgba(88, 166, 255, 0.25),
+    0 0 0 1px rgba(88, 166, 255, 0.4),
+    0 0 40px rgba(88, 166, 255, 0.3);
+  border-color: rgba(88, 166, 255, 0.5);
+}
+
 .featureTitle {
   color: #1F2328;
   font-weight: 800;
@@ -104,6 +142,16 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  transition: all 0.3s ease;
+}
+
+/* Dark theme feature title */
+[data-theme='dark'] .featureTitle {
+  color: #F0F6FC;
+  background: linear-gradient(45deg, #58A6FF, #FDB516);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .featureDescription {
@@ -113,12 +161,25 @@
   font-size: 1rem;
   position: relative;
   z-index: 1;
+  transition: color 0.3s ease;
+}
+
+/* Dark theme feature description */
+[data-theme='dark'] .featureDescription {
+  color: #8B949E;
 }
 
 .featureDescription strong {
   color: #0969DA;
   font-weight: 700;
   text-shadow: 0 0 8px rgba(9, 105, 218, 0.2);
+  transition: color 0.3s ease;
+}
+
+/* Dark theme strong text */
+[data-theme='dark'] .featureDescription strong {
+  color: #58A6FF;
+  text-shadow: 0 0 8px rgba(88, 166, 255, 0.3);
 }
 
 /* Animations */