Переключаемые пользовательские темы начальной загрузки с помощью sass

Question

Мне удалось найти много разных подходов к созданию переключаемых тем в SASS. Я не смог понять, как применить этот подход к переопределениям начальной загрузки. Допустим, я хочу иметь светлую и темную тему, и обе темы будут по-разному переопределять цвета начальной загрузки.

// Light-theme
$theme-colors: (
    "primary": #8A2F4F
);

// Dark-theme
$theme-colors: (
    "primary": #fff
);

В приведенном выше примере переопределения для primary из theme-colors. Как я могу условно установить их в зависимости от темы, выбранной пользователем?

Answer 1

Ну

Есть много способов сделать это. Я бы посоветовал вам создать несколько файлов CSS на основе файла _variables.scss. Все, что вам нужно сделать, это создать новую тему с другим файлом переменной. Вы можете проверить этот метод в моем публичном репо .

Другим способом было бы использование пользовательских переменных CSS (называемых пользовательскими свойствами). Вы можете сделать что-то вроде этого. Я только что скопировал, вставил и изменил CSS. Это просто, чтобы дать идею.

в файле sass,

$theme-colors: (
    "primary": var(--primary-color);
);

и в другом файле переменной,

element.dark {
  --primary-color: black;
} 
element.light {
  --primary-color: white;
} 

Это два метода, которые я бы предложил.