Trang chủ \  \  \10.6.19

Tạo Dark mode (chế độ tối) cho blog/website

Cùng theo trào lưu Dark mode thì bài viết này sẽ giúp bạn đưa vào blog/website của mình nút bật tắt chế độ tối. Không những bật tắt bằng tay mà còn có chế độ tự động bật tắt theo giờ nhất định. Tính năng tự động này hiện tại mình chưa thấy blog/website nào có kể cả Youtube hay Twitter. Ngoài ra thì những thiết lập này được lưu lại trên trình duyệt và khi người dùng truy cập lần sau thì chế độ tối này vẫn giữ nguyên như trước khi tắt trình duyệt. Có nghĩa người dùng đang để chế tối và thủ công thì lần sau bật trình duyệt lên vẫn là chế độ tối đó.






Chọn giờ chuyển sang chế độ tối (mặc định là từ 22h đến 7h) sau đó nhấn Get code.

From to



Chèn đoạn mã trên vào sau thẻ <body>.

Chèn đoạn mã dưới đây vào vị trí muốn hiển thị nút bật đóng chế độ tối: 
<div class='dark-mode'>
 <button class='toggle' onclick='toggle()' type='button'/>
 <button class='mode' onclick='mode()' type='button'/>
</div>

Bước cuối cùng, cũng là bước tốn thời gian nhất: thiết kế giao diện tối cho blog/website. Vì là màu sắc nên ta quan tâm đến màu nền (background-color), màu chữ (color), màu viền (border-color)... Giả sử blog/website có class header khai báo như sau: 
.header{
background-color:#ddd;
color:#000;
}

Thì chúng ta sẽ khai báo thêm class dark với màu nền và màu chữ có xu hướng ngược màu ban đầu như sau: 
.header{
background-color:#ddd;
color:#000;
}
.dark .header{
background-color:#444;
color:#eee;
}

Sau khi thực hiện thành công thì giờ đây blog/website của bạn có tới 2 giao diện để "đổi gió", và hơn cả là nó dịu mắt khi ở chế độ tối buổi đêm.

Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

64

Nhận xét
Huy Đinh 10/6/19 07:39
1

Giống iOS 13 quá :D

Reply Xóa nhận xét
Duy Pham 10/6/19 12:00
4

Fan Apple luôn :D

Reply Xóa nhận xét
Huy Đinh 10/6/19 13:48
6

