How do I change the background on a bootstrap container

So I'm making a ejs login project, style.css:

[theme="bloodRed"] {
    background-color: #ff2424;
    color: #e571e1;
    accent-color: #00ff00;
}

<!DOCTYPE html>
<html lang="en" theme="bloodRed">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sign up</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link href="/css/style.css" rel="stylesheet">
        <link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    </head>
    <body>
        <div class="container">
            <div class="login-box">
                <div class="row">
                    <div class="col-md-6">
                        <h2>Sign up</h2>
                        <form action="register" method="post">
                            <div class="form-group">
                                <label>First and Last name</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>Password</label>
                                <input type="password" name="password" class="form-control" required>
                            </div>
                            <button type="submit" class="btn btn-outline-info" style="margin-top: 10px;"> Sign up </button>
                        </form>
                        <p style="margin-top: 15px;">Already have an account?   <a class="btn btn-outline-success" href="login">Login here!</a></p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

and then this js code connects them:

const express = require("express");
const app = express();
app.use(express.static("public"));
app.set("view engine", "ejs");

but in register.ejs, the text doesnt change, neither does the background, if you go outside the div its red, help?

Solution

CSS follows rules of specificity and cascade. You're adding your theme property to the html element, but the Bootstrap CSS (in the reboot) is overriding it because it's applying a background-color of white on the body and a text color of #212529;.

Adding your theme property to the body tag, will help, but there are lots of other places that will apply text or background colors. It's better to use the Bootstrap SASS modules and/or custom properties (CSS variables). The documentation section on Customization details how.