Hey, I've upgraded my app to V12 with new syntax for material theme. Here is a link to my theme:
https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48Jv~YQiIsIj9lcjwm~~PGIiwiO2VyPCb~yCt$LCIlPmBePCb~n0QiLCI~ZXI8Jv~ixyIsIjtlcjwm~4Mtfiwid2Fybj5gXjwm~wAAIiwiP2VyPCb~s7MiLCI7ZXI8Jv8AAH4sIj9UZXh0PCYAAAAiLCI~PTwm$vr6IiwiO1RleHQ8Jv~~~yIsIjs9PCYfKU1$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xMn0%3D

The problem is that it uses the default background color (#212121) instead of the custom background color (#1f294d).

For components background same issue:

Your tools seems extremely well done, however it's been 2 years since last commit. why so?

This is not so much of an error as a helpful tip. Yarn will cause build errors, I was running my build with yarn. It will complain about the @use '~@angular/material' as mat; being in a loop.

Maybe this will automatically be fixed when tackling #58

Hi,
I'm having issues with Material Dialogs, which seems to be ignoring the theme.scss styling, and are instead using the _dialog-theme.scss, from the node_modules folder.

All I did was to straight up configure my colors in the theme generator app, select version 13+, and copy the exported scss into my theme.scss file.
Everything works, except for the dialogs.

Thanks

This is an awesome project. We've branched it and are hosting it internally as reference for our themes/styling. Thank you.

How would I get a value from the theme?

For example, I would like to use the light/dark secondary-text value. How, in my component scss, would I get the current theme's secondary-text color?

color: map-get($mat-light-theme-foreground, 'secondary-text'); would work to get the light theme, and switching the variable would work for the dark theme. But not sure how to reliably do this for both light/dark in Angular component scss.

Thanks!

Hi,

Great tool you built there.

Though, i had a small issue concerning mat-list-item styles. Seems like fonts are not applied to them.
All i had to do is add this small snippet to fix it:

.mat-list-item { font-family: 'Lato'; }

"Lato" is the font i'm using.
Thanks for this nice tool!

Hello, how to use generated scss files for dynamic change themes in angular 9 application?
Would you create link in stackblitz.com?
Thank you.

Hi so I used the website to generate an Angular scss for the theming (see below picture for the expected look).

But, when using h1 tags the text stays black (see below picture)

I did apply mat-typography in the global div.
Now when I use an h1 inside a <mat-...> component, it works accordingly:

So it is just not working when I'm putting a solo h1 tag that is inside the div with the mat-typography class but not inside a component.

Anyone knows what I may be doing wrong or is this a bugg?

It would be perfect with CSS variables :) Nice work

This is just a question but I am curious about a snippet of the code generated by the theme generator. I really appreciate this tool and it was really crucial in a complex theming scheme I used in a project. I have noticed that the generator creates 3 snippets of css for the body that all look thus:

body {
--accent-color: #f5d130;
--accent-lighter-color: #fcf1c1;
--accent-darker-color: #f0c01e;
--text-accent-color: #{$dark-primary-text};
--text-accent-lighter-color: #{$dark-primary-text};
--text-accent-darker-color: #{$dark-primary-text};
}

Does this actually do anything? I've never seen anything that looks like it anywhere else and I notice that because it is not tied to the material theme, it is active all the time even if your theme is tied to a specific class. I made a sports-based app that uses 30 themes for 30 team colors, and so I end up with 90 of these in the active css at all times, and it doesn't appear that they actually do anything. Can I safely delete them? Or find a way to modify them to be conditional on the theme classes (eg body.theme-class)? Is it just informational?

Thanks again for a fantastic tool. I could not have made the app I did without it.

According to this issue they changed the behavior for the background. So tooltips will use a light background in the light version.

The $mat-light-theme-background has to be extended with tooltip, e.g.

$mat-light-theme-background: (
...
tooltip: $light-bg-darker-20,
)

