描述

使用该自定义CSS后会让这些设置失效：

• 浅色模式背景色
• 浅色模式内容背景色
• 深色模式背景色
• 深色模式内容背景色

展示

CSS代码

:root {

    --bs-purple: #c5a4f8;
    --bs-blue: #a2b9fc;
    --bs-green: #97d7a1;
    --bs-pink: #fca2bd;
    --bs-orange: #fea98e;

    --bs-secondary: #d1cae9;
    --bs-success: #97d7a1;
    --bs-info: #a2d3fc;
    --bs-warning: #ffd8a8;
    --bs-danger: #ffb3c1;
    --bs-light: #f8f5ff;
    --bs-dark: #5e548e;

    --content-background-color: rgba(255, 255, 255, 0.3);

}

body:before {
    content: "";
    background: #f3e6ff;
    background: linear-gradient(45deg, #e6fbff 0%, #f3e6ff 25%, #e7ebff 50%, #f3e6ff 75%, #e6fbff 100%);
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: -1;
}

.card,
.page-header,
.dropdown-menu {
    backdrop-filter: blur(5px);
}

.dark-style {
    --content-background-color: rgba(255, 255, 255, 0.05);
    --bs-border-color: rgba(255, 255, 255, 0.1);
    --bs-secondary-pale: rgba(255, 255, 255, 0.1);
}

.dark-style a,
.dark-style .sidebar_menu li.active>a {
    color: var(--bs-white)
}

body.dark-style:before {
    content: "";
    background: #7947b1;
    background: linear-gradient(45deg, #39999f 0%, #7947b1 25%, #4878b1 50%, #7947b1 75%, #39999f 100%);
}

.dark-style .card-footer,
.dark-style .card-header {
    border-color: var(--bs-border-color);
}

a {
    color: var(--bs-primary);
    text-decoration: none;
}

.page-header::before {
    display: none
}