So, prior to m3, I used a reboot scss file to set an empty base that's equal in all browsers, which I just grabbed from the web somewhere.
Since this file used a couple variables, I turned it into a mixin, into which I passed my theme like this:
@mixin theme($theme) {
$typography-config: mat.get-typography-config($theme);
$color-config: mat.get-color-config($theme);
$base-palette: map.get($color-config, background);
$primary-palette: map.get($color-config, primary);
$accent-palette: map.get($color-config, accent);
body {
margin: 0;
font-family: mat.font-family($typography-config, body-1);
font-size: mat.font-size($typography-config, body-1);
font-weight: mat.font-weight($typography-config, body-1);
line-height: mat.line-height($typography-config, body-1);
color: mat.get-color-from-palette($base-palette, 50);
text-align: left;
background: linear-gradient(to bottom, mat.get-color-from-palette($base-palette, 400), mat.get-color-from-palette($base-palette, 600)); // 2
}
a {
color: mat.get-color-from-palette($accent-palette, 500);
background-color: transparent; // Remove the gray background on active links in IE 10.
@include hover() {
color: mat.get-color-from-palette($accent-palette, 300);
}
...
}
Then I would call this mixin in my _theme.scss
@use './reboot' as reboot;
...
@include mat.all-component-themes($wb-theme);
@include mat.core($wb-typography-config);
@include reboot.theme($wb-theme);
...
But now this crashes with the error:
X [ERROR] Undefined function.
╷
47 │ $typography-config: mat.get-typography-config($theme);
At first the typography only showed up on material elements but was missing for plain HTML, like a text with a paragraph. I was able to fix the background colour by placing my app contents inside the navbar content element, and the typography by including the typography hierarchy.
...
html {
@include mat.core-theme(theme.$dark-theme);
@include mat.all-component-themes(theme.$dark-theme);
@include mat.typography-hierarchy(theme.$dark-theme);
}
...
However, this still doesn't solve all my issues. If I add a link to the paragraph, that shoes up in default browser colours for links, i.e. #0000ff and with an underline. Of course I'd like to restyle that as well to fit the theme of my application.
From what I get is that m3 basically only uses css variables like:
.mat-mdc-tab-link .mdc-tab__text-label {
color: var(--mat-tab-header-inactive-label-text-color);
...
}
However, the variable the link receives is color: -webkit-link;, which is not set by the theme at all, so I have to actually give it the value I need, or change the value of the attribute itself but for either case, I need to set an actual colour. I'm fine with using variables but how do I set one and give it a colour of my theme?
This also isn't just an issue of the link or some basic HTML elements. I had restyled all material elements to fit the app, each with their own .scss file with a mixin in it that takes the theme and extracts the colours I need to set, create gradients and colours where there are none in the original material element, so I really need to make some quite significant changes and do require the colours to set them for whatever I need (directly or to create some variables. How do I do this with m3?
As you are using a m3 theme fully migrated:
To set typography for html tags, you need to have the css class mat-typography set in your html (supposed to be set on the body).
Also to access m3 colors, you can use get-theme-color with palette https://material.angular.io/guide/theming-your-components#reading-tonal-palette-colors or role https://material.angular.io/guide/theming-your-components#reading-color-roles
To access typography use get-theme-typography https://material.angular.io/guide/theming-your-components#reading-typescale-properties
You can add a background to the app with the class mat-app-background https://material.angular.io/guide/theming#application-background-color