Variables

General

:root {
    --storyColor-dark-l: calc(var(--storyColor-l) - 20%);
    --storyColor-dark: hsl(
        var(--storyColor-h),
        var(--storyColor-s),
        var(--storyColor-dark-l)
    );

    --storyColor-bright-l: calc(var(--storyColor-l) + 20%);
    --storyColor-bright-s: calc(var(--storyColor-s) + 20%);
    --storyColor-bright: hsl(
        var(--storyColor-h),
        var(--storyColor-bright-s),
        var(--storyColor-bright-l)
    );

    --msr-unit-margin: 1.2em;
    --msr-icon-border: 12px 4px;
    --msr-icon-size: 60px;
    --msr-icon-size__small: 45px;
    --msr-name-case: uppercase;
    /* --msr-line-filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.05))
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); */
    --msr-line-border: 8px;
    --msr-line-size: 1em;
    --msr-line-gap: 2px;

    --msr-tippy-bg: rgba(0, 0, 0, 0.8);
    --msr-tippy-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
}

[character] {
    --light-mode: hsl(var(--hue), 54%, 93%);
    --dark-mode: hsl(var(--hue), 12%, 25%);
    --fill-mode: hsl(var(--hue), 30%, 45%);
}

Stories

This should go on every story page. Otherwise, there would be no color.

<style>
    :root {
        --storyColor: #HEX;
        --storyColor-rgb: R,G,B;
        --storyColor-h: HUE;
        --storyColor-s: SATURATION%;
        --storyColor-l: LIGHTNESS%;
    }
</style>