.theme-mixin(@accent: #6570d6, @bdrs: 2rem, @purebg: false) {

    @bg-pure-light: #fff;
    @bg-colored-light: hsl(
        hue(@accent),
        15%, 95%,
    );

    @bg-light: if(@purebg, @bg-pure-light, @bg-colored-light);  // background
    @fg-light: #202020;  // foreground

    @bg-pure-dark: #222;
    @bg-colored-dark: hsl(
        hue(@accent),
        5%, 15%,
    );

    @bg-dark: if(@purebg, @bg-pure-dark, @bg-colored-dark);  // background
    @fg-dark: #eee;  // foreground

    --accent: @accent;
    --bdrs: @bdrs;

    .light-mixin() {
        --bg: @bg-light;
        --fg: @fg-light;

        --bg-sec: darken(@bg-light, 30%);
        --fg-sec: lighten(@fg-light, 25%);

        @accent-fg: darken(@accent, 7%);
        --accent-bg: darken(@bg-light, 8%);
        --accent-fg: @accent-fg;
        --accent-hl: darken(@accent-fg, 15%);
    }

    .dark-mixin() {
        --bg: @bg-dark;
        --fg: @fg-dark;

        --bg-sec: lighten(@bg-dark, 15%);
        --fg-sec: darken(@fg-dark, 30%);

        @accent-fg: lighten(@accent, 7%);
        --accent-bg: lighten(@bg-dark, 5%);
        --accent-fg: @accent-fg;
        --accent-hl: lighten(@accent-fg, 15%);
    }

    .dark-mixin();
    // &.dark {
    &[data-dark="1"] {
        .dark-mixin();
    }
    // &.light {
    &[data-dark="0"] {
        .light-mixin();
    }
    @media (prefers-color-scheme: light) {
        .light-mixin();
    }
}