ngoaimarina
New member
** Cách thực hiện chế độ tối trong CSS **
**Giới thiệu**
Dark Mode là một xu hướng thiết kế phổ biến đang ngày càng trở nên phổ biến trên các trang web và ứng dụng.Nó có thể dễ dàng hơn trên mắt, đặc biệt là trong điều kiện ánh sáng yếu và nó cũng có thể giúp tiết kiệm thời lượng pin trên các thiết bị có màn hình OLED.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thực hiện chế độ tối trong CSS bằng cách sử dụng truy vấn truyền thông `Prefers-Color-Scheme`.Truy vấn phương tiện này cho phép bạn chỉ định các kiểu khác nhau cho chế độ ánh sáng và tối, để trang web của bạn có thể tự động thích ứng với sở thích của người dùng.
** Bước 1: Xác định các biến CSS **
Bước đầu tiên là xác định một số biến CSS mà chúng tôi sẽ sử dụng để lưu trữ màu sắc cho các kiểu chế độ sáng và tối của chúng tôi.
`` `CSS
:nguồn gốc {
--Body-BG: #FFFFFF;
--Body-Color: #000000;
}
`` `
`: Phần tử giả root` đại diện cho phần tử gốc của tài liệu, đó là phần tử` html`.Điều này có nghĩa là các biến CSS mà chúng tôi xác định ở đây sẽ có sẵn cho tất cả các yếu tố trong tài liệu.
Biến biến `--body-bg` lưu trữ màu nền cho kiểu chế độ ánh sáng của chúng tôi và biến`--body-color` lưu trữ màu văn bản.
** Bước 2: Tạo kiểu chế độ sáng và tối **
Bây giờ chúng tôi đã xác định các biến CSS của chúng tôi, chúng tôi có thể tạo các kiểu chế độ sáng và tối của chúng tôi.
`` `CSS
@Media (thích màu-color-scheme: light) {
thân hình {
Bối cảnh: var (-cơ thể-bg);
Màu sắc: var (-màu cơ thể);
}
}
@Media (thích màu-color-Scheme: Dark) {
thân hình {
Bối cảnh: #000000;
Màu sắc: #FFFFFF;
}
}
`` `
Truy vấn `@media` trong mã này sử dụng truy vấn phương tiện` Prefers-color-Scheme` để chỉ định các kiểu khác nhau cho chế độ sáng và tối.Truy vấn truyền thông 'Prefers-color-scheme` có giá trị của `light` hoặc` dark`, cho thấy bảng màu ưa thích của người dùng.
Truy vấn `@media` đầu tiên áp dụng kiểu chế độ ánh sáng cho phần tử` cơ thể 'khi bảng màu ưa thích của người dùng là `light`.Truy vấn `@media` thứ hai áp dụng kiểu chế độ tối cho phần tử` cơ thể 'khi bảng màu ưa thích của người dùng là `Dark`.
** Bước 3: Kiểm tra kiểu chế độ tối của bạn **
Bây giờ bạn đã xác định các kiểu chế độ tối của mình, bạn có thể kiểm tra chúng bằng cách thay đổi bảng màu của hệ điều hành thành chế độ tối.Nếu bạn đang sử dụng máy Mac, bạn có thể làm điều này bằng cách truy cập ** Tùy chọn hệ thống> Chung> Ngoại hình ** và chọn tùy chọn ** Dark **.Nếu bạn đang sử dụng Windows, bạn có thể thực hiện điều này bằng cách truy cập ** Cài đặt> Cá nhân hóa> Màu sắc ** và chọn tùy chọn ** Dark **.
Khi bạn đã thay đổi bảng màu của hệ điều hành, bạn sẽ thấy trang web của mình tự động chuyển sang chế độ tối.
**Phần kết luận**
Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách thực hiện chế độ tối trong CSS bằng cách sử dụng truy vấn truyền thông `Prefers-Color-Scheme`.Truy vấn phương tiện này cho phép bạn chỉ định các kiểu khác nhau cho chế độ ánh sáng và tối, để trang web của bạn có thể tự động thích ứng với sở thích của người dùng.
Dark Mode là một xu hướng thiết kế phổ biến đang ngày càng trở nên phổ biến trên các trang web và ứng dụng.Nó có thể dễ dàng hơn trên mắt, đặc biệt là trong điều kiện ánh sáng yếu và nó cũng có thể giúp tiết kiệm thời lượng pin trên các thiết bị có màn hình OLED.
Nếu bạn đang tìm cách thêm hỗ trợ Chế độ tối vào trang web của mình, truy vấn phương tiện truyền thông màu-color-scheme` là một cách tuyệt vời để làm điều đó.Nó rất dễ sử dụng và nó cung cấp trải nghiệm người dùng nhất quán trên các thiết bị và hệ điều hành.
=======================================
**How to Implement Dark Mode in CSS**
**Introduction**
Dark mode is a popular design trend that is becoming increasingly popular on websites and apps. It can be easier on the eyes, especially in low-light conditions, and it can also help to save battery life on devices with OLED displays.
In this tutorial, we will show you how to implement dark mode in CSS using the `prefers-color-scheme` media query. This media query allows you to specify different styles for light and dark mode, so your website can automatically adapt to the user's preference.
**Step 1: Define CSS variables**
The first step is to define some CSS variables that we will use to store the colors for our light and dark mode styles.
```css
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
```
The `:root` pseudo-element represents the root element of the document, which is the `html` element. This means that the CSS variables we define here will be available to all elements in the document.
The `--body-bg` variable stores the background color for our light mode style, and the `--body-color` variable stores the text color.
**Step 2: Create light and dark mode styles**
Now that we have defined our CSS variables, we can create our light and dark mode styles.
```css
@media (prefers-color-scheme: light) {
body {
background: var(--body-bg);
color: var(--body-color);
}
}
@media (prefers-color-scheme: dark) {
body {
background: #000000;
color: #FFFFFF;
}
}
```
The `@media` queries in this code use the `prefers-color-scheme` media query to specify different styles for light and dark mode. The `prefers-color-scheme` media query takes a value of either `light` or `dark`, which indicates the user's preferred color scheme.
The first `@media` query applies the light mode style to the `body` element when the user's preferred color scheme is `light`. The second `@media` query applies the dark mode style to the `body` element when the user's preferred color scheme is `dark`.
**Step 3: Test your dark mode styles**
Now that you have defined your dark mode styles, you can test them by changing your operating system's color scheme to dark mode. If you are using a Mac, you can do this by going to **System Preferences > General > Appearance** and selecting the **Dark** option. If you are using Windows, you can do this by going to **Settings > Personalization > Colors** and selecting the **Dark** option.
Once you have changed your operating system's color scheme, you should see your website automatically switch to dark mode.
**Conclusion**
In this tutorial, we showed you how to implement dark mode in CSS using the `prefers-color-scheme` media query. This media query allows you to specify different styles for light and dark mode, so your website can automatically adapt to the user's preference.
Dark mode is a popular design trend that is becoming increasingly popular on websites and apps. It can be easier on the eyes, especially in low-light conditions, and it can also help to save battery life on devices with OLED displays.
If you are looking to add dark mode support to your website, the `prefers-color-scheme` media query is a great way to do it. It is easy to use and it provides a consistent user experience across devices and operating systems.
**Giới thiệu**
Dark Mode là một xu hướng thiết kế phổ biến đang ngày càng trở nên phổ biến trên các trang web và ứng dụng.Nó có thể dễ dàng hơn trên mắt, đặc biệt là trong điều kiện ánh sáng yếu và nó cũng có thể giúp tiết kiệm thời lượng pin trên các thiết bị có màn hình OLED.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thực hiện chế độ tối trong CSS bằng cách sử dụng truy vấn truyền thông `Prefers-Color-Scheme`.Truy vấn phương tiện này cho phép bạn chỉ định các kiểu khác nhau cho chế độ ánh sáng và tối, để trang web của bạn có thể tự động thích ứng với sở thích của người dùng.
** Bước 1: Xác định các biến CSS **
Bước đầu tiên là xác định một số biến CSS mà chúng tôi sẽ sử dụng để lưu trữ màu sắc cho các kiểu chế độ sáng và tối của chúng tôi.
`` `CSS
:nguồn gốc {
--Body-BG: #FFFFFF;
--Body-Color: #000000;
}
`` `
`: Phần tử giả root` đại diện cho phần tử gốc của tài liệu, đó là phần tử` html`.Điều này có nghĩa là các biến CSS mà chúng tôi xác định ở đây sẽ có sẵn cho tất cả các yếu tố trong tài liệu.
Biến biến `--body-bg` lưu trữ màu nền cho kiểu chế độ ánh sáng của chúng tôi và biến`--body-color` lưu trữ màu văn bản.
** Bước 2: Tạo kiểu chế độ sáng và tối **
Bây giờ chúng tôi đã xác định các biến CSS của chúng tôi, chúng tôi có thể tạo các kiểu chế độ sáng và tối của chúng tôi.
`` `CSS
@Media (thích màu-color-scheme: light) {
thân hình {
Bối cảnh: var (-cơ thể-bg);
Màu sắc: var (-màu cơ thể);
}
}
@Media (thích màu-color-Scheme: Dark) {
thân hình {
Bối cảnh: #000000;
Màu sắc: #FFFFFF;
}
}
`` `
Truy vấn `@media` trong mã này sử dụng truy vấn phương tiện` Prefers-color-Scheme` để chỉ định các kiểu khác nhau cho chế độ sáng và tối.Truy vấn truyền thông 'Prefers-color-scheme` có giá trị của `light` hoặc` dark`, cho thấy bảng màu ưa thích của người dùng.
Truy vấn `@media` đầu tiên áp dụng kiểu chế độ ánh sáng cho phần tử` cơ thể 'khi bảng màu ưa thích của người dùng là `light`.Truy vấn `@media` thứ hai áp dụng kiểu chế độ tối cho phần tử` cơ thể 'khi bảng màu ưa thích của người dùng là `Dark`.
** Bước 3: Kiểm tra kiểu chế độ tối của bạn **
Bây giờ bạn đã xác định các kiểu chế độ tối của mình, bạn có thể kiểm tra chúng bằng cách thay đổi bảng màu của hệ điều hành thành chế độ tối.Nếu bạn đang sử dụng máy Mac, bạn có thể làm điều này bằng cách truy cập ** Tùy chọn hệ thống> Chung> Ngoại hình ** và chọn tùy chọn ** Dark **.Nếu bạn đang sử dụng Windows, bạn có thể thực hiện điều này bằng cách truy cập ** Cài đặt> Cá nhân hóa> Màu sắc ** và chọn tùy chọn ** Dark **.
Khi bạn đã thay đổi bảng màu của hệ điều hành, bạn sẽ thấy trang web của mình tự động chuyển sang chế độ tối.
**Phần kết luận**
Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách thực hiện chế độ tối trong CSS bằng cách sử dụng truy vấn truyền thông `Prefers-Color-Scheme`.Truy vấn phương tiện này cho phép bạn chỉ định các kiểu khác nhau cho chế độ ánh sáng và tối, để trang web của bạn có thể tự động thích ứng với sở thích của người dùng.
Dark Mode là một xu hướng thiết kế phổ biến đang ngày càng trở nên phổ biến trên các trang web và ứng dụng.Nó có thể dễ dàng hơn trên mắt, đặc biệt là trong điều kiện ánh sáng yếu và nó cũng có thể giúp tiết kiệm thời lượng pin trên các thiết bị có màn hình OLED.
Nếu bạn đang tìm cách thêm hỗ trợ Chế độ tối vào trang web của mình, truy vấn phương tiện truyền thông màu-color-scheme` là một cách tuyệt vời để làm điều đó.Nó rất dễ sử dụng và nó cung cấp trải nghiệm người dùng nhất quán trên các thiết bị và hệ điều hành.
=======================================
**How to Implement Dark Mode in CSS**
**Introduction**
Dark mode is a popular design trend that is becoming increasingly popular on websites and apps. It can be easier on the eyes, especially in low-light conditions, and it can also help to save battery life on devices with OLED displays.
In this tutorial, we will show you how to implement dark mode in CSS using the `prefers-color-scheme` media query. This media query allows you to specify different styles for light and dark mode, so your website can automatically adapt to the user's preference.
**Step 1: Define CSS variables**
The first step is to define some CSS variables that we will use to store the colors for our light and dark mode styles.
```css
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
```
The `:root` pseudo-element represents the root element of the document, which is the `html` element. This means that the CSS variables we define here will be available to all elements in the document.
The `--body-bg` variable stores the background color for our light mode style, and the `--body-color` variable stores the text color.
**Step 2: Create light and dark mode styles**
Now that we have defined our CSS variables, we can create our light and dark mode styles.
```css
@media (prefers-color-scheme: light) {
body {
background: var(--body-bg);
color: var(--body-color);
}
}
@media (prefers-color-scheme: dark) {
body {
background: #000000;
color: #FFFFFF;
}
}
```
The `@media` queries in this code use the `prefers-color-scheme` media query to specify different styles for light and dark mode. The `prefers-color-scheme` media query takes a value of either `light` or `dark`, which indicates the user's preferred color scheme.
The first `@media` query applies the light mode style to the `body` element when the user's preferred color scheme is `light`. The second `@media` query applies the dark mode style to the `body` element when the user's preferred color scheme is `dark`.
**Step 3: Test your dark mode styles**
Now that you have defined your dark mode styles, you can test them by changing your operating system's color scheme to dark mode. If you are using a Mac, you can do this by going to **System Preferences > General > Appearance** and selecting the **Dark** option. If you are using Windows, you can do this by going to **Settings > Personalization > Colors** and selecting the **Dark** option.
Once you have changed your operating system's color scheme, you should see your website automatically switch to dark mode.
**Conclusion**
In this tutorial, we showed you how to implement dark mode in CSS using the `prefers-color-scheme` media query. This media query allows you to specify different styles for light and dark mode, so your website can automatically adapt to the user's preference.
Dark mode is a popular design trend that is becoming increasingly popular on websites and apps. It can be easier on the eyes, especially in low-light conditions, and it can also help to save battery life on devices with OLED displays.
If you are looking to add dark mode support to your website, the `prefers-color-scheme` media query is a great way to do it. It is easy to use and it provides a consistent user experience across devices and operating systems.