Feature Request
If the theme config state was stored in url, I could share my custom theme with link or even bookmark it to save it for later. I'm interested in contributing this feature, just let me know if you're interested.

When generating the SCSS file on the site loads Roboto and Icon fonts with these two lines

...
// Fonts
@import 'https://fonts.googleapis.com/css?family=Material+Icons';
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
...

But actually Google updated it's way to get fonts and URL's should be

...
// Fonts
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
...

When i create a theme and try share this my changes in demo does not appear

Link

Angular Material V12 uses different syntax, so this tool requires an update

Hi,

At the moment using react/material-ui that uses jss - doc on theme api, complete default theme

I wonder how different is this? Perhaps it's completely compatible and a mechanical conversion from CSS could be written, possibly submitted as a PR so you could copy out JSS. Or perhaps the Material libraries in play are quite different and the best I could do is copy some values individually where it makes sense.

I did the obvious, i.e. took the output SCSS and replaced my current styles.scss with it. Result: all styles lost, and the result is a bit too Scandinavian (= all white) even for a Nordic user like me. There is no help page whatsoever?

Changing the font spacing does not update the generated SCSS

The generator adding "letter-spacing" property to the class bellow.

.mat-form-field { font-size: inherit; font-weight: 400; line-height: 1.125; font-family: Roboto; letter-spacing: 1.5px; }

This is generating an issue with the outline version of mat-form-field.

The floating label is not calculated correctly and it's also not present in the css from angular material

Here the version without the letter-spacing.

I love this project! I think it's really well executed.

I see you've supplemented the color sass maps material ships for its default colors by using lighten() and darken() to fill in the holes in the foreground and background variables. This seems to work fine. But do you think this could be a brittle solution? I don't know if it's a good idea to overwrite the foreground and background variables, I'll explain why.

For instance, if Material ships a new component, that will add a new key to those variables which would not exist in your override until you updated this tool. Could you instead use lighten and darken to generate the sass-map of colors and use that, eliminating the need to override foreground and background vars? Something to think about.

As per google/material-design-icons#773 (comment)

In the map's for the $mat-light-theme-background and $mat-dark-theme-background there is a new property since Angular v9 called tooltip. This isn't generated in the scss which caused the tooltip to not have a background.

The generator should be updated to include this property.

Hi there!

First off: great website and a great idea - I like it very much!

I have seen #10, but it didn't explain to me what to do.

I managed to re-use a variable defined in the main stylesheet (styles.css) to access e.g. the dark-background color by importing that file.

However: I should not be importing the styles.scss file, because apparently things are duplicated (according to https://material.angular.io/guide/theming#defining-a-custom-theme).

How am I supposed to properly import a style generated using your website? Especially if I want at least a light- and dark-theme (seems to be included in the SCSS-content I copied using "Copy Angular scss").
And how am I going to style it if I wanted to include even more themes? (e.g. various primary-/accent-/warn-colors as well as perhaps various styles for my components)

The generator currently does not support the latest version of the @angular/material package.

I'm not seeing a way to re-import a them back from code into the editor. Could be a good feature to have to update a theme.

Would it be possible to add the shared link into the generated code at the top of the file as shown below. With this you could re-import it back into the editor

Generated theme by Material Theme Generator
https://materialtheme.arcsine.dev
[SHARED LINK]

I'm adjusting all the relevant font configuration settings, but I can not seem to reduce the actual size of buttons.

I see the font size adjusting (being reduced), but I want to get rid of all the padding and make the actual button a lot smaller.

Is this possible using the Material Theme Generator?

The change property of input fonts doesn't seem works. Default Roboto font of angular theme look different on input field with sass generated.

based on the following snippet:

this.service.compileScssTheme(RenderService.getTemplate({ ...theme, version: 11 })).then(text => {

the generated css will always use scss from angular version 11. When trying to change to version 13 it breaks because of the changes to the usage of scss functions from the "@use '@angular/material' as mat;". Is there any solution for this to be able to generate css with angular 13?