Темная тема TailwindCSS v4 по классам не работает без темного тега ⇐ Html

[Anonymous]

Я пытаюсь настроить пользовательскую тему в Tailwind CSS v4, которая автоматически переключается в темный режим без добавления префикса dark: к каждому пользовательскому классу.
В Tailwind v3 моя настройка была такой:

• index.css:

  Код: Выделить всё

  :root {
  --color-primary100: #0A7280;
  --color-primary50: #BAD7DB;
  --color-bgBase: #FDFDFD;
  }
  

• tailwind.config.js:

  Код: Выделить всё

  export default {
  darkMode: 'class',
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  plugins: [tailwindCssForms, containerQueries],
  theme: {
  extend: {
  colors: {
  primary100: "var(--color-primary100, #0A7280)",
  primary50: "var(--color-primary50, #BAD7DB)",
  bgBase: "var(--color-bgBase, #FDFDFD)",
  },
  },
  },
  }
  

Переключение темного режима путем добавления темного класса в работало, как и ожидалось, без необходимости устанавливать dark:bg-primary100-V2 bg-primary100 везде:
Один bg-primary100 будет обрабатывать обе темы (умножьте его на каждый настроенный реквизит, и вы поймете, почему это важно)
После перехода на Tailwind CSS v4 (https://tailwindcss.com/docs/dark-mode) я обновил свой CSS, используя новый синтаксис @theme:

Код: Выделить всё

@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/container-queries';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
--color-bgContrast: #f9f9f9;
}

/*and was hopping for this to do the job but i tried many others */
@theme dark: {
--color-bgContrast: #66C8B6;
}

Я ожидал, что добавление приведет к обновлению --color-bgContrast до #66C8B6, но это не работает должным образом. Моя цель — избежать дублирования стилей с несколькими префиксами dark: в компонентах повсюду.
Удалось ли кому-нибудь реализовать такой централизованный подход к темной теме в версии 4 или сталкивался с подобной проблемой? Будем признательны за любые идеи или обходные пути.

Подробнее здесь: https://stackoverflow.com/questions/794 ... t-dark-tag