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.

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

feat: dark palette preview #20281

Merged
merged 116 commits into from
Dec 26, 2019
Merged

feat: dark palette preview #20281

merged 116 commits into from
Dec 26, 2019

Conversation

ycjcl868
Copy link
Contributor

@ycjcl868 ycjcl868 commented Dec 16, 2019

遗留问题

  1. 站点 iframe 里的主题切换(需要改 Bisheng,提供一个 postMessage 通信)
  2. Card grid hover 有白底闪烁
  3. Drawer/Modal 下的 Table 样式,需要单独提供一套

全局主题切换

运行站点前,先执行一下 node scripts/generateColorLess.js,使用 less 模拟 webpack 模块依赖 resolve,编译出一份 dark.css

然后切换直接动态加 dark.css

dark

局部主题切换

不使用此方案,因为在 Modal、Drawer 等组件,脱离局部容器展示,主题将不 work

  1. 启动 site 前,先 npm run dist 下,编译出 antd.dark.css
  2. 在官网全局样式中引入
// static/common.less
// 用 data-* 属性是为了将 theme 样式优先级 < 容器定制样式
[data-theme='dark'] {
  @import (less) '../../../dist/antd.dark.css';
}
  1. 点击切换,设置局部的容器 div/section 属性为 data-theme={theme},添加对应的样式
// demo.less
.code-box {
  &[data-theme='dark'] {
    // dark less vars
    @import (less) '../../../components/style/themes/dark.less';
    .code-box-title {
      &,
      a {
        background: @component-background;
        color: @text-color;
      }
    }
  }
}

就可以进行局部切换:

switch

不好的点

  1. 官网 dev 调试时,无法调试暗色主题。(好像不是特别强需求)
  2. 开发和部署官网时,得先编译 lib、再编译 dist,最后再 run site,因为依赖了 distlib 目录。
  3. Modal、Drawer 不 work

期待解决

  1. 局部切换先用这个方案,整站切换时换 @chenshuai2144 的 webpack 插件。

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@netlify
Copy link

netlify bot commented Dec 16, 2019

Deploy preview for ant-design ready!

Built with commit 090f258

https://deploy-preview-20281--ant-design.netlify.com

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 18, 2019

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 090f258:

Sandbox Source
antd reproduction template Configuration

@codecov
Copy link

codecov bot commented Dec 18, 2019

Codecov Report

Merging #20281 into 4.0-prepare will decrease coverage by 0.02%.
The diff coverage is 66.66%.

Impacted file tree graph

@@               Coverage Diff               @@
##           4.0-prepare   #20281      +/-   ##
===============================================
- Coverage        97.57%   97.54%   -0.03%     
===============================================
  Files              295      295              
  Lines             6771     6773       +2     
  Branches          1869     1871       +2     
===============================================
  Hits              6607     6607              
- Misses             164      166       +2
Impacted Files Coverage Δ
components/progress/Steps.tsx 87.5% <66.66%> (-12.5%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update abf215a...090f258. Read the comment docs.

@zombieJ
Copy link
Member

zombieJ commented Dec 18, 2019

作为临时方案我觉得是足够了

@ycjcl868
Copy link
Contributor Author

run site / start 前就是得先 run compilerun dist

@zombieJ
Copy link
Member

zombieJ commented Dec 19, 2019

package.json 里更新一下 site,让它做一下 dark 的编译工作。

@zombieJ
Copy link
Member

zombieJ commented Dec 26, 2019

加一个暗色主题的 bundle size 检测:https://github.com/ant-design/ant-design/blob/4.0-prepare/package.json#L255

@ycjcl868 ycjcl868 added 4.x In Ant Design 4.0 style labels Dec 26, 2019
@ycjcl868 ycjcl868 changed the title [WIP] feat dark palette preview feat dark palette preview Dec 26, 2019
@ycjcl868 ycjcl868 changed the title feat dark palette preview feat: dark palette preview Dec 26, 2019
@ycjcl868 ycjcl868 merged commit 1d9bb93 into 4.0-prepare Dec 26, 2019
@ycjcl868 ycjcl868 deleted the feat-dark-palette branch December 26, 2019 08:13
@pr-triage pr-triage bot added the PR: merged label Dec 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4.x In Ant Design 4.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants