How can I switch from the current default theme to the indigo theme of Bootstrap in the following code?
I attempted to add $primary: colorname, but it did not yield any changes.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0d1e0f3f4b514f514f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
$primary: rebeccapurple;
$danger: #dd0000;
$success: lime;
$warning: orange;
$info: aqua;
$body-bg: #f3f3f0;
@import "bootstrap";
</style>
</head>
<body>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<
<!-- Remaining code lines have been omitted for brevity -->