Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(cn): features/dark-mode translation #19

Merged
merged 2 commits into from
May 27, 2021
Merged

docs(cn): features/dark-mode translation #19

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
18d2f27
docs(cn): features/dark-mode translation
HerbertHe May 27, 2021
4c69708
docs(cn): update features/dark-mode
HerbertHe May 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions features/dark-mode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# Dark Mode
# 夜间模式 {#dark-mode}

Windi CSS has out-of-box Dark Mode support.
Windi CSS 拥有开箱即用的夜间模式支持。

By prefixing the `dark:` variant to the utilities, they will only apply when dark mode is enabled. With the following example, the `Preview` text will be red on the light mode, and green on the dark mode. Try play with it:
通过前缀 `dark:` 可变修饰工具类 (utilities)，这些工具类仅会在夜间模式启用的时候生效。在下面的例子中，`Preview` 文本在日间模式下是红色的，在夜间模式下是绿色的。试试：
HerbertHe marked this conversation as resolved.
Show resolved Hide resolved

<DarkModeSwitch />

<InlinePlayground :input="'text-red-400 dark:text-green-400'" :showCSS="true" :showPreview="true"/>

We have two modes for enabling dark mode, [class mode](#class-mode) and [media query mode](#media-query-mode). By default, `class` mode is enable by default.
我们提供了两种启用夜间模式的方式，[class 模式](#class-mode) 和 [媒体查询模式](#media-query-mode)。默认情况下，启用的是 `class` 模式。

## Class mode
## Class 模式 {#class-mode}

Class mode gives you better controls over when should the dark mode enables.
Class 模式为你提供了更好的支持，控制在哪应该使用夜间模式。

```js
// windi.config.js
Expand All @@ -22,23 +22,23 @@ export default {
}
```

It detects parent element's `class="dark"`, and normally you can apply it on the `html` element to make it affects globally.
它将会侦测父元素的 `class="dark"`，通常你可以将它放置在 `html` 元素上面，这样就可以全局生效了。

```html
<html>
<body>
<!-- Dark mode disabled -->
<!-- 夜间模式不生效 -->
</body>
</html>

<html class="dark">
<body>
<!-- Dark mode enabled -->
<!-- 夜间模式生效 -->
</body>
</html>
```

You can use the following snippet to make the color scheme matches with users' system preference, or write your own logic to manage it.
你可以使用下面的代码片段使 CSS 方案与用户系统表现相匹配，或者你可以自己写逻辑来进行管理。

```js
if (window.matchMedia('(prefers-color-scheme: dark)').matches)
Expand All @@ -47,8 +47,8 @@ else
document.documentElement.classList.add('light')
```

<InlinePlayground
:input="'text-white dark:text-white'"
<InlinePlayground
:input="'text-white dark:text-white'"
:config="{ darkMode: 'class' }"
:showCSS="true"
:showPreview="false"
Expand All @@ -58,9 +58,9 @@ else
:enableConfig="true"
/>

## Media query mode
## 媒体查询模式 {#media-query-mode}

In media query mode, it uses the built-in `@media (prefers-color-scheme: dark)` query from the browser that always matches with the users' system preference.
在媒体查询模式，它使用了浏览器内置的 `@media (prefers-color-scheme: dark)` 查询，总是会与用户的系统表现相匹配。

```js
// windi.config.js
Expand All @@ -70,8 +70,8 @@ export default {
}
```

<InlinePlayground
:input="'text-white dark:text-white'"
<InlinePlayground
:input="'text-white dark:text-white'"
:config="{ darkMode: 'media' }"
:showCSS="true"
:showPreview="false"
Expand All @@ -80,4 +80,3 @@ export default {
:showConfig="true"
:enableConfig="true"
/>