ASP.Net bootstrap and App_Themes - asp.net

Question

I've built a bootstrap site with a nice navigation bar and layout. I want to leverage asp.net themes where I can change the look of the application.
The issue is that a lot of the classes in bootstrap aren't necessarily semantic, so it's hard to apply css to a fragment of html that has some purpose that could otherwise be identified by a semantically named class.
This is readily apparent with the bootstrap navbar which requires the navbar-light or navbar-dark classes, which control the text color of various types of elements within the navbar.
If I want one theme with dark background/light text and one theme with light background/dark text, it's hard to do natively with bootstrap because those classes need to be specified within the markup.
Do I just not use those classes, and duplicate that section of the bootstrap scss and make something that is more compatable with themes, or are there better approaches to take?
Here is an example:
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-0 flex-wrap pt-1 pb-1 shadow-none ">
<div class="d-flex flex-nowrap flex-fill minw-0">
<a class="app-link navbar-brand text-truncate mr-auto mt-auto mb-auto d-flex align-items-center" href="../../../"/>
<img class="app-logo mt-auto mb-auto" src="../../../App_Themes/IHClean/img/app/applogo.svg">
<span class="text-truncate font-weight-normal">Non-semantic Css</span>
</a>
<button class="navbar-toggler my-1 ml-auto bg-dark-heavy" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"/>
</button>
</div>
<div class="collapse navbar-collapse flex-wrap d-md-inline-flex justify-content-end">
<div class="d-md-inline-flex">
<ul class="navbar-nav nav">
<li class="active nav-item">
Home
</li>
<li class="nav-item">
<a href="../../../Samples" class="nav-link icon-mmnu-info">Samples
<span class="badge badge-balloon badge-light">
<span class="d-xs-inline d-sm-none text-primary">XS</span>
<span class="d-none d-md-none d-sm-inline text-success">SM</span>
<span class="d-none d-md-inline d-lg-none text-danger">MD</span>
<span class="d-none d-lg-inline d-xl-none text-warning">LG</span>
<span class="d-none d-xl-inline text-dark">XL</span>
</span>
</a>
</li>
</ul>
</div>
<div class="d-md-inline-flex">
</div>
</div>
</nav>
The navbar-dark class requires a light background color or text won't show up. If I want to be able to use ASP.Net Themes in a web forms app, I am limited to how I can apply theme colors because of the use of navbar-dark. I can't invert the dark on light easily and still retain semantics. Perhaps I just have to forgo the sematics and override the navbar dark variables.