// Desktop breakpoint @mixin on-desktop {
@media screen and (min-width: $breakpoint-tablet) { @content; }
} @mixin on-tablet {
@media screen and (min-width: $breakpoint-mobile) and (max-width: $breakpoint-tablet) { @content; }
} @mixin on-mobile {
@media screen and (max-width: $breakpoint-mobile) { @content; }
} @mixin not-on-mobile {
@media screen and (min-width: $breakpoint-mobile) { @content; }
}
// Page section mixin @mixin page-section {
display: block; margin: $spacing-3 auto;
}
// Color function @function color-for($name) {
@return map-get($theme-map, $name);
}
// Theme mixin @mixin with-theme {
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out; // Apply light theme as default $theme-map: map-get($themes, "colormode-light") !global; @content; $theme-map: null !global; // Apply dark theme if darkmode @media screen and (prefers-color-scheme: dark) { $theme-map: map-get($themes, "colormode-dark") !global; @content; $theme-map: null !global; } // Set all colors for sub themes @each $theme, $map in $themes { // Apply all of the themes .#{$theme} &, &.#{$theme} { $theme-map: $map !global; @content; $theme-map: null !global; } }
}