test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: switch dark

Browse Source
This commit is contained in:
ycjcl868 2019-12-23 17:58:59 +08:00
parent 30b372020a
commit f4e198c465
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/theme/static/header.less
View File

@ -27,6 +27,10 @@
}
}
[data-theme='dark'] #header {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
}
#logo {
float: left;
height: @header-height;

22
site/theme/template/Layout/index.jsx
View File

@ -52,7 +52,6 @@ let isMobile = false;
enquireScreen(b => {
isMobile = b;
});
const SITE_THEME_STORE_KEY = 'site-theme';
export default class Layout extends React.Component {
@ -99,8 +98,13 @@ export default class Layout extends React.Component {
// eslint-disable-next-line
window._hmt.push(['_trackPageview', loc.pathname + loc.search]);
}
const { pathname } = loc;
const componentPage = /^\/?components/.test(pathname);
// only component page can use `dark` theme
if (!componentPage) {
this.setTheme('default', false);
}
});
this.setTheme(theme);
const nprogressHiddenStyle = document.getElementById('nprogress-style');
@ -121,28 +125,28 @@ export default class Layout extends React.Component {
clearTimeout(this.timer);
}
setTheme = theme => {
const componentPage = /^\/?components/.test(this.props.location.pathname);
setTheme = (theme, persist = true) => {
if (typeof window === 'undefined') {
return;
}
if (!componentPage) {
return 'default';
}
if (theme !== 'dark') {
const dom = document.getElementById('theme-style');
if (dom) {
dom.remove();
}
localStorage.removeItem(SITE_THEME_STORE_KEY);
if (persist) {
localStorage.removeItem(SITE_THEME_STORE_KEY);
}
} else {
const style = document.createElement('link');
style.type = 'text/css';
style.rel = 'stylesheet';
style.id = 'theme-style';
style.href = '/dark.css';
if (persist) {
localStorage.setItem(SITE_THEME_STORE_KEY, 'dark');
}
localStorage.setItem(SITE_THEME_STORE_KEY, 'dark');
document.body.append(style);
}
document.body.setAttribute('data-theme', theme);