My goal is to take an "almost perfect" (for me) theme and modify it slightly for my needs. Additionally, I would like to continue to use the CDN for the majority of the work.
I am attempting to use bootswatch and then override the colors defined (primary, secondary, etc.) The way I understand (clearly wrong) css, I should be able to import css after the bootswatch css and the second would override the first according to this documentation. It does not seem to be working that way:
:root {
--primary: #78aed5;
--secondary: #afc7e2;
--success: #76a443;
--info: #607aa3;
--warning: #D47500;
--danger: #b12949;
--light: #f8f9fa;
--dark: #343a40;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/spacelab/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="col-md-3 col-lg-5">
<div class="row mx-0 text-center text-light small rounded">
<div class="col bg-light text-dark p-1">
From Override:
</div>
<div class="col bg-primary p-1">
primary
</div>
<div class="col bg-secondary p-1">
secondary
</div>
<div class="col bg-success p-1">
success
</div>
<div class="col bg-info p-1">
info
</div>
<div class="col bg-warning p-1">
warning
</div>
<div class="col bg-danger p-1">
danger
</div>
<div class="col bg-light text-dark p-1">
light
</div>
<div class="col bg-dark p-1">
dark
</div>
</div>
</div>
<div class="col-md-3 col-lg-5">
<div class="row mx-0 text-center text-light small rounded">
<div class="col bg-light text-dark p-1">
From Inline Style:
</div>
<div class="col p-1" style="background-color:#78aed5;">
primary
</div>
<div class="col p-1" style="background-color:#afc7e2;">
secondary
</div>
<div class="col p-1" style="background-color:#76a443;">
success
</div>
<div class="col p-1" style="background-color:#607aa3;">
info
</div>
<div class="col p-1" style="background-color:#D47500;">
warning
</div>
<div class="col p-1" style="background-color:#b12949;">
danger
</div>
<div class="col text-dark p-1" style="background-color:#f8f9fa;">
light
</div>
<div class="col p-1" style="background-color:#343a40;">
dark
</div>
</div>
</div>
</body>
</html>Here is my result:
I would expect the top css-defined colors to be the same as the lower inline-defined colors, the latter colors being my goal. That's not the case.
