Увімкнути темний (темний) режим на основі Bootstrap

Маленька покидька · Опубліковано 04.04.2023 09:32:35

Вимоги: Я побачив маленьку іконку лампочки та місяця у правому куті деяких сайтів, натисніть на іконку лампочки, щоб отримати режим світла, натисніть на іконку місяця, щоб отримати нічний режим (темний режим), виглядає дуже круто, мій сайт заснований на розробці фронтенд-фреймворку Bootstrap, пошукайте пов'язані матеріали та навчальні матеріали.

bootstrap4：Вхід за гіперпосиланням видно.
bootstrap5：Вхід за гіперпосиланням видно.
Документація навчального посібника：Вхід за гіперпосиланням видно.

Код компілює чотири методи оригінального робочого корпусу (і загалом шість варіантів)

Режим ручного перемикання:Вхід за гіперпосиланням видно.
Дотримуйтесь автоматичної комутації операційних систем:Вхід за гіперпосиланням видно.

(Особливо, як iPhone перемикається між днем і ніччю, темний режим підходить для слабо освітлених умов, що краще захищає очі користувача, не турбуючи інших, а також дозволяє економити більше енергії.) ）

Згідно з навчальним посібником з документації, спробуйте ввести його на наш сайт, спочатку подивіться на рендери наступним чином:

Введіть стилі в голові, код виглядає так:

Вхід видно.

HTML-код іконки кнопки:

Вхід видно.

Код режиму перемикання js:

Вхід видно.

(Кінець)