mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
24c7b2ea42
* style(site): set `prefers-color-scheme` value to optimize the dark mode style of the site scroll bar * style(site): optimize the value acquisition logic of `prefers-color-scheme`
74 lines
1.0 KiB
TypeScript
74 lines
1.0 KiB
TypeScript
import { css, Global } from '@emotion/react';
|
|
import React from 'react';
|
|
import { useTheme } from 'antd-style';
|
|
|
|
export default () => {
|
|
const { headerHeight, margin } = useTheme();
|
|
|
|
return (
|
|
<Global
|
|
styles={css`
|
|
body,
|
|
div,
|
|
dl,
|
|
dt,
|
|
dd,
|
|
ul,
|
|
ol,
|
|
li,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
pre,
|
|
code,
|
|
form,
|
|
fieldset,
|
|
legend,
|
|
input,
|
|
textarea,
|
|
p,
|
|
blockquote,
|
|
th,
|
|
td,
|
|
hr,
|
|
button,
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
menu,
|
|
nav,
|
|
section {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
list-style: none;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
border-style: none;
|
|
}
|
|
|
|
html {
|
|
scroll-padding-top: ${headerHeight + margin}px;
|
|
}
|
|
|
|
[data-prefers-color='dark'] {
|
|
color-scheme: dark;
|
|
}
|
|
`}
|
|
/>
|
|
);
|
|
};
|