Skip to content

Commit

Permalink
fix(material/core): M3 themes no inserting loaded marker
Browse files Browse the repository at this point in the history
Fixes that all M3 themes were causing a "no theme has been loaded" warning to be logged, because they weren't inserting the loaded marker.

Note: it's tempting to create the marker as a token, but we can't do it because tokens are output under a selector, whereas we want the marker to always be at the top level since we detect it by creating an element and inserting it into the `body`.

Fixes angular#29115.
  • Loading branch information
crisbeto committed May 25, 2024
1 parent 433a200 commit 58fb551
Showing 1 changed file with 22 additions and 8 deletions.
30 changes: 22 additions & 8 deletions src/material/core/_core-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,22 @@
@use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
@use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;

$_has-inserted-loaded-marker: false;

@mixin _theme-loaded-marker {
@if not $_has-inserted-loaded-marker {
$_has-inserted-loaded-marker: true !global;

// Marker that is used to determine whether the user has added a theme to their page.
// Needs to be generated at the root, because themes may be nested inside classes.
@at-root {
.mat-theme-loaded-marker {
display: none;
}
}
}
}

@mixin base($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
Expand All @@ -26,6 +42,9 @@
@include optgroup-theme.base($theme);
@include pseudo-checkbox-theme.base($theme);
}

// The marker is a concrete style no matter which Material version we're targeting.
@include _theme-loaded-marker;
}

@mixin color($theme) {
Expand Down Expand Up @@ -54,14 +73,6 @@
}
}
}

// TODO(crisbeto): move this into the base.
// Marker that is used to determine whether the user has added a theme to their page.
@at-root {
.mat-theme-loaded-marker {
display: none;
}
}
}

@mixin typography($theme) {
Expand Down Expand Up @@ -127,6 +138,9 @@
}
}
}

// The marker is a concrete style no matter which Material version we're targeting.
@include _theme-loaded-marker;
}

@mixin _theme-from-tokens($tokens, $options...) {
Expand Down

0 comments on commit 58fb551

Please sign in to comment.