Тёмный режим

Пакет styled включает полную поддержку тёмного режима. Тёмные значения определены для каждой переменной CSS, поэтому весь компонент выбора даты адаптируется автоматически.

Как это работает

Тёмный режим активируется двумя способами:

  1. Системные настройки — медиа-запрос prefers-color-scheme: dark
  2. Ручное переключение — атрибут data-theme="dark" на элементе .rdrp-root или родительском элементе

Системные настройки применяются по умолчанию. Если вы явно установите data-theme="light" или data-theme="dark", это переопределит системные настройки.

Автоматически (Системные настройки)

Настройка не требуется. Компонент выбора даты учитывает настройки ОС пользователя:

import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


// Автоматически следует системному тёмному/светлому режиму
<DatePicker value={value} onChange={setValue} />;

CSS использует @media (prefers-color-scheme: dark) для переключения всех переменных --rdrp-* на их тёмные значения.

Ручное переключение

Установите data-theme на корневой элемент компонента или на любой родительский элемент:

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


  return (
    <div data-theme={dark ? "dark" : "light"}>
      <button onClick={() => setDark(!dark)}>Переключить на {dark ? "светлый" : "тёмный"}</button>
      <DatePicker value={value} onChange={setValue} />
    </div>
  );
}

Или примените его непосредственно к компоненту:

<DatePicker value={value} onChange={setValue} data-theme="dark" />

При использовании Compound Component API, установите его на Root:

<DatePicker.Root value={value} onChange={setValue} data-theme="dark">
  <DatePicker.Trigger />
  <DatePicker.Content>{/* ... */}</DatePicker.Content>
</DatePicker.Root>

Цветовые значения тёмного режима

Все цветовые переменные переключаются автоматически. Вот ключевые различия:

ПеременнаяСветлыйТёмный
--rdrp-color-primary#3b82f6#60a5fa
--rdrp-color-bg#ffffff#1f2937
--rdrp-color-bg-hover#f3f4f6#374151
--rdrp-color-text#374151#e5e7eb
--rdrp-color-text-strong#111827#f9fafb
--rdrp-color-text-muted#6b7280#9ca3af
--rdrp-color-border#d1d5db#4b5563
--rdrp-color-range-bg#dbeafe#1e3a5f
--rdrp-color-text-today#2563eb#60a5fa
--rdrp-shadow-popuprgba(0,0,0,0.1)rgba(0,0,0,0.3)

Полный список смотрите в разделе CSS-переменные.

Настройка цветов тёмного режима

Переопределите тёмные переменные внутри селектора data-theme="dark" или медиа-запроса prefers-color-scheme:

/* Переопределение основного цвета тёмного режима */
@media (prefers-color-scheme: dark) {
  .rdrp-root {
    --rdrp-color-primary: #a78bfa;
    --rdrp-color-primary-hover: #8b5cf6;
    --rdrp-color-primary-light: #2e1065;
    --rdrp-color-range-bg: #2e1065;
    --rdrp-color-text-today: #a78bfa;
  }
}


/* Также применяется при ручном переключении на тёмный режим */
.rdrp-root[data-theme="dark"] {
  --rdrp-color-primary: #a78bfa;
  --rdrp-color-primary-hover: #8b5cf6;
  --rdrp-color-primary-light: #2e1065;
  --rdrp-color-range-bg: #2e1065;
  --rdrp-color-text-today: #a78bfa;
}

Принудительный светлый режим

Если ваше приложение не поддерживает тёмный режим, принудительно включите светлый режим, чтобы компонент не переключался в зависимости от системных настроек:

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

Интеграция с темой приложения

Если ваше приложение уже управляет переключением тёмного режима (например, через класс dark на элементе <html>), сопоставьте его с data-theme:

// Синхронизация с состоянием тёмного режима вашего приложения
function ThemeSyncedPicker({ value, onChange }) {
  const isDark = useAppTheme(); // ваш хук темы


  return (
    <div data-theme={isDark ? "dark" : "light"}>
      <DatePicker value={value} onChange={onChange} />
    </div>
  );
}

Для фреймворков, использующих <html class="dark"> (например, Next.js с next-themes), вы можете добавить правило CSS для их связи:

html.dark .rdrp-root {
  /* Скопируйте сюда значения переменных тёмного режима или используйте подход с data-theme */
}

Или установите data-theme на элементе html вместе с классом:

// В вашем провайдере темы
document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");

Живые примеры

Переключатель тёмного режима

Интерактивный пример, показывающий DatePicker (встроенный) с кнопкой-переключателем для смены светлого и тёмного режимов.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


function CompoundDarkMode() {
  const [value, setValue] = useState<Date | null>(null);
  const [isDark, setIsDark] = useState(false);


  return (
    <div>
      <button
        onClick={() => setIsDark((prev) => !prev)}
        style={{
          marginBottom: 12,
          padding: "6px 14px",
          border: "1px solid #d1d5db",
          borderRadius: 6,
          background: isDark ? "#374151" : "#fff",
          color: isDark ? "#f9fafb" : "#111827",
          cursor: "pointer",
          fontSize: 13,
        }}
      >
        {isDark ? "Switch to Light" : "Switch to Dark"}
      </button>
      <div
        className="rdrp-root"
        data-theme={isDark ? "dark" : "light"}
        style={{
          padding: 16,
          borderRadius: 8,
          background: isDark ? "#0f172a" : "#fff",
          display: "inline-block",
        }}
      >
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}
March 2026
Su
Mo
Tu
We
Th
Fr
Sa

Принудительный тёмный режим

DateTimePicker, отображаемый в тёмном режиме с использованием data-theme="dark" на тёмном фоне.

import { useState } from "react";
import { DateTimePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


function CustomDarkMode() {
  const [value, setValue] = useState<Date | null>(null);


  return (
    <div
      data-theme="dark"
      style={{
        padding: 24,
        borderRadius: 12,
        background: "#1e293b",
      }}
    >
      <DateTimePicker value={value} onChange={setValue} />
    </div>
  );
}