<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin
=
"anonymous"
/>
</
head
>
<
body
class
=
"m-3"
>
<
center
>
<
div
data-bs-theme
=
"dark"
class
=
"p-2 mt-2 text-body bg-body"
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
strong
>Bootstrap 5 Nesting Color Modes</
strong
> <
br
/>
<
p
>
<
strong
>dark</
strong
> theme in background.
</
p
>
<
div
class
=
"dropdown mb-4"
data-bs-theme
=
"dark"
>
<
button
class
=
"btn btn-success"
type
=
"button"
data-bs-toggle
=
"collapse"
data-bs-target
=
"#GFGdefaultcollapse"
>
Light Collapse Button
</
button
>
<
div
class
=
"collapse"
data-bs-theme
=
"light"
id
=
"GFGdefaultcollapse"
>
<
div
class
=
"card card-body mt-2 mb-2 text-dark"
>
GFG is a Computer Science portal for geeks.
</
div
>
</
div
>
</
div
>
<
div
data-bs-theme
=
"light"
class
=
"p-3 text-body bg-body rounded"
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
p
>
<
strong
>light</
strong
> theme in background.
</
p
>
<
div
class
=
"dropdown"
data-bs-theme
=
"light"
>
<
button
class
=
"btn btn-success"
type
=
"button"
data-bs-toggle
=
"collapse"
data-bs-target
=
"#GFGdarkcollapse"
>
Dark Collapse Button
</
button
>
<
div
class
=
"collapse"
data-bs-theme
=
"dark"
id
=
"GFGdarkcollapse"
>
<
div
class
=
"card card-body mt-2 text-light"
>
GFG is a Computer Science portal for geeks.
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
integrity
=
"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin
=
"anonymous"
></
script
>
</
center
>
</
body
>
</
html
>