web-dev-qa-db-ja.com

WebのMaterial Design Componentsでプライマリカラーとセカンダリカラーを設定する方法

詳細

Web用のMaterial Components（MDC）を調べて、CDN（ホストされたCSSおよびJavaScriptライブラリ）を使用するようになりました。

  • https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
  • https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

これは、[ 1 ]のgetting-started-docs-pageのおかげです。同様に、MDCにはこのpredecessor-slash-lighter-libraryMaterial Design Lite（MDL）があり、テーマの色を簡単にカスタマイズできます。カスタムCSSテーマビルダーを使用して実行できます。 [ 2 ]

ただし、MDC Webのテーマガイドによると： []

...現時点では、MDC WebはSassとCSSカスタムプロパティを使用してテーマをサポートし、そのサービスが利用可能になると、CDNサポートも計画します。

結局のところ、MDCのCDN URLを使用してテーマの色を変更することは現在のところオプションではありません。

私の質問に戻って、CDNを使用してWeb用の新しいMDCでプライマリカラーとセカンダリカラーを設定する方法を教えてください。

参照資料

  1. はじめに、Webのマテリアルコンポーネント
  2. カスタムCSSテーマビルダー、Material Design Lite
  3. テーマガイド、Webのマテリアルコンポーネント
htmlcssmaterial-designcdnmaterial-components-web
11
Abel Callejo

CDNからMDC WebのCSSを使用している場合、 CSSカスタムプロパティ（変数） を使用してテーマを変更できます。

/* my-style.css */

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

MDCテーマのCSSカスタムプロパティの完全なリストは here です。たとえば、ここでプライマリ/セカンダリの背景の上のテキストの色を変更する方法は次のとおりです。

/* my-style.css */

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

このCSSは、MDC WebのCSSファイルのインポート後に取得する必要があることに注意してください。例：

<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を支持して廃止されました。

8
Rustem Gareev

リンクしたページを見ると、 this が表示され、 'mdc-theme--primary--bg'クラスを編集してプライマリ背景色を変更する必要があることが説明されています。そのため、おそらくページcssまたは<style>タグ：

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

また、セカンダリおよびその他のオプション用のクラスがリストされています:) enter image description here

1
DeltaMarine101