在 Bootstrap 5 的文档中，默认支持深色模式。 启用深色模式
我使用 Angular 17 和 ng-bootstrap 16.0.0 构建了一个 FE。如何整合这些黑暗模式？
我是 Angular 世界的新手，那么，如何设置
data-bs-theme到目前为止，这就是我所做的，
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import {
NgbDropdownItem,
NgbModule,
NgbProgressbar,
} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
standalone: true,
imports: [
CommonModule,
RouterOutlet,
NgbModule,
NgbProgressbar,
NgbDropdownItem,
],
template: `
<div class="d-flex flex-column gap-4 p-5">
<div class="card shadow border-0">
<div class="card-body">
<div class="row">
<div class="col">
<h1>Hello, {{ title }}</h1>
</div>
<div class="col text-end">
<div ngbDropdown class="d-inline-block">
<button
type="button"
class="btn btn-outline-primary"
id="dropdownBasic1"
ngbDropdownToggle
>
Change theme
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Light</button> <!-- Do an action -->
<button ngbDropdownItem>Dark</button> <!-- Do an action -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`,
styleUrl: './app.component.scss',
})
export class AppComponent {
title = 'frontend';
}
在 src/index.html 中
<!DOCTYPE html>
<html lang="en" data-bs-theme="light"> =======> Change dynamically by Angular
<head>
<meta charset="utf-8" />
<title>Frontend</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>
将
data-bs-theme<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem (click)="changeTheme('light')">Light</button>
<button ngbDropdownItem (click)="changeTheme('dark')">Dark</button>
</div>
changeTheme(theme:string)
{
const body=document.body as HTMLElement
body.setAttribute('data-bs-theme',theme)
}
看到你应该使用 bootstrap.min.5.3.css
您可以在这个stackblitz
中看到实际情况注意：您可以在index.html中添加
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
或使用
npm install [email protected]
在 angular.json 中添加 .css，在“样式”部分中，就像这样
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/global_styles.css"],