E cũng Fan của Apple bác ạ. Mua ko trượt phát nào :D
Cơ mà hôm qua nghịch dại nâng lên iOS 13 beta xong lỗi tùm lum, hôm nay hạ xuống 12.3.1 mất gần hết dữ liệu :(

Reply Xóa nhận xét
Duy Pham 10/6/19 20:59
7

Mình chỉ chờ bản chính thức thôi. Qua giai đoạn thích cập nhật phiên bản mới rồi. Chắc dấu hiệu tuổi già :p

Reply Xóa nhận xét
Duy... 10/6/19 11:48
3

Mà sao có 2 button vậy ad?

Reply Xóa nhận xét
Duy Pham 10/6/19 12:00
5

Một cái thủ công, một cái auto mà

Reply Xóa nhận xét
Ta là ta 11/6/19 23:18
9

dùng cho wp chắc ổn anh nhỉ, để test thử vậy

Reply Xóa nhận xét
Duy Pham 12/6/19 04:19
10

Cho nền tảng nào cũng được thôi.

Reply Xóa nhận xét
Đỗ Trực 17/6/19 03:06
11

Đang làm theo bác thủ thuật này nhưng không đổi được cái màu khung comments bác ơi
https://1.bp.blogspot.com/-Lw2KFXNFOJg/XQahDZDcL8I/AAAAAAAAFCI/-4kiivf5G_sDaoLKYQ_BRURStUxaAJaoACLcBGAs/s320/trucblog%2B%25282%2529.png

Reply Xóa nhận xét
Duy Pham 17/6/19 07:43
12

Khung đó là iframe, mình sẽ có một bài hướng dẫn can thiệp vào css của nó để có background trong suốt

Reply Xóa nhận xét
Ta là ta 21/6/19 23:04
24

thử chèn vào blog wp ko chạy, buồn quá

Reply Xóa nhận xét
Duy Pham 22/6/19 11:40
25

Nó thuần HTML, JS thôi mà nên k phân biệt nền tảng nào. Cho mình xem blog bạn chèn

Xóa nhận xét
Ta là ta 22/6/19 13:21
26

em cài cho blog https://totnhatvina.com/

Xóa nhận xét
Duy Pham 22/6/19 18:41
27

JS vẫn hoạt động. Class dark bạn khai báo thêm trong css hay là có sẵn từ trước.

Xóa nhận xét
Tomorrow 18/6/19 13:54
13

Good post!

Reply Xóa nhận xét
Tomorrow 18/6/19 15:35
14

Làm thế nào để cho dark-mode center đc thớt ơi

Reply Xóa nhận xét
Duy Pham 18/6/19 19:28
15

.dark-mode{margin:0 auto}

Reply Xóa nhận xét
Tomorrow 18/6/19 21:48
16

Blog e để phối lại màu cho ok mất time mà khó vđ. Thank bác

Mà ko biết sao cái nút bên e tắt bật nó ko đc mượt như blog bác nhỉ???

Reply Xóa nhận xét
Duy Pham 18/6/19 22:35
17

Bác đang dùng transition: all .3s ease cho button nên có hiệu ứng vậy. Còn code này em chỉ thêm hiệu ứng chuyển động sang trái phải của button auto thôi.

Reply Xóa nhận xét
NAD 20/6/19 21:37
21

Test phân cấp

Reply Xóa nhận xét
NAD 20/6/19 21:38
22

Phân cấp hay vđ, share cho ae đi thớt ơi

Reply Xóa nhận xét
NAD 20/6/19 21:33
19

Nhận xét này đã bị tác giả xóa.

Reply
NAD 20/6/19 21:36
20

Hình như mình ko làm j thì nút bên phải buổi tối nó cũng tự động bật dark mode? Và nút đấy thừa?

Reply Xóa nhận xét
Duy Pham 20/6/19 22:17
23

Đó là nút auto dark mode. Khi được bật thì tự động đến giờ đặt trước sẽ tự chuyển. Còn khi bật thủ công dark mode bên trái thì nút auto bên phải tự tắt và dark hay light sẽ tự lưu cho tới khi người dùng tự thay đổi tiếp

Reply Xóa nhận xét
Duy... 30/6/19 09:21
28

Chờ ad share cái RC giống Blog đang dùng :v

Reply Xóa nhận xét
NAD 6/7/19 13:40
29

https://www.nguyenanhduy.com/p/binh-loan-moi.html

Bác Duy ơi làm thế nào để nó hiểu đc các dấu xuống dòng trong comments?

Reply Xóa nhận xét
Duy Pham 6/7/19 19:33
30

Trong widget này thì những tag như a, i, br... đều dc loại bỏ nên không có xuống dòng. Widget nên k cần

Reply Xóa nhận xét
NAD 6/7/19 20:04
31

Hừm, bác có thể cải tiến thêm cho e br ko, để e làm page :D

Reply Xóa nhận xét
Duy Pham 6/7/19 21:54
32

Nếu k xoá tag <br/> đi thì khi comment dài và tới giới hạn ngắt lại rơi vào đúng tag này thành <br... chẳng hạn, nó mất thẻ đóng > trông rất “ngố”

Reply Xóa nhận xét
Huy Đinh 9/7/19 09:42
33

Widget "Nhận xét mới" trước đẹp hơn bây giờ bác ạ :D

Reply Xóa nhận xét
Duy Pham 9/7/19 09:48
34

Avatar nó nổi thành ra tách rời widget, sai với triết lý thiết kế :D

Reply Xóa nhận xét
Huy Đinh 10/7/19 11:46
35

Bác có định edit ko ạ? :D

Reply Xóa nhận xét
Duy Pham 10/7/19 16:03
36

Edit cho hết nổi rồi mà

Reply Xóa nhận xét
sphoto 4/8/19 05:28
37

Bác có thể chia sẻ cách đánh số thứ tự comment được không ạ?

Reply Xóa nhận xét
Duy Pham 5/8/19 12:56
38

Bạn xem ở đây https://duy-pham.blogspot.com/2012/05/danh-so-thu-tu-cho-nhan-xet.html

Reply Xóa nhận xét
sphoto 17/8/19 06:10
41

Cách này không áp dụng được nữa bạn ạ.

Reply Xóa nhận xét
Duy Pham 17/8/19 21:28
42

Là do Blogger thay đổi tên id của comment reply nên code trên không còn hoạt động đúng nữa.

Reply Xóa nhận xét
Aurealisa 7/8/19 00:16
39

Thành công, tôi đã thực hiện nó trên blog của mình Aurelia

Reply Xóa nhận xét
Nặc danh 7/8/19 11:17
40

Cái này áp dụng cho wordpress thì sao bạn

Reply Xóa nhận xét
Duy... 10/9/19 20:51
43

Nhận xét này đã bị tác giả xóa.

Reply
Fiat Trịnh Xuân Thọ 26/10/19 18:29
44

Đã làm xong. Cảm ơn bác Duy :)

