Как установить основной и дополнительный цвета в Компоненты дизайна материалов для веб-сайтов? - PullRequest
Новая
       33

Как установить основной и дополнительный цвета в Компоненты дизайна материалов для веб-сайтов?

0 голосов
/ 18 сентября 2018

Подробнее

Я изучил компоненты материалов (MDC) для Web и попал на использование CDN (размещенные библиотеки CSS и JavaScript):

Это в силу их Getting-Start-Docs-страницы в [ 1 ]. Аналогичным образом, в MDC есть эта библиотека предшественников-косых черт Material Design Lite (MDL), в которой можно легко настроить цвета темы. Это можно сделать через свой собственный конструктор тем CSS. [ 2 * * тысяча двадцать-одна] * ** 1023 тысяча двадцать два *

Однако, согласно Тематическому руководству MDC Web: [

3 ]

... В настоящее время MDC Web поддерживает темы с помощью Sass и пользовательского свойства CSS, а также планирует поддержку CDN, как только эта служба будет доступна.

Оказывается, изменение цветов темы через URL-адрес CDN MDC в настоящее время невозможно.

Итак, еще раз вернемся к моему вопросу, как можно установить основной и дополнительный цвета в новом MDC для Web с использованием CDN?

Ссылки

  1. Начало работы, Компоненты материалов для Интернета
  2. Конструктор пользовательских тем CSS, Material Design Lite
  3. Руководство по темам, Материальные компоненты для Интернета

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Если вы используете CSS MDC Web из CDN, вы можете изменить тему, используя Пользовательские свойства CSS (переменные) , например: 

/* my-style.css */

:root {
  --mdc-theme-primary: #fcb8ab;
  --mdc-theme-secondary: #feeae6;
}

Полный список пользовательских свойств CSS для темы MDC: здесь . Например, вот как вы можете изменить цвет текста поверх основного / дополнительного фона: 

/* my-style.css */

:root {
  --mdc-theme-primary: #fcb8ab;
  --mdc-theme-secondary: #feeae6;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;
}

Обратите внимание, что этот CSS должен появиться после импорта CSS-файла MDC Web, например ::

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="my-style.css">

Упомянутый вами настройщик тем MDL не имеет ничего общего с MDC Web. MDL - предшественник MDC Web, который устарел в пользу MDC Web.

0 голосов
/ 18 сентября 2018

Глядя на страницы, на которые вы ссылались, этот , кажется, объясняет, что вы должны отредактировать класс 'mdc-theme - primary - bg', чтобы внести изменения в основной цвет фона. Таким образом, вы могли бы сделать что-то подобное в вашей странице CSS или <style> теги: 

.mdc-theme--primary-bg {
  background-color: red
}

Там также перечислены классы для вторичных и других опций :) enter image description here

...