15 Ví Dụ Dark Mode Cho Web Design

15 Ví Dụ Dark Mode Cho Web Design


Ngày 11 Tháng 12 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu các ví dụ dark mode dành cho phát triển và thiết kế website bằng HTML, CSS, Javascript nha.

Các Ví Dụ Dark Mode HTML

Light/Dark Mode Toggle Navigation Bar

Light/Dark Mode Toggle Navigation Bar

Kết quả bạn xem dưới đây nha.

See the Pen Light/Dark Mode toggle Navigation Bar by Sasha (@sashatran) on CodePen.

Light & Dark Mode

Light & Dark Mode

Kết quả bạn xem dưới đây nha.

See the Pen Light & Dark Mode by Michael Richins (@MrGrigri) on CodePen.

Easy Dark Mode with SASS

Easy Dark Mode with SASS

Kết quả bạn xem dưới đây nha.

See the Pen Easy Dark Mode with SASS by Kaio Almeida (@KaioRocha) on CodePen.

Dark mode toggle expanding circle

Dark mode toggle expanding circle

Kết quả bạn xem dưới đây nha.

See the Pen Dark mode toggle expanding circle by Zed Dash (@z-) on CodePen.

Navmenu With Dark Mode

Navmenu With Dark Mode

Kết quả bạn xem dưới đây nha.

See the Pen Navmenu With Dark Mode by alphardex (@alphardex) on CodePen.

Light / Dark Mode Toggle Switch

Light / Dark Mode Toggle Switch

Kết quả bạn xem dưới đây nha.

See the Pen Light / Dark Mode Toggle Switch by designcourse (@designcourse) on CodePen.

Pure CSS dark mode toggle switcher

Pure CSS dark mode toggle switcher

Kết quả bạn xem dưới đây nha.

See the Pen Pure CSS dark mode toggle switcher by Demilade Olaleye (@demilad) on CodePen.

Dark Mode with CSS Variables

Dark Mode with CSS Variables

Kết quả bạn xem dưới đây nha.

See the Pen Dark Mode with CSS Variables by Tushar Choudhari (@ctushr) on CodePen.

Html Dark Mode

Html Dark Mode

Kết quả bạn xem dưới đây nha.

See the Pen Create A Dark/Light Mode Switch with CSS Variables by Ananya Neogi (@ananyaneogi) on CodePen.

Hover slider (dark/light)

Hover slider (dark/light)

Kết quả bạn xem dưới đây nha.

See the Pen Hover slider (dark/light) - ver 3 by Ivan Grozdic (@ig_design) on CodePen.

Checkboxes and radios (dark/light)

Checkboxes and radios (dark/light)

Kết quả bạn xem dưới đây nha.

See the Pen Checkboxes and radios (dark/light) - pure css - #06 by Ivan Grozdic (@ig_design) on CodePen.

Select Dropdown Light And Dark

Select Dropdown Light And Dark

Kết quả bạn xem dưới đây nha.

See the Pen Select dropdown (Light & Dark) by Aaron Iker (@aaroniker) on CodePen.

Custom Radio Buttons Dark

Custom Radio Buttons Dark

Kết quả bạn xem dưới đây nha.

See the Pen CSS Only: Custom Radio Buttons by Abubaker Saeed (@AbubakerSaeed) on CodePen.

Buttons Dark And Light

Buttons Dark And Light

Kết quả bạn xem dưới đây nha.

See the Pen Ghost Button Animation - Dribbble by Kitsune (@kitsune) on CodePen.

Responsive Contact Page: dark mode

Responsive Contact Page: dark mode

Kết quả bạn xem dưới đây nha.

See the Pen Responsive Contact Page: dark mode + form validation by Diana (@dianalis) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn các ví dụ về dark mode hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!