Dark Mode

Das Tailwind v3-Paket bietet volle Unterstützung für den Dark Mode über CSS Custom Properties. Das Tailwind-Plugin (rdrpPlugin) injiziert Farbvariablen, die automatisch zwischen hellen und dunklen Paletten wechseln.

Wie es funktioniert

Das Tailwind v3-Plugin (rdrpPlugin) injiziert CSS Custom Properties, die die Farbpalette definieren. Der Dark Mode funktioniert durch das Überschreiben dieser Variablen unter .dark oder [data-theme="dark"]:

Heller Modus — :root definiert die Standardfarben (Slate + Sky-Palette)
Dunkler Modus — .dark und [data-theme="dark"] überschreiben die Farben automatisch

Das Komponenten-Theme referenziert diese über var(--rdrp-color-*), sodass der Dark Mode aktiviert wird, wenn Ihre Tailwind-darkMode-Strategie den entsprechenden Selektor auslöst.

Tailwind-Konfiguration

Class-Strategie (Empfohlen)

Setzen Sie darkMode: "class" in Ihrer Tailwind-Konfiguration. Der Dark Mode wird aktiviert, wenn eine dark-Klasse auf <html> oder einem übergeordneten Element vorhanden ist:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: "class",
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Dark Mode umschalten:

function App() {
  const [dark, setDark] = useState(false);

  return (
    <div className={dark ? "dark" : ""}>
      <button onClick={() => setDark(!dark)}>Toggle Theme</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Oder wenden Sie die Klasse auf <html> an:

document.documentElement.classList.toggle("dark", isDark);

Selector-Strategie

Tailwind v3.4+ unterstützt darkMode: "selector", was die Verwendung von [data-theme="dark"] oder einem beliebigen benutzerdefinierten Selektor ermöglicht:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: ["selector", '[data-theme="dark"]'],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

<div data-theme={dark ? "dark" : "light"}>
  <DatePicker value={value} onChange={setValue} />
</div>

Media-Strategie

Setzen Sie darkMode: "media" (oder lassen Sie es weg – dies ist die Standardeinstellung), um der Betriebssystempräferenz zu folgen:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: "media",
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Keine zusätzliche Einrichtung erforderlich. Der Picker folgt prefers-color-scheme.

Farbvariablen

Hier sind die CSS Custom Properties, die für das Hell/Dunkel-Theming verwendet werden:

Variable	Hell	Dunkel
`--rdrp-color-bg`	`#ffffff`	`#020617`
`--rdrp-color-text`	`#0f172a`	`#f8fafc`
`--rdrp-color-text-muted`	`#64748b`	`#94a3b8`
`--rdrp-color-border`	`#e2e8f0`	`#1e293b`
`--rdrp-color-bg-hover`	`#f1f5f9`	`#1e293b`
`--rdrp-color-primary`	`#0ea5e9`	`#0ea5e9`
`--rdrp-color-text-today`	`#0ea5e9`	`#38bdf8`
`--rdrp-color-range-bg`	`#f0f9ff`	`rgba(8, 47, 73, 0.5)`

Integration mit Docusaurus

Wenn Sie Docusaurus verwenden (das data-theme auf <html> nutzt), konfigurieren Sie die Selektor-Strategie von Tailwind:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  darkMode: ["selector", '[data-theme="dark"]'],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  plugins: [rdrpPlugin],
};

Docusaurus setzt <html data-theme="dark">, wenn der Dark Mode aktiv ist, und die CSS-Variablen werden automatisch auf dunkle Werte umgestellt.

Integration mit next-themes

import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

next-themes fügt die dark-Klasse auf <html> hinzu oder entfernt sie. Mit darkMode: "class" in Ihrer Tailwind-Konfiguration schaltet der Picker automatisch um.

Erzwingen eines bestimmten Modus

Um den Picker zu zwingen, immer den hellen oder dunklen Modus zu verwenden, umschließen Sie ihn mit einem Container mit der entsprechenden Klasse:

{
  /* Immer hell — kein "dark"-Klassen-Vorfahre */
}
<div className="">
  <DatePicker value={value} onChange={setValue} />
</div>;

{
  /* Immer dunkel */
}
<div className="dark">
  <DatePicker value={value} onChange={setValue} />
</div>;

📝 Note

Bei Verwendung von darkMode: "class" muss die dark-Klasse auf einem übergeordneten Element oder auf <html> vorhanden sein. Der Picker selbst verwaltet das Umschalten des Dark Mode nicht.