Managing primary and secondary color schemes within Material Design Components for Web - a complete guide

Exploration

I delved into the realm of Material Components (MDC) for Web and found myself utilizing CDN for hosted CSS and JavaScript libraries:

  • 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

This information was extracted from their beginner's-guide-page at [1]. Similarly, MDC has a previous version known as Material Design Lite (MDL), which offered easy customization of theme colors through a custom CSS theme builder. This feature can be accessed via the following link: [2]

Nevertheless, as per MDC Web's Theming Guide: [3]

... Currently, MDC Web allows theming with Sass and CSS Custom Property, with potential future support for CDN theming once available.

Unfortunately, adjusting theme colors using the MDC's CDN URL is presently unavailable.

So, in light of this information, my query remains: How does one configure primary and secondary colors in the new MDC for Web using the CDN?

Sources

  1. Introduction to Material Components for the Web
  2. Custom CSS theme builder for Material Design Lite
  3. Theming guidelines for Material Components for the Web
htmlcssmaterial-designcdnmaterial-components-web

Answer №1

To customize the theme of MDC Web's CSS when using a CDN, you can utilize CSS custom properties (variables) like so:

/* my-style.css */

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

You can find the complete list of CSS custom properties for MDC Theme here. For example, adjusting text color on primary or secondary backgrounds can be done as follows:

/* my-style.css */

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

Remember to include this CSS code after importing the MDC Web's CSS file, like this:

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

It's worth mentioning that the MDL theme customizer is not related to MDC Web. MDL is the predecessor of MDC Web and has been deprecated in favor of MDC Web.

Answer №2

Upon reviewing the resources you provided, it seems that you can modify the 'mdc-theme--primary--bg' class to change the primary background color. A possible solution would be to include something similar to the following in your page's CSS or <style> tags:

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

Furthermore, there are additional classes available for secondary and other customization options as well :) https://i.sstatic.net/fhseD.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Collection of HTML elements that need to stay in the same section

I am struggling to align multiple vertical lines of data on a webpage and keep them together when the page size changes. I've been working with CSS and HTML code but finding it challenging. Any suggestions or alternative approaches would be greatly ap ...

htmlcsssubscriptsuperscript

Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to ...

javascriptjqueryhtmlcssweb

Position Navbar Links on the Right Side using fullPage.js

I'm facing an issue with my navbar placement. I want it to be at the bottom of the viewport with the links aligned to the right side. Although I have successfully placed the navbar at the bottom, I'm unable to align the links to the right no matt ...

jquerycssfullpage.js

What do you do when you need to hide a table column that has a colspan

I have been searching for a solution to my unique table structure, but I haven't found any that match my situation. When attempting to hide column A or B, the following code works perfectly: $('table td:nth-child(1),table th:nth-child(1)') ...

jqueryhtmlcsscss-selectors

Adjust the text size in a collapsible tree based on the number of expanded components inside the container

Hi there, I'm currently developing a code for an expandable/collapsible tree using checkboxes. I have successfully implemented the basic functionality, but I have a specific requirement. I want the text size to decrease as the tree expands to prevent ...

javascriptjqueryhtmlcss

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...

javascriptcss

The React Navbar dropdown items appear to be displaying only text, without any menu showing up behind

I'm having an issue with the background of my dropdown menu not showing properly. The text within the dropdown items is appearing without a background, making it look like they are floating in a line on the page. I've tried adjusting the z-index ...

cssreactjsdropdownreact-bootstrap

What could be causing the issue where only the latest data is being shown

When I use ajax to retrieve data from my database, the console.log displays all the results correctly, but in my HTML, only the last result is shown. What could be causing this issue? Any help would be appreciated! Thanks! Please keep your response simple ...

javascriptphphtmlajax

Display a message on the webpage itself, not in a pop-up, when the value exceeds 1 using JavaScript

I need help with a condition involving a variable called "truecount." If this value is less than one, I would like to display an error message on the screen instead of an alert popup. Could someone assist me with this? I am new to this and don't have ...

javascripthtml

Implementing a confirmation dialog for POST requests in Flask

My first experience with Flask involves adding a confirmation dialog to a form, but only under specific conditions. Unfortunately, I'm unable to achieve this on the client side. While I was successful in implementing it for GET requests, POST requests ...

javascriptpythonhtmlflask

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

javascriptcssvue.jsvuejs2vue-router

Issues with playing Html 5 video arise when making an ajax call

My goal is to implement an AJAX call followed by displaying an HTML5 video. The provided code snippet seems to be ineffective. $.ajax({ type: "POST", url: "Videos.aspx/GetBlocs", contentType: "application/json; charse ...

jqueryajaxhtmlhtml5-video

Ensuring a DIV remains fixed in place for a specific number of scrolls

I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any sugge ...

javascriptjqueryhtmlcsswordpress

Achieving a layout with two rows containing two flexboxes on each row using Flexbox

Currently, I'm working on getting two flexboxes on each row. Here is the current layout: https://i.sstatic.net/UsAI6.jpg Here is the desired layout I'm aiming for: https://i.sstatic.net/wRhw4.jpg I want to have 4 flexboxes in total, with 2 on ...

htmlcssflexbox

Exploring Google Go Templates for Creating Dynamic Websites using Multidimensional Arrays

In my struct example, I have a two-dimensional array: type Foo struct{ testArray[9][9] int } My goal is to access it using a template. For instance: tmpl.Execute(w, foo) //foo is a pointer to Foo struct and w represents the parsed html website How can ...

htmlarraystemplatesgo

Placing Bootstrap nav-items outside of the justify-content-center alignment

Having trouble positioning a button in the nav container to the right side of the screen while keeping all other nav items centered using justify content center. I've tried the following solutions: Using margin-left:auto on the button, but it shifts ...

htmlcsstwitter-bootstrapflexbox

"Experiencing overflow issues with flex items on Firefox browser

Currently, I am working on constructing a form where the first row consists of a single text field with 100% width and the second row contains three equidistant fields. The layout works perfectly in Chrome but is experiencing overflow issues in Firefox. ...

htmlcssflexbox

What is the process for including a static file on an http server?

Looking to create a chatroom using node.js. Utilizing the socket.io template for this project. var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require(&ap ...

javascripthtmlnode.jsexpress

The jQuery code I'm using is incorrectly selecting all elements with the class name "a2" when I click on them, instead of providing me with

I was hoping to see one a2 element displayed at a time when clicking on a div element, but instead, all a2 elements are appearing simultaneously. I would like to see only one a2 class element at a time upon clicking. <!DOCTYPE html> <html> < ...

javascripthtmljquery

To reveal the secret map location, just tap on the button - but remember, this only applies to

I am encountering an issue with duplicating a card and toggling the hidden location map. Currently, the location button only works for the first card and not for the rest. I need each card to independently open and hide the location map when clicked on the ...

javascripthtmlcss