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.
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:
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 :(
Đ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
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.
Đó 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
Ý 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?
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é :)
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
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
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ị
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'/>
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
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
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.
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.
Đ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
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é
Chào bác Duy, web của mình các <div id=... và các <class=... lung tung beng cả Duy cho mình hỏi thứ tự id và class nên sắp xếp ra sao? PS: đừng xúi mình hỏi Google vì mình có đọc nhưng chẳng hiểu gì
Mất đêm qua và tới giờ mới tạm ổn. Vui ghe. Nhờ lò mò làm mà hiểu ra vài thứ. PS: - Xin được dùng mấy ý tưởng trong template của bác Duy :D, công nhận nhanh gọn và....thông minh :D
Thường thì em sắp xếp theo thứ tự cái nào xuất hiện trước thì đưa lên trước. Chọn class khi nó xuất hiện nhiều lần, chọn id nếu nó chỉ xuất hiện 1 lần. Thuộc tính bên trong mỗi class, id cũng sắp xếp theo thứ tự...
Nói chung thì nó là phong cách riêng mỗi người nữa, làm nhiều thì tự nhiên sẽ ra cách mà mình cảm thấy thuận tiện và dễ bảo dưỡng sau này nữa.
Ngoài ra có cả cách đặt tên class, id theo quy luật để phù hợp với làm việc team. Em thì đang đặt theo ngẫu hứng :D
103
Nhận xét