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?