props/Props/spa/src/assets/scss/main.scss

@use "base";
@use "../../../node_modules/bootstrap/scss/bootstrap";

#nav {
    @extend .navbar;
    @extend .navbar-expand-lg;
    @extend .sticky-top;
    @include themer.themed {
        background-color: themer.color-of("navbar");
    }
}

.nav-link, .navbar-brand {
    @include themer.themed {
        color: themer.color-of("bold");
    }
}

#content {
    @include themer.themed {
        background-color: themer.color-of("background");
        color: themer.color-of("text");
    }
}

#footer {
    @extend .py-2;
    @extend .text-center;
    @extend .border-top;
    @include themer.themed {
        background-color: themer.color-of("footer");
        color: themer.color-of("muted");
    }

    a {
        text-decoration: none;
        @include themer.themed {
            color: themer.color-of("muted");
        }
    }
}

.jumbotron {
    @extend .container-fluid;
    @extend .p-4;
    @include themer.themed {
        background-color: themer.color-of("main");
    }

    &.sub {
        @include themer.themed {
            background-color: themer.color-of("sub");
        }
    }
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 3em;
}

hr {
    @extend .my-3;
    @include themer.themed {
        color: themer.color-of("bold");
    }
}