From 05fcf6e5f4c4090695c562ae42783caa05d1466a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=83=9C?= <2318857637@qq.com>
Date: Mon, 22 Jun 2026 12:15:52 +0800
Subject: [PATCH 1/2] fix docs dark mode example contrast

---
 docusaurus/pages/combobox.tsx            | 20 +++++------
 docusaurus/pages/shared.css              | 44 ++++++++++++++++++++++++
 docusaurus/pages/useCombobox.tsx         | 20 +++++------
 docusaurus/pages/useMultipleCombobox.tsx | 20 +++++------
 docusaurus/pages/useMultipleSelect.tsx   | 22 ++++--------
 docusaurus/pages/useSelect.tsx           | 25 ++++----------
 docusaurus/pages/useTagGroupCombobox.css | 17 +++++++--
 7 files changed, 95 insertions(+), 73 deletions(-)

diff --git a/docusaurus/pages/combobox.tsx b/docusaurus/pages/combobox.tsx
index 6a8438fe..a60c4a29 100644
--- a/docusaurus/pages/combobox.tsx
+++ b/docusaurus/pages/combobox.tsx
@@ -22,22 +22,20 @@ export default function ComboBox() {
       }: ControllerStateAndHelpers<string>) => (
         <div className="container">
           <label
-            style={{
-              fontWeight: 'bolder',
-              color: selectedItem ? selectedItem : 'black',
-            }}
+            className="example-label"
+            style={selectedItem ? {color: selectedItem} : undefined}
             {...getLabelProps()}
           >
             Choose an element:
           </label>
           <div {...getRootProps({}, {suppressRefError: true})}>
             <input
-              style={{padding: '4px'}}
+              className="example-input"
               {...getInputProps()}
               data-testid="combobox-input"
             />
             <button
-              style={{padding: '4px 8px'}}
+              className="example-button"
               aria-label="toggle menu"
               data-testid="combobox-toggle-button"
               {...getToggleButtonProps()}
@@ -45,7 +43,7 @@ export default function ComboBox() {
               {isOpen ? <>&#8593;</> : <>&#8595;</>}
             </button>
             <button
-              style={{padding: '4px 8px'}}
+              className="example-button"
               aria-label="toggle menu"
               data-testid="clear-button"
               onClick={() => clearSelection()}
@@ -62,11 +60,9 @@ export default function ComboBox() {
                   : colors
                 ).map((item, index) => (
                   <li
-                    style={{
-                      padding: '4px',
-                      backgroundColor:
-                        highlightedIndex === index ? '#bde4ff' : undefined,
-                    }}
+                    className={`example-menu-item${
+                      highlightedIndex === index ? ' highlighted' : ''
+                    }`}
                     key={`${item}${index}`}
                     {...getItemProps({
                       item,
diff --git a/docusaurus/pages/shared.css b/docusaurus/pages/shared.css
index 25f53101..f80c3d4d 100644
--- a/docusaurus/pages/shared.css
+++ b/docusaurus/pages/shared.css
@@ -16,6 +16,48 @@
   overflow-y: scroll;
 }
 
+.example-label {
+  color: var(--ifm-font-color-base);
+  font-weight: bolder;
+}
+
+.example-input {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background-color: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  padding: 4px;
+}
+
+.example-button {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background-color: var(--ifm-color-emphasis-100);
+  color: var(--ifm-font-color-base);
+  padding: 4px 8px;
+}
+
+.example-select-toggle {
+  padding: 4px;
+  text-align: center;
+  border: 1px solid var(--ifm-color-emphasis-600);
+  background-color: var(--ifm-color-emphasis-100);
+  color: var(--ifm-font-color-base);
+  cursor: pointer;
+}
+
+.example-menu-item {
+  padding: 4px;
+}
+
+.example-menu-item.highlighted {
+  background-color: #bde4ff;
+  color: #1c1e21;
+}
+
+html[data-theme='dark'] .example-menu-item.highlighted {
+  background-color: #1f6feb;
+  color: #ffffff;
+}
+
 .tag-group {
   display: inline-flex;
   gap: 8px;
@@ -27,6 +69,7 @@
 .tag {
   border: solid 1px darkgreen;
   background-color: green;
+  color: #ffffff;
   padding: 0 6px;
   margin: 0 2px;
   border-radius: 10px;
@@ -51,6 +94,7 @@
 
 .item-to-add {
   cursor: pointer;
+  color: var(--ifm-font-color-base);
 }
 
 .selected-tag {
diff --git a/docusaurus/pages/useCombobox.tsx b/docusaurus/pages/useCombobox.tsx
index 46fffbaf..323e01f9 100644
--- a/docusaurus/pages/useCombobox.tsx
+++ b/docusaurus/pages/useCombobox.tsx
@@ -28,22 +28,20 @@ export default function DropdownCombobox() {
   return (
     <div className="container">
       <label
-        style={{
-          fontWeight: 'bolder',
-          color: selectedItem ? selectedItem : 'black',
-        }}
+        className="example-label"
+        style={selectedItem ? {color: selectedItem} : undefined}
         {...getLabelProps()}
       >
         Choose an element:
       </label>
       <div>
         <input
-          style={{padding: '4px'}}
+          className="example-input"
           {...getInputProps()}
           data-testid="combobox-input"
         />
         <button
-          style={{padding: '4px 8px'}}
+          className="example-button"
           aria-label="toggle menu"
           data-testid="combobox-toggle-button"
           {...getToggleButtonProps()}
@@ -51,7 +49,7 @@ export default function DropdownCombobox() {
           {isOpen ? <>&#8593;</> : <>&#8595;</>}
         </button>
         <button
-          style={{padding: '4px 8px'}}
+          className="example-button"
           aria-label="clear selection"
           data-testid="clear-button"
           onClick={() => selectItem(null)}
@@ -63,11 +61,9 @@ export default function DropdownCombobox() {
         {isOpen
           ? inputItems.map((item, index) => (
               <li
-                style={{
-                  padding: '4px',
-                  backgroundColor:
-                    highlightedIndex === index ? '#bde4ff' : undefined,
-                }}
+                className={`example-menu-item${
+                  highlightedIndex === index ? ' highlighted' : ''
+                }`}
                 key={`${item}${index}`}
                 {...getItemProps({
                   item,
diff --git a/docusaurus/pages/useMultipleCombobox.tsx b/docusaurus/pages/useMultipleCombobox.tsx
index e2d6535a..6dd33736 100644
--- a/docusaurus/pages/useMultipleCombobox.tsx
+++ b/docusaurus/pages/useMultipleCombobox.tsx
@@ -79,10 +79,8 @@ export default function DropdownMultipleCombobox() {
   return (
     <div className="container">
       <label
-        style={{
-          fontWeight: 'bolder',
-          color: selectedItem ? selectedItem : 'black',
-        }}
+        className="example-label"
+        style={selectedItem ? {color: selectedItem} : undefined}
         {...getLabelProps()}
       >
         Choose an element:
@@ -117,12 +115,12 @@ export default function DropdownMultipleCombobox() {
         })}
         <div>
           <input
-            style={{padding: '4px'}}
+            className="example-input"
             {...getInputProps(getDropdownProps({preventKeyAction: isOpen}))}
             data-testid="combobox-input"
           />
           <button
-            style={{padding: '4px 8px'}}
+            className="example-button"
             aria-label="toggle menu"
             data-testid="combobox-toggle-button"
             {...getToggleButtonProps()}
@@ -130,7 +128,7 @@ export default function DropdownMultipleCombobox() {
             {isOpen ? <>&#8593;</> : <>&#8595;</>}
           </button>
           <button
-            style={{padding: '4px 8px'}}
+            className="example-button"
             aria-label="clear selection"
             data-testid="clear-button"
             onClick={() => reset()}
@@ -143,11 +141,9 @@ export default function DropdownMultipleCombobox() {
         {isOpen
           ? items.map((item, index) => (
               <li
-                style={{
-                  padding: '4px',
-                  backgroundColor:
-                    highlightedIndex === index ? '#bde4ff' : undefined,
-                }}
+                className={`example-menu-item${
+                  highlightedIndex === index ? ' highlighted' : ''
+                }`}
                 key={`${item}${index}`}
                 {...getItemProps({
                   item,
diff --git a/docusaurus/pages/useMultipleSelect.tsx b/docusaurus/pages/useMultipleSelect.tsx
index 1f9f704f..4739bf8b 100644
--- a/docusaurus/pages/useMultipleSelect.tsx
+++ b/docusaurus/pages/useMultipleSelect.tsx
@@ -65,10 +65,8 @@ export default function DropdownMultipleSelect() {
   return (
     <div className="container">
       <label
-        style={{
-          fontWeight: 'bolder',
-          color: selectedItem ? selectedItem : 'black',
-        }}
+        className="example-label"
+        style={selectedItem ? {color: selectedItem} : undefined}
         {...getLabelProps()}
       >
         Choose an element:
@@ -102,13 +100,7 @@ export default function DropdownMultipleSelect() {
           )
         })}
         <div
-          style={{
-            padding: '4px',
-            textAlign: 'center',
-            border: '1px solid black',
-            backgroundColor: 'lightgray',
-            cursor: 'pointer',
-          }}
+          className="example-select-toggle"
           {...getToggleButtonProps(
             getDropdownProps({preventKeyAction: isOpen}),
           )}
@@ -120,11 +112,9 @@ export default function DropdownMultipleSelect() {
         {isOpen
           ? items.map((item, index) => (
               <li
-                style={{
-                  padding: '4px',
-                  backgroundColor:
-                    highlightedIndex === index ? '#bde4ff' : undefined,
-                }}
+                className={`example-menu-item${
+                  highlightedIndex === index ? ' highlighted' : ''
+                }`}
                 key={`${item}${index}`}
                 {...getItemProps({
                   item,
diff --git a/docusaurus/pages/useSelect.tsx b/docusaurus/pages/useSelect.tsx
index ef0f8d6d..61dc163d 100644
--- a/docusaurus/pages/useSelect.tsx
+++ b/docusaurus/pages/useSelect.tsx
@@ -17,24 +17,13 @@ export default function DropdownSelect() {
   return (
     <div className="container">
       <label
-        style={{
-          fontWeight: 'bolder',
-          color: selectedItem ? selectedItem : 'black',
-        }}
+        className="example-label"
+        style={selectedItem ? {color: selectedItem} : undefined}
         {...getLabelProps()}
       >
         Choose an element:
       </label>
-      <div
-        style={{
-          padding: '4px',
-          textAlign: 'center',
-          border: '1px solid black',
-          backgroundColor: 'lightgray',
-          cursor: 'pointer',
-        }}
-        {...getToggleButtonProps()}
-      >
+      <div className="example-select-toggle" {...getToggleButtonProps()}>
         {selectedItem ?? 'Elements'}
         {isOpen ? <>&#8593;</> : <>&#8595;</>}
       </div>
@@ -42,11 +31,9 @@ export default function DropdownSelect() {
         {isOpen
           ? colors.map((item, index) => (
               <li
-                style={{
-                  padding: '4px',
-                  backgroundColor:
-                    highlightedIndex === index ? '#bde4ff' : undefined,
-                }}
+                className={`example-menu-item${
+                  highlightedIndex === index ? ' highlighted' : ''
+                }`}
                 key={`${item}${index}`}
                 {...getItemProps({
                   item,
diff --git a/docusaurus/pages/useTagGroupCombobox.css b/docusaurus/pages/useTagGroupCombobox.css
index 95082a20..c775dd72 100644
--- a/docusaurus/pages/useTagGroupCombobox.css
+++ b/docusaurus/pages/useTagGroupCombobox.css
@@ -12,16 +12,22 @@
 .input-wrapper {
   display: flex;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  background-color: white;
+  background-color: var(--ifm-background-surface-color);
   gap: 0.125rem;
 }
 
 .text-input {
   width: 100%;
   padding: 0.375rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background-color: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
 }
 
 .toggle-button {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background-color: var(--ifm-color-emphasis-100);
+  color: var(--ifm-font-color-base);
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
@@ -29,7 +35,8 @@
 .combobox-menu {
   position: absolute;
   width: 18rem;
-  background-color: white;
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-font-color-base);
   margin-top: 0.25rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-height: 20rem;
@@ -51,4 +58,10 @@
 
 .menu-item.highlighted {
   background-color: #93c5fd;
+  color: #1c1e21;
+}
+
+html[data-theme='dark'] .menu-item.highlighted {
+  background-color: #1f6feb;
+  color: #ffffff;
 }

From 54f62a9e43fb0e111e7a8c3e85bd84db7fa1419b Mon Sep 17 00:00:00 2001
From: Silviu Alexandru Avram <silviu.avram91@gmail.com>
Date: Thu, 25 Jun 2026 09:03:49 +0300
Subject: [PATCH 2/2] move everything to className

---
 docusaurus/pages/combobox.tsx            |   5 +-
 docusaurus/pages/index.tsx               |   2 +-
 docusaurus/pages/shared.css              | 124 +++++++++++++++++++++++
 docusaurus/pages/useCombobox.tsx         |   5 +-
 docusaurus/pages/useMultipleCombobox.tsx |   7 +-
 docusaurus/pages/useMultipleSelect.tsx   |   7 +-
 docusaurus/pages/useSelect.tsx           |   5 +-
 docusaurus/utils.ts                      |   8 ++
 8 files changed, 145 insertions(+), 18 deletions(-)

diff --git a/docusaurus/pages/combobox.tsx b/docusaurus/pages/combobox.tsx
index a60c4a29..189492c2 100644
--- a/docusaurus/pages/combobox.tsx
+++ b/docusaurus/pages/combobox.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import Downshift from '../../src'
 import {type ControllerStateAndHelpers} from '../../src/downshift.types'
-import {colors} from '../utils'
+import {colors, getExampleLabelClassName} from '../utils'
 
 export default function ComboBox() {
   return (
@@ -22,8 +22,7 @@ export default function ComboBox() {
       }: ControllerStateAndHelpers<string>) => (
         <div className="container">
           <label
-            className="example-label"
-            style={selectedItem ? {color: selectedItem} : undefined}
+            className={getExampleLabelClassName(selectedItem)}
             {...getLabelProps()}
           >
             Choose an element:
diff --git a/docusaurus/pages/index.tsx b/docusaurus/pages/index.tsx
index 1e3ae006..966561ee 100644
--- a/docusaurus/pages/index.tsx
+++ b/docusaurus/pages/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 export default function Docs() {
   return (
-    <div style={{width: '50%', margin: '200px auto'}}>
+    <div className="docs-index">
       Downshift Docs for E2E Testing
       <ul>
         <li>
diff --git a/docusaurus/pages/shared.css b/docusaurus/pages/shared.css
index f80c3d4d..cd00722a 100644
--- a/docusaurus/pages/shared.css
+++ b/docusaurus/pages/shared.css
@@ -7,6 +7,11 @@
   align-self: center;
 }
 
+.docs-index {
+  width: 50%;
+  margin: 200px auto;
+}
+
 .menu {
   list-style: none;
   width: 100%;
@@ -21,6 +26,118 @@
   font-weight: bolder;
 }
 
+.example-color-black {
+  color: #1c1e21;
+}
+
+.example-color-red {
+  color: #b00020;
+}
+
+.example-color-green {
+  color: #006b3c;
+}
+
+.example-color-blue {
+  color: #0b57d0;
+}
+
+.example-color-orange {
+  color: #9a4d00;
+}
+
+.example-color-purple {
+  color: #6f2da8;
+}
+
+.example-color-pink {
+  color: #b0005a;
+}
+
+.example-color-orchid {
+  color: #8a2a8a;
+}
+
+.example-color-aqua {
+  color: #007c89;
+}
+
+.example-color-lime {
+  color: #4a6f00;
+}
+
+.example-color-gray {
+  color: #606770;
+}
+
+.example-color-brown {
+  color: #7a3e14;
+}
+
+.example-color-teal {
+  color: #00796b;
+}
+
+.example-color-skyblue {
+  color: #0369a1;
+}
+
+html[data-theme='dark'] .example-color-black {
+  color: #f5f6f7;
+}
+
+html[data-theme='dark'] .example-color-red {
+  color: #ff8a80;
+}
+
+html[data-theme='dark'] .example-color-green {
+  color: #7ee787;
+}
+
+html[data-theme='dark'] .example-color-blue {
+  color: #79c0ff;
+}
+
+html[data-theme='dark'] .example-color-orange {
+  color: #ffa657;
+}
+
+html[data-theme='dark'] .example-color-purple {
+  color: #d2a8ff;
+}
+
+html[data-theme='dark'] .example-color-pink {
+  color: #ff99c8;
+}
+
+html[data-theme='dark'] .example-color-orchid {
+  color: #ff9df5;
+}
+
+html[data-theme='dark'] .example-color-aqua {
+  color: #7ee7ff;
+}
+
+html[data-theme='dark'] .example-color-lime {
+  color: #b8ff7a;
+}
+
+html[data-theme='dark'] .example-color-gray {
+  color: #c9d1d9;
+}
+
+html[data-theme='dark'] .example-color-brown {
+  color: #d4a373;
+}
+
+html[data-theme='dark'] .example-color-teal {
+  color: #56d4c6;
+}
+
+html[data-theme='dark'] .example-color-skyblue {
+  color: #9cdcfe;
+}
+
 .example-input {
   border: 1px solid var(--ifm-color-emphasis-300);
   background-color: var(--ifm-background-color);
@@ -92,7 +209,14 @@ html[data-theme='dark'] .example-menu-item.highlighted {
   background-color: transparent;
 }
 
+.tag-remove-control {
+  padding: 4px;
+  cursor: pointer;
+}
+
 .item-to-add {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background-color: var(--ifm-color-emphasis-100);
   cursor: pointer;
   color: var(--ifm-font-color-base);
 }
diff --git a/docusaurus/pages/useCombobox.tsx b/docusaurus/pages/useCombobox.tsx
index 323e01f9..581ee12b 100644
--- a/docusaurus/pages/useCombobox.tsx
+++ b/docusaurus/pages/useCombobox.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import {useCombobox} from '../../src'
-import {colors} from '../utils'
+import {colors, getExampleLabelClassName} from '../utils'
 
 export default function DropdownCombobox() {
   const [inputItems, setInputItems] = React.useState(colors)
@@ -28,8 +28,7 @@ export default function DropdownCombobox() {
   return (
     <div className="container">
       <label
-        className="example-label"
-        style={selectedItem ? {color: selectedItem} : undefined}
+        className={getExampleLabelClassName(selectedItem)}
         {...getLabelProps()}
       >
         Choose an element:
diff --git a/docusaurus/pages/useMultipleCombobox.tsx b/docusaurus/pages/useMultipleCombobox.tsx
index 6dd33736..8b52b2a0 100644
--- a/docusaurus/pages/useMultipleCombobox.tsx
+++ b/docusaurus/pages/useMultipleCombobox.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import {useCombobox, useMultipleSelection} from '../../src'
 import {type UseMultipleSelectionReturnValue} from '../../src/hooks/useMultipleSelection/index.types'
-import {colors} from '../utils'
+import {colors, getExampleLabelClassName} from '../utils'
 
 const initialSelectedItems = colors.slice(0, 2)
 
@@ -79,8 +79,7 @@ export default function DropdownMultipleCombobox() {
   return (
     <div className="container">
       <label
-        className="example-label"
-        style={selectedItem ? {color: selectedItem} : undefined}
+        className={getExampleLabelClassName(selectedItem)}
         {...getLabelProps()}
       >
         Choose an element:
@@ -102,7 +101,7 @@ export default function DropdownMultipleCombobox() {
               {selectedItemForRender}
               {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
               <span
-                style={{padding: '4px', cursor: 'pointer'}}
+                className="tag-remove-control"
                 onClick={e => {
                   e.stopPropagation()
                   removeSelectedItem(selectedItemForRender)
diff --git a/docusaurus/pages/useMultipleSelect.tsx b/docusaurus/pages/useMultipleSelect.tsx
index 4739bf8b..594948b0 100644
--- a/docusaurus/pages/useMultipleSelect.tsx
+++ b/docusaurus/pages/useMultipleSelect.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import {useSelect, useMultipleSelection} from '../../src'
 import {type UseMultipleSelectionReturnValue} from '../../src/hooks/useMultipleSelection/index.types'
-import {colors} from '../utils'
+import {colors, getExampleLabelClassName} from '../utils'
 
 const initialSelectedItems = colors.slice(0, 2)
 
@@ -65,8 +65,7 @@ export default function DropdownMultipleSelect() {
   return (
     <div className="container">
       <label
-        className="example-label"
-        style={selectedItem ? {color: selectedItem} : undefined}
+        className={getExampleLabelClassName(selectedItem)}
         {...getLabelProps()}
       >
         Choose an element:
@@ -88,7 +87,7 @@ export default function DropdownMultipleSelect() {
               {selectedItemForRender}
               {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
               <span
-                style={{padding: '4px', cursor: 'pointer'}}
+                className="tag-remove-control"
                 onClick={e => {
                   e.stopPropagation()
                   removeSelectedItem(selectedItemForRender)
diff --git a/docusaurus/pages/useSelect.tsx b/docusaurus/pages/useSelect.tsx
index 61dc163d..394f1408 100644
--- a/docusaurus/pages/useSelect.tsx
+++ b/docusaurus/pages/useSelect.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import {useSelect} from '../../src'
-import {colors} from '../utils'
+import {colors, getExampleLabelClassName} from '../utils'
 
 export default function DropdownSelect() {
   const {
@@ -17,8 +17,7 @@ export default function DropdownSelect() {
   return (
     <div className="container">
       <label
-        className="example-label"
-        style={selectedItem ? {color: selectedItem} : undefined}
+        className={getExampleLabelClassName(selectedItem)}
         {...getLabelProps()}
       >
         Choose an element:
diff --git a/docusaurus/utils.ts b/docusaurus/utils.ts
index c8b32237..e6a5efca 100644
--- a/docusaurus/utils.ts
+++ b/docusaurus/utils.ts
@@ -14,3 +14,11 @@ export const colors = [
   'Teal',
   'Skyblue',
 ]
+
+export function getExampleLabelClassName(selectedItem?: string | null) {
+  if (!selectedItem) {
+    return 'example-label'
+  }
+
+  return `example-label example-color-${selectedItem.toLowerCase()}`
+}