Add dark mode #64

CLDXiang · 2021-02-09T10:32:43Z

fix #46

新增

右上角新增一个 moon 按钮作为深色模式的 Swticher（快捷键 Ctrl+D，覆盖了 Chrome 添加书签的快捷键）
依照 TailwindCSS 官方文档中 darkMode 引入的实现方式做了这些事：
- public/index.html 的 <head> 中增加了一段脚本，从 localStorage 或系统默认深色模式配置初始化页面深色模式状态
- ~~darkMode Switcher 的 dispatch 逻辑中，在用户主动触发切换时写入 localStorage 并切换当前 document 的 dark 类名~~
- 在 store 中引入了 useDarkMode Hook，在 store 中进行管理，第一次进入应用会继承系统深色模式设定。
- 用户触发切换深色模式时，会随 store.state 写入 localStorage 并切换当前 document 的 dark 类名
现在可以通过按照 TailwindCSS 做法在元素类名前加 dark: 配置深色模式样式
使用 TailwindCSS 基础色板修改了绝大多数元素配色，以下两部分有意暂时未做修改（如果其他部分未适配深色模式说明是我遗漏了）：
- ~~“Buy me a coffee” Modal，因为有浅色底二维码图片，如果需要的话需要另外弄一张深色底二维码图片再进行适配~~
- 涉及到 logo 和主要按钮使用的紫罗兰色，在深色模式下看起来也不错，所以没有修改颜色

额外工作

添加了 git eol 配置以兼容 windows 开发环境
在 .vscode/settings.json 添加了 "css.validate": false，因为本项目引入了 TailwindCSS，在 TailwindCSS 官方插件文档中建议去掉原生的 CSS 检查以支持如 @apply 等语法

待讨论

是否需要快捷键？
页面深色模式元素配色如何选取？需要专门设计一下色板吗？

vercel · 2021-02-09T10:32:47Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/kaiyiwing/qwerty-learner/3b4huocrr
✅ Preview: https://qwerty-learner-git-fork-cldxiang-feat-dark-mode.kaiyiwing.vercel.app

chengluyu · 2021-02-09T10:58:13Z

感谢您的贡献，我们会在合并完现在两个高优先级 PR 后再来仔细处理这个 PR。

我建议安排一个快捷键，因为其他按钮也都有快捷键。

关于色板的选取，可以参考《8 Tips for Dark Theme Design》这篇文章里的规则。

CLDXiang · 2021-02-09T14:23:49Z

配色没有完全按照《8 Tips for Dark Theme Design》中的建议做，原因是 TailwindCSS 自带色板在不做扩展的情况下有些难以满足其中诸如对比度等要求，作为深色模式初稿我还是暂时先使用 TailwindCSS 提供的配色方案以保证配色的协调性。

sdu-gyf

would you like to remove the empty file src/components/Modals/index.module.css ?

RealKai42

未适配 Donate 界面
Donate 界面通过点击 Footer 的咖啡图标弹出

CLDXiang · 2021-02-09T15:08:13Z

would you like to remove the empty file src/components/Modals/index.module.css ?

fixed

CLDXiang · 2021-02-09T15:11:05Z

未适配 Donate 界面
Donate 界面通过点击 Footer 的咖啡图标弹出

@Kaiyiwing 在 PR comment 中有说明，或许需要提供深色背景二维码图片再进行适配

RealKai42 · 2021-02-09T15:20:33Z

未适配 Donate 界面
Donate 界面通过点击 Footer 的咖啡图标弹出

@Kaiyiwing 在 PR comment 中有说明，或许需要提供深色背景二维码图片再进行适配

我简单查了一下，深色的二维码识别有问题，所以我觉得可以暂时将 Donate 其他部分适配深色，暂不处理二维码？

CLDXiang · 2021-02-09T15:27:59Z

未适配 Donate 界面
Donate 界面通过点击 Footer 的咖啡图标弹出

@Kaiyiwing 在 PR comment 中有说明，或许需要提供深色背景二维码图片再进行适配

我简单查了一下，深色的二维码识别有问题，所以我觉得可以暂时将 Donate 其他部分适配深色，暂不处理二维码？

