Skip to content
This repository has been archived by the owner on Aug 28, 2024. It is now read-only.

feat: support customize theme #259

Merged
merged 16 commits into from
Nov 8, 2023
Merged

feat: support customize theme #259

merged 16 commits into from
Nov 8, 2023

Conversation

likui628
Copy link
Collaborator

@likui628 likui628 commented Nov 7, 2023

General

closes #95

✏️ Mark the necessary items without changing the structure of the PR template.

1. 抽取公共函数,可以支持不同的框架。

<a-config-provider
    :theme="{
      algorithm: theme.darkAlgorithm,
    }"
  >
    <a-button />
 </a-config-provider>

// 变量使用
import { theme } from 'ant-design-vue';
const { useToken } = theme;
const { token } = useToken();
<n-config-provider :theme-overrides="themeOverrides">
  <my-app />
</n-config-provider>

// 变量使用
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()

2. 工具addCssVarsToHtml函数,将CSS变量值添加到DOM上,方便的引用颜色值

3. 需要设置5种不同的颜色:

- primary色
- info色
- success色
- warning色
- error色

渐变色生成
https://github.com/ant-design/ant-design-colors

// Generate color palettes by a given color
const colors = generate('#1890ff');

// Generate dark color palettes by a given color
const colors = generate('#1890ff', {
  theme: 'dark',
  backgroundColor: '#141414',
});

4. 参考

  1. Naive UI 动态自定义换肤实现
  2. Ant Design Vue - Customize Theme
  3. Naive UI - Customizing theme
  4. Theme Editor
  • Pull request template structure not broken

Type

ℹ️ What types of changes does your code introduce?

👉 Put an x in the boxes that apply

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist

ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules in CONTRIBUTING.

👉 Put an x in the boxes that apply.

  • My code follows the style guidelines of this project
  • Is the code format correct
  • Is the git submission information standard?
  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

@likui628
Copy link
Collaborator Author

likui628 commented Nov 8, 2023

效果图,此次PR目前只做到支持主题换色
image

@likui628 likui628 marked this pull request as ready for review November 8, 2023 10:36
@likui628 likui628 changed the title feat: customize theme feat: support customize theme Nov 8, 2023
@likui628 likui628 merged commit b9d944f into master Nov 8, 2023
@likui628 likui628 deleted the theme branch November 8, 2023 10:54
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

系统支持主题定制
1 participant