Изменить материализовать цвета темы из CDN

Question

Я использую Материализацию в проекте, и я ДОЛЖЕН загрузить Материализацию, используя ссылки CDN. Поэтому в заголовках моего проекта у меня есть:

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Теперь я хочу изменить цвета темы проекта.

Я знаю, что с помощью SASS я мог бы где-нибудь использовать файл _variables.sass для изменения значений по умолчанию, но, поскольку он загружен из CDN, я не могу этого сделать.

Что такое правильный способ сделать это при загрузке Materialize из его CDN?

Я попытался:

• Установка новой переменной в главном файле CSS моего проекта:

$primary-color: red;
$primary-color-light: lighten($primary-color, 15%) !important;
$primary-color-dark: darken($primary-color, 15%) !important;

Не работает.

• Установка этой переменной на !important:

$primary-color: red !important;
$primary-color-light: lighten($primary-color, 15%) !important;
$primary-color-dark: darken($primary-color, 15%) !important;

Не работает.

Answer 1

Итак, две точки здесь:

1) Поскольку этот файл CDN поставляется скомпилированным CSS, а не SASS, переменные SASS недоступны для редактирования, поэтому вы не собираюсь ничего перезаписывать собственными файлами SASS.

2) Получив доступ к этому файлу CSS, вы должны иметь все свои классы цветов, которые уже доступны для использования (например: <div class="card-panel teal lighten-2">). На мой взгляд, это намеченный способ использовать эту библиотеку с заданными настройками, поэтому вы можете редактировать классы HTML элементов в вашем проекте в соответствии с вашими пожеланиями.

https://materializecss.com/color.html