Ps: nếu có cách thay đổi luôn màu của thanh địa chỉ của trình duyệt khi bật dark-mode thì bác chỉ luôn với nhá. Chúc bác vui vẻ :)

Reply Xóa nhận xét
Duy Pham 27/10/19 20:38
45

Bác chỉ can thiệp dark mode của trình duyệt khi vào cài đặt trình duyệt hoặc cài đặt hệ thống, chứ js ở trang web k can thiệp đâu :)

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 29/10/19 21:30
46

Ý em là như này:
Trên trình duyệt của di động đổi màu Bar theme
<meta content='#CC3278' name='theme-color'/>
<meta content='#CC3278' name='msapplication-navbutton-color'/>
<meta content='#CC3278' name='apple-mobile-web-app-status-bar-style'/>

Mình muốn hỏi liệu có cách nào để làm đổi màu luôn khi dùng thủ thuật dark mode này ? Ví dụ có lệnh điều kiện nào cho cái dark mode làm Bar theme?

Cảm ơn bác. Hihi :)

Reply Xóa nhận xét
Duy Pham 30/10/19 07:37
47

Em k biết vụ bar theme trên trình duyệt di động này. Nếu dùng tag meta kia thay được thì thêm code cho dark mode chuyển chế độ sẽ đổi màu bar theme luôn được đó bác. Để lúc nào em thêm code nhé :)

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 30/10/19 16:30
48

Ok. Hóng bác

Ps: nhớ hồi trước bác Noct có cái thanh đổi màu vui mắt lắm. Bạn nào còn thích thanh đổi màu ấy chịu khó "chế" từ thủ thuật này cũng hay

Reply Xóa nhận xét
Duy Pham 4/11/19 19:29
49

Thử trên iPhone mà safari không thay đổi gì cả bác. Code meta kia giờ cũ rồi hay sao? Không dùng Android nên k biết trên Chrome thế nào.

Xóa nhận xét
Fiat Trịnh Xuân Thọ 5/11/19 12:58
50

Trên Android cũng được, bác cứ chia sẻ đê :D

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 9/11/19 19:14
51

Hình như nhà Táo không cho sửa status bar nưa, thử hoài mà chẳng được.

Mình làm theo:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 24/11/19 21:51
52

Có cái thủ thuật này khi chuyển màu nó chuyển luôn cả ô địa chỉ trình duyệt (trên mobile), gửi đến bác https://www.duetds.com/

PS: Em chưa biết chuyển sang blogspot bằng cách nào

Reply Xóa nhận xét
Duy Pham 26/11/19 13:33
53

Em xem ở đây https://caniuse.com/#feat=meta-theme-color thì thấy không hỗ trợ safari trên ios kia :(

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 26/11/19 21:37
54

