fix: Set site h tag style in dark mode (#26332)

* add site h tag color

* #000 -> @black

* empty demo h3 -> h4
This commit is contained in:
llwslc 2020-08-22 15:24:44 +08:00 committed by GitHub
parent f4f5b633ff
commit 06b7a7aed9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 21 deletions

View File

@ -99,9 +99,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
<div <div
class="config-provider" class="config-provider"
> >
<h3> <h4>
Select Select
</h3> </h4>
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-single ant-select-show-arrow"
style="width:200px" style="width:200px"
@ -159,9 +159,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
</span> </span>
</span> </span>
</div> </div>
<h3> <h4>
TreeSelect TreeSelect
</h3> </h4>
<div <div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:200px" style="width:200px"
@ -219,9 +219,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
</span> </span>
</span> </span>
</div> </div>
<h3> <h4>
Cascader Cascader
</h3> </h4>
<span <span
class="ant-cascader-picker ant-cascader-picker-show-search" class="ant-cascader-picker ant-cascader-picker-show-search"
style="width:200px" style="width:200px"
@ -259,9 +259,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
</svg> </svg>
</span> </span>
</span> </span>
<h3> <h4>
Transfer Transfer
</h3> </h4>
<div <div
class="ant-transfer" class="ant-transfer"
> >
@ -532,9 +532,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<h3> <h4>
Table Table
</h3> </h4>
<div <div
class="ant-table-wrapper" class="ant-table-wrapper"
style="margin-top:8px" style="margin-top:8px"
@ -640,9 +640,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<h3> <h4>
List List
</h3> </h4>
<div <div
class="ant-list ant-list-split" class="ant-list ant-list-split"
> >

View File

@ -58,19 +58,19 @@ class Demo extends React.Component {
<ConfigProvider renderEmpty={customize && customizeRenderEmpty}> <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
<div className="config-provider"> <div className="config-provider">
<h3>Select</h3> <h4>Select</h4>
<Select style={style} /> <Select style={style} />
<h3>TreeSelect</h3> <h4>TreeSelect</h4>
<TreeSelect style={style} treeData={[]} /> <TreeSelect style={style} treeData={[]} />
<h3>Cascader</h3> <h4>Cascader</h4>
<Cascader style={style} options={[]} showSearch /> <Cascader style={style} options={[]} showSearch />
<h3>Transfer</h3> <h4>Transfer</h4>
<Transfer /> <Transfer />
<h3>Table</h3> <h4>Table</h4>
<Table <Table
style={{ marginTop: 8 }} style={{ marginTop: 8 }}
columns={[ columns={[
@ -87,7 +87,7 @@ class Demo extends React.Component {
]} ]}
/> />
<h3>List</h3> <h4>List</h4>
<List /> <List />
</div> </div>
</ConfigProvider> </ConfigProvider>
@ -100,7 +100,7 @@ ReactDOM.render(<Demo />, mountNode);
``` ```
<style> <style>
.code-box-demo .config-provider h3 { .code-box-demo .config-provider h4 {
font-size: inherit; font-size: inherit;
margin: 16px 0 8px 0; margin: 16px 0 8px 0;
} }

View File

@ -55,8 +55,7 @@
@text-color-inverse: @white; @text-color-inverse: @white;
@icon-color: inherit; @icon-color: inherit;
@icon-color-hover: fade(@black, 75%); @icon-color-hover: fade(@black, 75%);
@heading-color: fade(#000, 85%); @heading-color: fade(@black, 85%);
@heading-color-dark: fade(@white, 100%);
@text-color-dark: fade(@white, 85%); @text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%); @text-color-secondary-dark: fade(@white, 65%);
@text-selection-bg: @primary-color; @text-selection-bg: @primary-color;

View File

@ -93,6 +93,15 @@
} }
} }
h1,
h2,
h3,
h4,
h5,
h6 {
color: @heading-color;
}
.markdown { .markdown {
code, code,
pre, pre,