Условно переопределить переменные scss для переключения темы начальной загрузки 4 - PullRequest
Новая
       24

Условно переопределить переменные scss для переключения темы начальной загрузки 4

2 голосов
/ 01 ноября 2019

По документации Bootstrap ,

Каждая переменная Sass в Bootstrap 4 включает флаг! Default, позволяющий переопределить значение переменной по умолчанию в вашем собственном Sass без изменения источника Bootstrapкод. При необходимости скопируйте и вставьте переменные, измените их значения и удалите флаг! Default. Если переменная уже была назначена, она не будет переназначена значениями по умолчанию в Bootstrap.

Поэтому они рекомендуют вам создать свою собственную тему, например: 

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

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

// Your variable overrides
body.light-mode {
  $body-bg: #fff;
}
body.dark-mode {
  $body-bg: #000;
}
// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

Но, похоже, это не работает, я думаю, потому чтоо том, как переменные ограничены.

Возможно ли это? В идеале я хотел бы иметь светлые и темные переменные в их собственном файле.

Для небольшого контекста;Я использую начальную загрузку в веб-приложении, созданном create-реагирующим приложением, и они рекомендуют импортировать начальную загрузку как подробно здесь . Если бы я только сгенерировал 2 отдельные таблицы стилей, я бы скопировал их в мою / общую папку вручную и со ссылкой, и они не были бы частью комплектации веб-пакета.

Ответы [ 2 ]

0 голосов
/ 05 ноября 2019

Это похоже на работу, но разве это плохая идея? Очевидно, у меня будет все бутстрап дважды. 

// Default theme
$body-bg: #fff;
// etc...

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

// dark theme, turned on by adding class dark to document.documentElement (html tag)
.dark {
  $body-bg: #000;
  // etc...

  // Bootstrap and its default variables
  @import "node_modules/bootstrap/scss/bootstrap";
}
0 голосов
/ 01 ноября 2019

Это не сработает. Почему бы не создать две разные темы - dark / light:

light theme (light-theme.scss): 

// Your variable overrides
$body-bg: #fff;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

dark theme (dark-theme.scss): 

// Your variable overrides
$body-bg: #000;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

, а затем, при необходимости, перетащите соответствующую таблицу стилей на страницу?

...