Cách triển khai các chế độ ánh sáng hoặc tối trong CSS

Đặc điểm kỹ thuật CSS đang phát triển. Quá trình triển khai các tính năng mới trong CSS rất phức tạp, nhưng phiên bản đơn giản hóa là nhóm làm việc CSS quyết định các yếu tố mới sẽ được thêm vào thông số kỹ thuật. Sau đó, tùy thuộc vào các trình duyệt để triển khai các yếu tố mới này và các trình duyệt chọn thứ tự để triển khai chúng, đó là lý do tại sao bây giờ chúng ta không có sự hỗ trợ cho các tính năng mới. Mặc dù đôi khi điều này có thể gây khó chịu, nhưng đó là một cách tốt hơn nhiều để làm điều đó hơn so với các trình duyệt triển khai đầy đủ thông số kỹ thuật, như chúng ta đã thấy trong những ngày đầu của web. Nếu bạn lo lắng về trang web của mình hoạt động với khả năng đầy đủ của nó, hãy nhập ngũ hỗ trợ hỗ trợ web hosting dịch vụ.

Tất cả âm thanh này giống như quá nhiều công việc? Giữ mọi thứ đơn giản với một người tạo ra trang web .

Nhóm làm việc CSS được tạo thành từ các thành viên từ tất cả các nhà cung cấp trình duyệt chính và các công ty công nghệ khác như Apple và Adobe. Apple, gần đây đã ra mắt phiên bản MacOS mới, muốn một cách để phát hiện chế độ Dark Dark mới Snazzy trong trình duyệt. Để thực hiện việc này, Apple đã đẩy một khuyến nghị cho đặc điểm kỹ thuật cho Truy vấn phương tiện cấp 5 mới.

 @Media (thích sơ đồ màu: ánh sáng | tối)
{...} 

Sử dụng truy vấn phương tiện này, chúng ta có thể phát hiện nếu người dùng hiện đang sử dụng chế độ ánh sáng hoặc tối trong HĐH. Hiện tại, điều này chỉ được hỗ trợ bởi Safari Technology Preview 69 trở lên, nhưng các trình duyệt khác không nên bị xa phía sau.

• Hướng dẫn của người thiết kế web về Phương pháp CSS

Để kiểm tra điều này, bạn sẽ cần được nâng cấp lên Mojave 10.14 (MacOS) và đã chọn hình xuất hiện tối trong Tùy chọn hệ thống. Có một vài cách chúng ta có thể sử dụng truy vấn phương tiện mới này để triển khai các chủ đề khác nhau. Chúng tôi sẽ khám phá một vài trong số họ bây giờ trong hướng dẫn này.

01. Thiết lập trang

Để bắt đầu, chúng ta cần tạo một số yếu tố HTML thành kiểu, vì vậy chúng ta sẽ bắt đầu bằng cách tạo một cây bút mới trên Codepen và thêm một số yếu tố. Chúng tôi sẽ thêm một container cho nội dung của chúng tôi, để trung tâm nó, và một số tiêu đề và văn bản. Chúng tôi sẽ đặt CSS để sử dụng Sass để sử dụng lồng nhau trong CSS.

 & lt; div class = "container container" & gt;
& lt; h1 & gt; tiêu đề một & lt; / h1 & gt;
& lt; h2 & gt; nhóm hai & lt; / h2 & gt;
& lt; hr & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt; 

02. yếu tố cơ bản theo phong cách

Tiếp theo chúng ta sẽ thêm một số kiểu cơ bản và bao gồm một số phông chữ từ Google để làm cho trang của chúng tôi trông đẹp hơn một chút. Chúng tôi sẽ tạo kiểu tất cả các yếu tố cơ bản của chúng tôi, áp dụng kích thước phông chữ mới, màu sắc và phông chữ.

 cơ thể {
Font-Family: 'Merriweather', Serif;
Màu nền: #EDEDED;
Màu sắc: # 212121;
Đệm: 1.618rem;
chiều cao dòng: 1.618;
Kích thước phông chữ: 16px;
} 

03. Container phong cách