ok，我稍后弄一下

…earner into feat-dark-mode

sdu-gyf · 2021-02-09T16:24:12Z

目前您的 pr 基于的分支应该落后于 dev 分支了，麻烦您重新 pull 一下，感谢！

sdu-gyf · 2021-02-09T16:24:55Z

目前您的 pr 基于的分支应该落后于 dev 分支了，麻烦您重新 pull 一下，感谢！

我们刚在 dev 分支进行了一次更新，所以会出现 Conflicting file

RealKai42 · 2021-02-09T16:26:56Z

目前您的 pr 基于的分支应该落后于 dev 分支了，麻烦您重新 pull 一下，感谢！

我们刚在 dev 分支进行了一次更新，所以会出现 Conflicting file

这次更新有点大，我建议让 @chengluyu 一起进行 merge吧

src/pages/Typing/hooks/useSwitcherState.ts

sdu-gyf · 2021-02-09T16:29:23Z

目前您的 pr 基于的分支应该落后于 dev 分支了，麻烦您重新 pull 一下，感谢！

我们刚在 dev 分支进行了一次更新，所以会出现 Conflicting file

这次更新有点大，我建议让 @chengluyu 一起进行 merge吧

好的。

RealKai42 · 2021-02-09T16:40:28Z

@CLDXiang 刚刚给您 Github 预留的邮箱发了邀请，如果有兴趣欢迎加入我们

CLDXiang · 2021-02-09T17:24:02Z

@CLDXiang 刚刚给您 Github 预留的邮箱发了邀请，如果有兴趣欢迎加入我们

嗯嗯，这个项目挺好玩的，但我似乎没有收到邮件

RealKai42 · 2021-02-09T17:30:37Z

这个 pr 由我在负责 merge 到 dev 了
所以麻烦改成非 draft 吧，对 dark mode 的后续改进可以作为新的 pr

CLDXiang · 2021-02-09T17:32:27Z

这个 pr 由我在负责 merge 到 dev 了
所以我将它改成非 draft pr 了

ok，那我就先不动这个 branch 了？dev 新更新的部分也需要加上深色样式

RealKai42 · 2021-02-09T17:33:10Z

@CLDXiang 刚刚给您 Github 预留的邮箱发了邀请，如果有兴趣欢迎加入我们

嗯嗯，这个项目挺好玩的，但我似乎没有收到邮件

我刚刚重新发送了一下到 cldxiang@qq.com

CLDXiang added 2 commits February 9, 2021 17:37

chore(config): 完善 eol 配置以支持 win 开发环境

d0bb377

feat(darkMode): allow switch to darkMode

7329016

vercel bot deployed to Preview February 9, 2021 10:32 View deployment

chengluyu added Area: User Interface Animation, elements, inputs, layout, etc. Priority: Medium Considered to be average priority. labels Feb 9, 2021

vercel bot deployed to Preview February 9, 2021 12:02 View deployment

vercel bot deployed to Preview February 9, 2021 12:13 View deployment

CLDXiang added 2 commits February 9, 2021 20:25

feat(darkMode): add keyboard shortcut

4732b83

feat(darkMode): 完成深色模式基本配色

b9864f4

CLDXiang force-pushed the feat-dark-mode branch from 4514739 to b9864f4 Compare February 9, 2021 14:10

vercel bot deployed to Preview February 9, 2021 14:10 View deployment

CLDXiang marked this pull request as ready for review February 9, 2021 14:30

chengluyu added Priority: High Considered to be high priority. and removed Priority: Medium Considered to be average priority. labels Feb 9, 2021

sdu-gyf suggested changes Feb 9, 2021

View reviewed changes

fix(darkMode): remove useless file

b2a4245

RealKai42 requested changes Feb 9, 2021

View reviewed changes

vercel bot deployed to Preview February 9, 2021 15:06 View deployment

feat(dark mode): 增加图标切换

a42ac81

vercel bot deployed to Preview February 9, 2021 15:27 View deployment

CLDXiang added 2 commits February 10, 2021 00:05

feat(darkMode): add darkMode to Donate

f3e6ddd

