Как создать собственные цвета Tailwind на основе медиа-запроса? ⇐ CSS

[Anonymous]

Как бы я изменил всю цветовую схему Tailwind в зависимости от предпочтений пользователя.
Возможно ли это вообще или мне нужно добавлять «dark:» перед каждым классом?
Вот мой текущий файл Tailwind.config.js:
module.exports = {
purge: ["./src/**/*.jsx"],
theme: {
themeVariants: [],
variants: {},
extend: {
colors: {
main: {
100: "#ECEFF4",
200: "#E5E9F0",
300: "#D8DEE9",
400: "#4C566A",
500: "#434C5E",
600: "#3B4252",
700: "#2E3440",
800: "#292E39",
900: "#000510",
},
},
},

},
};

Примерно то, что мне хотелось бы:
extend: {
colors: {
if(lightmode)
{
main: {
100: "#ffffff",
200: "#ffffff",
300: "#ffffff",
400: "#ffffff",
500: "#ffffff",
600: "#ffffff",
700: "#ffffff",
800: "#ffffff",
900: "#ffffff",
},
}
if(darkmode)
{
main: {
100: "#ECEFF4",
200: "#E5E9F0",
300: "#D8DEE9",
400: "#4C566A",
500: "#434C5E",
600: "#3B4252",
700: "#2E3440",
800: "#292E39",
900: "#000510",
},
}
},
},


Подробнее здесь: https://stackoverflow.com/questions/718 ... edia-query