Customizing

Customize the default StyleMods styles with Sass variable overrides or using the CSS variables both before and after compiling.

Sass variables (anchor)

The Sass variables used for property values can be customized using overrides as follows:

@use 'stylemods/scss' with (
  $h1-font-size: 2rem,
  $button-radius: 0.25rem,
  $blue: royalblue,
);
@use "stylemods/scss" as *;
@include blue-variables-css;
@include typography-css;
@include forms-buttons-css;

They can be included with the styles as shown above or in an external document:

@use "overrides";
@use "stylemods/scss" as *;
@include blue-variables-css;
@include typography-css;
@include forms-buttons-css;

Where CSS variable tokens mixins are provided contained within a default :where(html) pseudo-class wrapper style the default value can also be customized to use :root or another selector if preferred or required:

@use 'stylemods/scss' with (
  $color-tokens: root,
  $theme-tokens: root,
);
@use "stylemods/scss" as *;
@include all-color-variables-css;
@include all-theme-variables-css;

The variables are self-contained with the associated style module ensuring each is a standalone document, the source code examples for each are included on the docs pages and the color variables and theme colors pages also both provide more details about customizing the colors if required.

CSS variables (anchor)

A majority of the styles use property values inherited through fallbacks for empty CSS variables, as demonstrated below the variables are self-contained within the associated style module:

$text-color:        var(--text, CanvasText) !default;
$background-color:  var(--background, Canvas) !default;
etc.
$h1-font-size:      var(--h1-fs, 2.125rem) !default;
$h2-font-size:      var(--h2-fs, 1.75rem) !default;
etc.

With no preset values the CSS variables can be used globally for theme design or to create localised styles:

:where(html) {
  --text: light-dark(#444, #eee)
  --background: light-dark(PowderBlue, MidnightBlue)
  --h1-fs: 2.2rem;
  --h2-fs: 1.8rem;
}
header {
  --h1-fs: 3rem;
}
article {
  --h2-fs: 2rem;
}

Or used after compiling with inline HTML styles to customize specific elements on-the-fly:

<h1 style="--h1-fs:4rem;">Hello world!</h1>

The optional color utilities and theme colors both leverage the CSS variables to create the colored modifiers for StyleMods styles, components and utilities, these demonstrate the scoping flexibility of using fallback values instead of preset root level variables and highlight why the styles have been written this way.

If the fallback method doesn't suit your styles, or you want to change the variable names and/or default fallback values, you can customize them as required using Sass overrides as described above.

More information (anchor)

StyleMods is not pre-compiled and all the styles are self-contained so there are other ways the Sass can probably be used and customized, for example utilities that also use Sass maps could be merged with custom maps to further customize what's compiled.

Currently there's no further documentation provided here but some will likely be included in the future, until then for more information I recommend heading over to the Sass docs website.