Chỉ cần trên Android thôi cũng được mà bác. Hihi.
Bác sớm update nha :)

Reply Xóa nhận xét
Duy Pham 27/11/19 11:20
55

Vừa muộn máy Android test thử thấy khá hay. Bác thêm code này vào phần tag head

<meta content='#ddd' name='theme-color'/>

Rồi thay dùng đoạn js sau:

function auto(){document.body.classList.add('auto');if(new Date().getHours()>21||new Date().getHours()<7){document.body.classList.add('dark');localStorage.setItem('668037dark','true');document.querySelector('meta[name=theme-color]').setAttribute('content','#000')}else{document.body.classList.remove('dark');localStorage.setItem('668037dark','false');document.querySelector('meta[name=theme-color]').setAttribute('content','#ddd')}}function dark(){if(localStorage.getItem('668037dark')=='true'){document.body.classList.add('dark');document.querySelector('meta[name=theme-color]').setAttribute('content','#000')}else{document.body.classList.remove('dark');document.querySelector('meta[name=theme-color]').setAttribute('content','#ddd')}}if(localStorage.getItem('668037auto')=='true'){auto()}else{localStorage.getItem('668037dark')==null?auto():dark()}function toggle(){localStorage.setItem('668037auto',localStorage.getItem('668037auto')=='true'?'false':'true');localStorage.getItem('668037auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('668037auto');localStorage.setItem('668037dark',localStorage.getItem('668037dark')=='true'?'false':'true');dark()}

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 27/11/19 14:33
56

Đã thực hiện xong, đẹp tuyệt. Cảm ơn bác :)

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 17/12/19 11:39
57

Hi bác Duy,
Bác giúp em tí tì ti nhé
Vấn đề 1: Tiêu đề bài viết đã đăng ở dạng VIẾT HOA giờ muốn chuyển sang dạng capitalize
Câu hỏi: Có CSS hay js nào để tiêu đề chuyển sang capitalize không bác
PS: dùng text-transform: capitalize nó không chuyển.

Vấn đề 2: Có cách nào khi cuộn trang web nó chạy theo chiều ngang không bác? Em định làm ở homepage cho nó khác người :D

Cảm ơn bác

Reply Xóa nhận xét
Duy Pham 29/12/19 10:25
58

1. Bác khai báo css kiểu này:


.calss-text{text-transform:lowercase}
.calss-text::first-letter{text-transform:uppercase}


2. Cuộn trang ngang khó chịu lắm bác ơi :(

Reply Xóa nhận xét
Innia 2/1/20 13:36
59

Thật cảm ơn vì anh vẫn còn giữ lại trang blog này. Cảm ơn vì anh vẫn chia sẻ.

Reply Xóa nhận xét
Duy Pham 2/1/20 21:33
60

Vì nó viết về thủ thuật Blogger nên chỉ khi nào Blogger dừng thì nó mới nghỉ :D

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 18/1/20 00:06
61

Mở tiệc mừng tên miền mới đê :D

Reply Xóa nhận xét
Duy Pham 18/1/20 09:56
62

Được bạn Huy tặng bác ơi :D

Reply Xóa nhận xét
hienle 4/2/20 11:09
63

Cảm ơn bạn Duy đã chia sẻ

Reply Xóa nhận xét
Fiat Trịnh Xuân Thọ 12/3/20 15:43
64

Hi bác Duy và anh em,
Mình sử dụng 1 font lạ cho web tuy nhiên có 1 điều khó hiểu đó là nét chữ ở trang index và trang tĩnh thường đậm nét hơn so với trang item cho dù CSS weit-font như nhau.

Ngay cả khi dùng GoogleFont cũng vậy.

Nếu anh em biết cách khắc phục thì chỉ giúp mình vớ nhá.

Cảm ơn anh em nhiều

Ps: xin phép Duy cho mình đăng ở đây câu hỏi chẳng liên quan tới bài viết. Vì ở đây mới có anh em liên quan tới Blogspot và chăm chỉ bàn tán

Reply Xóa nhận xét

Đăng nhận xét

Cancel