У меня есть веб-приложение ASP.NET MVC, для которого я планирую использовать Bootstrap (так как он является частью шаблона MVC по умолчанию). Я понимаю, что довольно просто настроить загрузку, чтобы она выглядела так, как я хочу, и как переопределить цвета темы, создав собственный файл site.scss, который импортирует bootstrap.scss после определения переопределений для цветов темы:
$theme-colors: (
primary: #123456; // whatever colour I want here
);
@import "bootstrap.scss";
Затем он компилируется в site.css и предоставляется нашим клиентам.
Однако наши клиенты должны иметь возможность определять свою собственную тему. Поэтому, если они хотят синие кнопки, они получают синие кнопки, если они хотят красного, они становятся красными. Есть ли какой-нибудь поддерживаемый способ сделать это с помощью Bootstrap?
Я рассмотрел вопрос о создании конечного набора цветных тем, из которых они могут выбрать, и наличии отдельного файла .scss для каждой из них, а затем обслужил соответствующий .css, но я хотел бы использовать ASP.NET функция связывания, и это делается при запуске приложения, поэтому мне также потребуется отдельный комплект для каждой темы.
Также я заметил, что когда вы компилируете boostrap.scss, вы получаете список переменных css:
:root {
--blue: #007bff;
--indigo: #6610f2;
...
--primary: #123456;
}
И кратко подумал, что он будет использовать их при применении стилей повсюду, и поэтому я мог бы переопределить из отдельной таблицы стилей, чтобы установить свои собственные цвета. К сожалению, в остальной части файла .css используются шестнадцатеричные коды, а не соответствующие переменные CSS. Чтобы доказать свою точку зрения, я выполнил поиск и замену всех цветов, перечисленных как css vars, и смог переопределить их из последующей таблицы стилей, по существу предоставив тему во время выполнения. Но это не очень хорошее решение, так как требует редактирования скомпилированного файла CSS (который будет часто перезаписываться во время разработки).
У кого-нибудь есть идеи получше?