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.

Hướng dẫn thủ thuật Blogger, Blogspot

100

Nhận xét
1

Giống iOS 13 quá :D

Reply Xóa nhận xét
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
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
2

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

Reply
3

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

Reply
5

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

Reply Xóa nhận xét
9

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

Reply Xóa nhận xét
10

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

Reply Xóa nhận xét
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
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
24

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

Reply Xóa nhận xét
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
26

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

Xóa nhận xét
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
14

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

Reply Xóa nhận xét
15

.dark-mode{margin:0 auto}

Reply Xóa nhận xét
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
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
21

Test phân cấp

Reply Xóa nhận xét
22

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

Reply Xóa nhận xét
19

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

Reply
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
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
28

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

Reply
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
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
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
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
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
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
35

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

Reply Xóa nhận xét
36

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

Reply Xóa nhận xét
37

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

Reply Xóa nhận xét
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
41

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

Reply Xóa nhận xét
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
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
43

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

Reply
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
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
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
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
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
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
50

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

Reply Xóa nhận xét
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
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
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
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
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
56

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

Reply Xóa nhận xét
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
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
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
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
61

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

Reply Xóa nhận xét
62

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

Reply Xóa nhận xét
63

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

Reply Xóa nhận xét
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
65

Sắp đc năm r, bài mới đi bác

Reply Xóa nhận xét
66

H mới để ý tên miền mới

Reply Xóa nhận xét
Nặc danh 10/4/20 07:48
68

Ad cho mk hỏi làm sao để xoá dấu gạch đứt trong khung cmt vs cả làm sao để font chữ khi mk vào blog bằng điện thoại dùng chế độ máy tính mà chữ nó ko to lên, blog của ad chữ nó ko to lên còn các theme khác hầu hết đều bị

Reply Xóa nhận xét
69

Dấu gạch đứt đó là check lỗi chính tả của trình duyệt, bạn có thể tắt nó ở cài đặt của trình duyệt, vào mục ngôn ngữ.

Để chữ không bị phóng to thì bạn cần có thuộc tính initial-scale=1. Nó thường được khai báo chung như sau <meta content='width=device-width,initial-scale=1' name='viewport'/>

Reply Xóa nhận xét
Nặc danh 12/4/20 05:50
70

Cả 2 vấn đề mk hỏi đều ko đc. Khung comment đó ko pk do trình duyệt, nhiều blog khung cmt ko có, còn cái chữ thì blog mk có sẵn thuộc tính đó r nhưng nó vẫn bị to

Reply Xóa nhận xét
77

Bạn đưa link blog lên đây mình xem lỗi.

Reply Xóa nhận xét
Nặc danh 18/4/20 21:23
83

Nhờ ad, có cách nào ẩn luôn thanh cuộn trong khung cmt ko ad
Link blog: https://www.sinhhocsquad.xyz/

Reply Xóa nhận xét
84

Bạn thử thêm vào css
#commentBodyField{overflow: hidden;}

Xóa nhận xét
Nặc danh 12/4/20 05:55
71

Cho mk hỏi thêm 1 điều nữa là làm sao để ở phần blog1, bài trên trang chủ chỉ hiển thị bài viết của 1 số nhãn nhất định v ad

Reply Xóa nhận xét
72

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

Reply
Nặc danh 13/4/20 13:44
73

Mk thêm vào thì ở trang bài viết nó cũng mất luôn

Reply Xóa nhận xét
74

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

Nặc danh 14/4/20 03:36
76

nó ẩn nhưng phân trang sẽ ko đủ bài viết. Ví dụ cài phân trang 7 bài, 2 bài ko thuộc mấy nhãn đó thì nó ko đẩy bài phía sau lên mà chỉ hiện có 5 bài thôi

Xóa nhận xét
75

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

Reply
78

Trong feeds comments sẽ có id của từng bài viết comment, tiếp tục gọi feed có dạng https://www.blogger.com/feeds/BLOG_ID/posts/default/POST_ID, trong feed này sẽ có tiêu đề bài viết.

Reply Xóa nhận xét
79

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

Reply
80

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

Reply
81

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

Reply
82

Bạn có thể nhập địa chỉ blog vào để test mà.

Reply Xóa nhận xét
85

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

Reply
86

Bác Duy có biết những trang nào liệt kê ra các code, các thẻ dữ liệu trong blogger không.

Reply Xóa nhận xét
87

Mình hay xem trong temp Blogger mẫu. Bạn có thể xem thêm ở đây cho chi tiết https://support.google.com/blogger/answer/47270?hl=en

Reply Xóa nhận xét
88

Cảm ơn nhe, trang đó mình biết rồi. Thiết nghĩ Blogger nên công khai mấy cái này từ A đến Z.

Reply Xóa nhận xét
89

E test thử trên một số máy mới chưa vào bao giờ vào ban ngày nhưng ra giao diện đêm bác ạ

Có cách nào để khi chưa có cache mà trình duyệt nó nhận đc đúng ngày đêm ko bác Duy?

Reply Xóa nhận xét
90

Ví dụ cái

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.duypham.net&tab=desktop

Nó đag nhận theme mặc định của bác ban đầu là dark

Reply Xóa nhận xét
91

Mình xài FF, Chrome, vào blog bác Duy lúc nào cũng skin sáng hết. Mặc dù chế độ auto ON hay OFF.
Hiện giờ là 20h00.

Reply Xóa nhận xét
93

Bạn bật auto rồi qua 22h nó sẽ tối

Reply Xóa nhận xét
92

Ngày đêm dựa vào giờ hệ thống trên máy của trình duyệt, như blog em thì từ 22h đến 7h là giao diện tối. Bác xem lúc test giờ trên máy của trình duyệt là mấy giờ. Có thể chương trình test của bác trình duyệt đang chạy trên máy ảo mà giờ của nó đang là buổi đêm, bên Mỹ chẳng hạn.

Reply Xóa nhận xét
94

Bác Duy này, bác có nắm được cấu trúc template mới b:templateVersion='1.3.0' của Blogger không.
Mình đang muốn tìm hiểu mà còn mù mờ quá.

Reply Xóa nhận xét
95

Từ bản 2 mình ít tìm hiểu về temp nữa. Nhưng mình thấy các câu lệnh cũng k thêm nhiều lắm, một số lệnh được sửa lại ngắn gọn hơn.

Reply Xóa nhận xét
96

Đ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
97

Bạn thêm <Variable default="transparent" description="Background color" name="body.background.color" type="color"/> vào trong <Group description="Body"> để nền khung comments trong suốt nhé

Reply Xóa nhận xét
98

Minh chen vao no thong bao noi co 2 the
body.background.color

Trong theme minh co 2
nen chen o day nhi
















Reply Xóa nhận xét
99

Vậy bạn tìm đến body.background.color và thay giá trị default là transparent

Reply Xóa nhận xét

Đăng nhận xét

Cancel