Tiếp theo chúng tôi sẽ tạo kiểu container của chúng tôi để tạo nội dung một chiều dài dòng thoải mái để đọc. Chúng tôi cũng sẽ thêm một màu nền và thả bóng. Để củng cố hộp nội dung trong trang, chúng tôi sẽ sử dụng từ khóa 'tự động' trên các giá trị bên trái và bên phải của Thuộc tính.

 .Content-Container {
Đệm: 1.618rem 3.236rem;
chiều rộng tối đa: 48,54rem;
KHAI THÁC: 3.236REM AUTO;
Màu nền: #fff;
Box-Shadow: 0 0 12px RGBA 6px (0,0,0,0.05);
bán kính biên giới: .269666667rem;
} 

04. Thêm màu tô sáng

Hầu hết các trang web sử dụng màu sắc ở đâu đó, và tại thời điểm chúng ta chỉ có người da trắng và màu xám, vì vậy bây giờ hãy chọn một màu tô sáng và tạo một phong cách để áp dụng màu này. Chúng tôi sẽ áp dụng màu bằng thẻ SPAN và sẽ sử dụng nó để làm nổi bật một cái gì đó trong nội dung của chúng tôi.

 & lt; span class = "văn bản - alpha" & gt; lorem ipsum & lt; / span & gt;
.text - alpha {
Màu sắc: # C3423F;
} 

05. Triển khai truy vấn phương tiện truyền thông

Bây giờ chúng ta có một trang với một số kiểu cơ bản, hãy xem cách chúng ta có thể triển khai truy vấn phương tiện. Chúng ta hãy bao gồm nó và bắt đầu ghi đè một số kiểu dáng của chúng tôi. Chúng ta sẽ bắt đầu với các phong cách cơ thể.

 @Media (thích sơ đồ màu: tối)
Đồn là
thân hình {
Màu nền: # 111;
Không thể
} 

06. Ghi đè các kiểu còn lại

Bây giờ chúng ta có thể thấy truy vấn phương tiện đang hoạt động và màu nền cơ thể của chúng ta đã thay đổi, chúng ta cần ghi đè tất cả các kiểu còn lại của chúng tôi.

 .Content-Container
Đồn là
màu trắng;
Màu nền: # 212121;
Không thể
.text - alpha {
Màu sắc: # 50A8D8;
} 

07. Bảo trì

Mặc dù những gì chúng ta vừa thực hiện hoạt động hoàn toàn tốt cho bản demo của chúng tôi và có thể được duy trì trên các trang web nhỏ hơn, phương pháp này sẽ là một cơn ác mộng để quản lý trong một dự án lớn hơn, với rất nhiều yếu tố khác nhau mà tất cả đều cần ghi đè. Chúng tôi cũng đang sử dụng nhiều laser trong ví dụ của chúng tôi ở trên, trong khi một hệ thống lớn có thể yêu cầu tính đặc hiệu hơn để nhắm mục tiêu tất cả các yếu tố.

08. Thực hiện một cách tiếp cận khác

