search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.42k stars 902 forks source link

Dark theme not applying on input filled #5099

Closed isaacwein closed 1 year ago

isaacwein commented 1 year ago

What is affected?

Theming

Description

I made a simple project with sveltekit using MWC 1.1 but the dark theme doesn't apply on filled inputs or select i am using @material/material-color-utilities i tried with predefined themes too and it has the same issue

dark mode image light mode

image

Reproduction

my project is on GitHub and stackblitz

Workaround

i didn't find any workarounds

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.1

Browser/OS/Node environment

Google Chrome Chrome is up to date Version 118.0.5993.89 (Official Build) (64-bit) Microsoft Windows 11 Version 22H2 (0S Build 22621.2428)

isaacwein commented 1 year ago

only the default dark theme works you can't overwrite it to use anther dark theme even the system is on dark mode

thekvd commented 1 year ago

I can speak to the Typescript version of Material Web Color only: There are several styles that don't get created when using the Theme Utilities, this being one of them I ran into. Anything that uses the list component was the same.

You'll need to create your own option using the DynamicScheme class or, if you just need something to get through for now you can check out https://github.com/thekvd/material-web-color. It's a bit involved but not too much. I put that up for my own reference, but if it helps someone else. Cool.

I'm using the Scheme class which is going away, but I can't get DynamicScheme to generate the right colors at the moment.

isaacwein commented 1 year ago

It’s not the dynamic theme problem even I created a static theme with https://m3.material.io/theme-builder#/custom it have the same results

So it up to the component to use the predefined class and variables

GoHarder commented 1 year ago

@isaacwein I have come across this problem when I was trying to make my own dark theme. I found that the --md-sys-color-on-surface-variant changes the color of the text.

isaacwein commented 1 year ago

@isaacwein I have come across this problem when I was trying to make my own dark theme. I found that the --md-sys-color-on-surface-variant changes the color of the text.

the text color is accurate. what variable is for changing the color from the input <md-filled-text-field> background that can be a temporary fix

asyncLiz commented 1 year ago

@material/material-color-utilities is unfortunately not up to date with the latest Material tokens. It's a separate project and it's hard for our team to help get it updated 😔

In the meantime, I recommend using https://material-web.dev and its theme generator (palette icon in the top right corner). This is a site just for this project and is kept up to date.

You can press the copy button after setting your hex color to get all the correct tokens, including the new surface-container tokens that the color utilities are missing, which is why some surface containers like text field's aren't being set.

We're working on better resources for generating themes that isn't reliant on other libs that may be using a different Material token version.

isaacwein commented 1 year ago

Screenshot 2023-11-13 162157

dynamic themes from @material/material-color-utilities are supported based on the https://material-web.dev/,

what is the material-web.dev website using to generate themes at runtime, can I use it too?, why not make it a web component like all other components, for easy use?

asyncLiz commented 1 year ago

what is the material-web.dev website using to generate themes at runtime, can I use it too?

You can dive into https://github.com/material-components/material-web/blob/main/catalog/src/utils/material-color-helpers.ts to look at how the catalog does it. The materialColors object specifies the correct tokens to use.

why not make it a web component like all other components, for easy use?

Simply put, we're a tiny team and we gotta build a lot of other stuff. A goal we want is to wrap @material/material-color-utilities and providing a better interface in @material/web to generate themes that are compatible.

We probably need to update our docs and remove links to the color utilities and Figma plugins since they're incompatible.

isaacwein commented 1 year ago

Thank you for clarifying

isaacwein commented 1 year ago

in https://github.com/material-components/material-web/blob/main/catalog/src/utils/material-color-helpers.ts#L13C45-L13C45 I see that @material/material-color-utilities is being used that strange

asyncLiz commented 1 year ago

I believe it's using the HCT colorspace utilities from that package, but not the main Scheme class from the utilities, which doesn't have all the correct system tokens.

isaacwein commented 1 year ago

Thank you for pointing me to that file it will help me a lot

I was wondering why if I have that bug why the material-web.dev doesn't have the same bug, now everything make sense thank you very much for your time

GoHarder commented 1 year ago

@isaacwein I have come across this problem when I was trying to make my own dark theme. I found that the --md-sys-color-on-surface-variant changes the color of the text.

the text color is accurate.

what variable is for changing the color from the input <md-filled-text-field> background that can be a temporary fix

It's one of the surface colors. I'll let you know which one exactly when I'm at work tomorrow.

GoHarder commented 1 year ago

@isaacwein For the text field specifically the background is --md-sys-color-surface-container-highest. I found that using the tools inside the Figma template will help you create a color palate that can plug into the component css.

CornerSyrup commented 1 year ago

Hi, I'm obvious too late to this thread, but I'm wondering if Material Theme Builder is maintained by the same team of this repo, or seperated? I really want to to render the surface-container token from builder, as I'm using custom neutral color. My current alternative is use --md-ref-palette-neutral95 as replacement of surface-container.

asyncLiz commented 1 year ago

No, they are separate teams, which unfortunately makes it difficult to keep things in sync.

We plan on building our own API for theme generation that uses the theme builder, but keeps things up to date with our specific version of tokens.

CornerSyrup commented 1 year ago

I've no idea on how Material Design teams are organized, but building platform specific API seems not the best solution for a cross-platform design system.

In fact, MWC won't replace all web components (or elements), which mean the Theme Builder is still being my source of truth. By providing color, typography even spacing tokens that I can use on other elements, e.g. <div>.

isaacwein commented 12 months ago

what is the material-web.dev website using to generate themes at runtime, can I use it too?

You can dive into https://github.com/material-components/material-web/blob/main/catalog/src/utils/material-color-helpers.ts to look at how the catalog does it. The materialColors object specifies the correct tokens to use.

how can i use utils/material-color-helpers.ts in my project, is it get packaged into @material/web/... ?

asyncLiz commented 12 months ago

You would need to reference or copy it and modify it to use in your own code.