Merge branch 'feat-dark-mode' of https://github.com/CLDXiang/qwerty-l…

f6ca0a0

…earner into feat-dark-mode

vercel bot deployed to Preview February 9, 2021 16:07 View deployment

CLDXiang requested review from RealKai42 and sdu-gyf February 9, 2021 16:07

sdu-gyf approved these changes Feb 9, 2021

View reviewed changes

CLDXiang requested a review from sdu-gyf February 9, 2021 16:11

sdu-gyf suggested changes Feb 9, 2021

View reviewed changes

src/pages/Typing/hooks/useSwitcherState.ts Show resolved Hide resolved

src/pages/Typing/hooks/useSwitcherState.ts Outdated Show resolved Hide resolved

Merge branch 'dev' into feat-dark-mode

4a2d4d8

vercel bot deployed to Preview February 9, 2021 17:22 View deployment

CLDXiang changed the base branch from master to dev February 9, 2021 17:24

CLDXiang marked this pull request as draft February 9, 2021 17:25

fix(PronunciationSwitcher): fix typo

f7ab753

CLDXiang marked this pull request as ready for review February 9, 2021 17:32

vercel bot deployed to Preview February 9, 2021 17:39 View deployment

RealKai42 mentioned this pull request Feb 9, 2021

项目进展 #1 #42

Closed

7 tasks

CLDXiang added 2 commits February 10, 2021 02:55

refactor(darkMode): move darkMode to AppState

d299fb4

feat(darkMode): add dark mode to Gallery

f33aae5

vercel bot deployed to Preview February 9, 2021 19:28 View deployment

sdu-gyf approved these changes Feb 9, 2021

View reviewed changes

RealKai42 merged commit f33aae5 into RealKai42:dev Feb 10, 2021

chengluyu mentioned this pull request Feb 10, 2021

feat: 希望加入深色模式, 照顾暗黑风VS Code用户的视觉体验 #46

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dark mode #64

Add dark mode #64

CLDXiang commented Feb 9, 2021 •

edited

vercel bot commented Feb 9, 2021 •

edited

chengluyu commented Feb 9, 2021 •

edited

CLDXiang commented Feb 9, 2021

sdu-gyf left a comment

RealKai42 left a comment

CLDXiang commented Feb 9, 2021

CLDXiang commented Feb 9, 2021

RealKai42 commented Feb 9, 2021

CLDXiang commented Feb 9, 2021

sdu-gyf commented Feb 9, 2021

sdu-gyf commented Feb 9, 2021

RealKai42 commented Feb 9, 2021

sdu-gyf commented Feb 9, 2021

RealKai42 commented Feb 9, 2021

CLDXiang commented Feb 9, 2021

RealKai42 commented Feb 9, 2021 •

edited

CLDXiang commented Feb 9, 2021

RealKai42 commented Feb 9, 2021 •

edited

Add dark mode #64

Add dark mode #64

Conversation

CLDXiang commented Feb 9, 2021 • edited

新增

额外工作

待讨论

vercel bot commented Feb 9, 2021 • edited

chengluyu commented Feb 9, 2021 • edited

CLDXiang commented Feb 9, 2021

sdu-gyf left a comment

Choose a reason for hiding this comment

RealKai42 left a comment

Choose a reason for hiding this comment

CLDXiang commented Feb 9, 2021

CLDXiang commented Feb 9, 2021

RealKai42 commented Feb 9, 2021

CLDXiang commented Feb 9, 2021

sdu-gyf commented Feb 9, 2021

sdu-gyf commented Feb 9, 2021

RealKai42 commented Feb 9, 2021

sdu-gyf commented Feb 9, 2021

RealKai42 commented Feb 9, 2021

CLDXiang commented Feb 9, 2021

RealKai42 commented Feb 9, 2021 • edited

CLDXiang commented Feb 9, 2021

RealKai42 commented Feb 9, 2021 • edited

CLDXiang commented Feb 9, 2021 •

edited

vercel bot commented Feb 9, 2021 •

edited

chengluyu commented Feb 9, 2021 •

edited

RealKai42 commented Feb 9, 2021 •

edited

RealKai42 commented Feb 9, 2021 •

edited