Vậy làm thế nào khác chúng ta có thể giải quyết vấn đề? Hãy xem các bộ lọc CSS. Một trong những giá trị chúng ta có thể sử dụng trên các bộ lọc CSS là 'Đảo ngược', để chúng ta chỉ có thể áp dụng điều này với HTML và đảo ngược tất cả các màu, cho chúng ta một 'chế độ tối'.

 @Media (thích sơ đồ màu: tối) {
html {
Bộ lọc: Đảo ngược (100%);
Không thể
} 

09. Thêm hình ảnh

Mặc dù phương thức bộ lọc hoạt động với nội dung chúng ta có trong tài liệu của chúng tôi nhưng nó vẫn không tuyệt vời - ví dụ, bóng hộp của chúng tôi cũng đã đảo ngược, trông khá lạ. Chúng tôi đã mất quyền kiểm soát các phong cách, trở thành một vấn đề thậm chí còn lớn hơn khi bạn có nền màu. Chúng tôi cũng có một vấn đề hoàn toàn mới để xem xét khi hình ảnh có liên quan. Hãy xem những gì xảy ra khi chúng ta thêm một hình ảnh vào trang của chúng tôi.

10. Sử dụng thuộc tính tùy chỉnh

Các phương pháp chúng tôi đã khám phá cho đến nay hoặc khiến chúng tôi mất kiểm soát các kiểu hoặc yêu cầu bảo trì nhiều để đảm bảo mọi thứ được cập nhật ở chế độ tối. Có một cách khác chúng ta có thể tiếp cận điều này: chúng ta có thể sử dụng các thuộc tính tùy chỉnh để xác định màu sắc của chúng tôi và sau đó ghi đè chúng bằng truy vấn phương tiện.

11. Tạo thuộc tính tùy chỉnh

Để sử dụng các thuộc tính tùy chỉnh, chúng tôi xác định chúng ở đầu CSS của chúng tôi bên trong ' :nguồn gốc ' thành phần. Phần tử gốc có phạm vi tương tự như HTML sẽ có sẵn trên toàn cầu. Chúng ta cần quyết định tên biến và xác định giá trị của chúng.

: root {
--Background-Color: #ededed;
--Page-Background: #fff;
--Text-Color: # 212121;
--color-alpha: # C3423F;
} 

12. Áp dụng các thuộc tính tùy chỉnh của chúng tôi

Bây giờ chúng tôi có một số thuộc tính tùy chỉnh được xác định, chúng tôi có thể sử dụng chúng trong CSS của chúng tôi. Chúng ta sẽ bắt đầu với cơ thể và áp dụng nền và màu văn bản. Để sử dụng một thuộc tính tùy chỉnh, chúng tôi sử dụng ' var (- Tên tài sản tùy chỉnh) 'Cú pháp.

 cơ thể {
Màu nền: var (- màu nền);
Màu sắc: var (- màu văn bản);
} 

13. Áp dụng các thuộc tính còn lại

Sử dụng cùng một phương thức, chúng ta cũng có thể cập nhật 'màu nền' của vùng chứa của chúng tôi và 'màu' của chúng tôi ' Text-Alpha. 'Lớp để sử dụng thuộc tính tùy chỉnh của chúng tôi. Tất cả các màu trong trang của chúng tôi hiện được kiểm soát bằng cách sử dụng các thuộc tính tùy chỉnh.

 .Content-Container {
Màu nền: var (- trang nền);
Không thể
.text - alpha {
Màu sắc: var (- màu-alpha);
} 

14. Thêm lại truy vấn phương tiện truyền thông

Bây giờ chúng ta có thể thêm lại truy vấn phương tiện, nhưng lần này chúng ta có thể ghi đè các giá trị thuộc tính tùy chỉnh bên trong nó. Chúng tôi sẽ đặt ngay quyền này sau định nghĩa gốc gốc và bên trong Truy vấn phương tiện, giờ đây chúng ta có thể chỉ cần chọn các giá trị mới cho tất cả các thuộc tính tùy chỉnh màu của chúng tôi.

 @Media (thích sơ đồ màu: tối) {
:nguồn gốc {
- Màu sắc -Background: # 111;
--Page-Background: # 212121;
--Text-Color: #ededed;
- màu-alpha: # 50A8D8;
Không thể
} 

15. Kiểm soát hoàn toàn

Thuộc tính tùy chỉnh cung cấp cho chúng tôi quyền kiểm soát hoàn toàn để chọn màu sắc và các thuộc tính khác mà chúng tôi thay đổi và sử dụng. Hãy cập nhật bóng hộp trên bộ chứa trang của chúng tôi để làm cho nó ít trong suốt hơn khi sử dụng chế độ tối. Để làm điều này, chúng ta cần tạo một thuộc tính tùy chỉnh mới cho bóng trang.

: root {
...
--Page-Shadow: 0 0 12px 6px RGBA
(0,0,0,0.05);
} 

16. Áp dụng bóng

Bây giờ chúng ta đã tạo một thuộc tính tùy chỉnh khác, chúng ta cần áp dụng nó vào phần tử chính xác trên trang. Sau đó chúng ta có thể ghi đè giá trị bên trong phần tử gốc của chúng tôi để giảm độ trong suốt.

 @Media (thích sơ đồ màu: tối) {
:nguồn gốc {
...
--Page-Shadow:
0 0 12px 6px RGBA (0,0,0,0,33)
Được;
Không thể
Không thể
.Content-container {
...
Box-Shadow: var (- bóng trang);
} 

17. Thêm một hình ảnh

Bây giờ hãy thêm một hình ảnh trở lại nội dung của chúng tôi, sau đó chúng ta có thể thêm một số kiểu cơ bản để nổi hình ảnh bên cạnh nội dung.

 IMG {
Chiều rộng: 100%;
Chiều cao: Tự động;
float: trái;
Độ rộng tối đa: 300px;
lề bên phải: 1.618rem;
Biên độ dưới đáy: 1.618rem;
} 

Như chúng ta có thể thấy, vì chúng tôi không sử dụng bất kỳ bộ lọc nào, hình ảnh không bị thay đổi giữa hai chủ đề.

18. Thêm nhiều thành phần

Bây giờ chúng tôi đã có các thuộc tính tùy chỉnh của chúng tôi, chúng tôi có thể tiếp tục thêm các phần tử vào trang và tạo kiểu cho chúng bằng các biến của chúng tôi. Hãy tạo một lớp nút và thêm một nút vào trang của chúng tôi.

 .Button {
Hiển thị: Inline-Flex;
Font-Family: Kế thừa;
Màu nền: var (- màu-alpha);
Màu sắc: var (- màu văn bản);
Đệm: 1.618rem 3.236rem;
Biên giới: 0 Không có;
bán kính biên giới: 0,25rem;
Trang trí văn bản: Không có;
Không thể

19. Tạo kiểu di chuột

Sử dụng các biến tương tự, chúng ta cũng có thể tạo một kiểu di chuột có thể được sử dụng cho cả hai chủ đề. Để đạt được điều này, chúng tôi sẽ đảo ngược màu sắc khi người dùng dao động qua nút và chuyển các thuộc tính đó để làm cho trải nghiệm ít gây nhiễu.

 .Button {
...
Chuyển đổi: Màu nền 150ms,
màu 150ms;
& amp;: di chuột {
Màu nền: var (- màu văn bản);
Màu sắc: var (- màu-alpha);
Không thể
} 

20. Tạo nút Thuộc tính tùy chỉnh

Thuộc tính tùy chỉnh có cùng phạm vi như các phần tử CSS thông thường; Điều này có nghĩa là chúng ta có thể ghi đè chúng bằng một bộ chọn cụ thể hơn. Chúng tôi có thể tận dụng lợi thế này và tạo một số biến có phạm vi vào nút của chúng tôi.

 .Button {
--Button-Background: var (- màu-alpha);
--Button-Text: var (- màu nền);
Màu nền: var (- nút nền);
màu: var (- văn bản nút);
...
} 

21. Sử dụng phạm vi.

Chúng ta có thể sử dụng phạm vi này để tạo các kiểu khác nhau và các tương tác di chuột để biết nút của chúng tôi trong các chủ đề tối và sáng. Chúng ta có thể thay đổi giá trị của các biến của chúng ta dựa trên truy vấn phương tiện hoặc trạng thái của phần tử, thay vì lặp lại thuộc tính bằng một giá trị mới như chúng ta bình thường.

 .Button {
...
& amp;: di chuột {
--Button-Background: # AE3937;
@Media (thích sơ đồ màu: tối) {
--Button-Background: # 2E98D1;
--Button-Text: var (- Bối cảnh-
màu sắc);
Không thể
Không thể
Không thể

Làm việc trên một bản dựng với một đội? Giữ quá trình của bạn gắn kết với sự tốt đẹp lưu trữ đám mây .

Bài viết này ban đầu được xuất bản trong số 283 của Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . Mua số 283. hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

• Bắt đầu với nghệ thuật CSS
• 12 tài nguyên hoạt hình CSS tuyệt vời
• Bạn nên sử dụng khung CSS nào?