3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-25 15:07:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): toggle data-theme with vanilla js instead of react helmet (#2127)

Browse source 
* refactor(v2): toggle data-theme with vanilla js instead of react helmet

* use document documentElement
This commit is contained in:
Endi 2019-12-16 07:57:24 +07:00 • committed by Yangshun Tay
parent ee00ecf569
commit 33622c5347
4 changed files with 114 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-classic/src/index.js
View file

@ -12,7 +12,7 @@ const path = require('path');
const storageKey = 'theme';
const noFlash = `(function() {
function setDataThemeAttribute(theme) {
document.querySelector('html').setAttribute('data-theme', theme);
document.documentElement.setAttribute('data-theme', theme);
}
function getPreferredTheme() {

7
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -7,7 +7,6 @@
import React, {useCallback, useState} from 'react';
import Link from '@docusaurus/Link';
import Head from '@docusaurus/Head';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
@ -68,11 +67,6 @@ function Navbar() {
const logoUrl = useBaseUrl(logo.src);
return (
<>
<Head>
{/* TODO: Do not assume that it is in english language */}
<html lang="en" data-theme={theme} />
</Head>
<nav
ref={navbarRef}
className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
@ -183,7 +177,6 @@ function Navbar() {
</div>
</div>
</nav>
</>
);
}

7
packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
View file

@ -9,9 +9,14 @@ import * as React from 'react';
const useTheme = () => {
const [theme, setTheme] = React.useState(
typeof document !== 'undefined'
? document.querySelector('html').getAttribute('data-theme')
? document.documentElement.getAttribute('data-theme')
: '',
);
React.useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
}, [theme]);
React.useEffect(() => {
try {
const localStorageTheme = localStorage.getItem('theme');

8
packages/docusaurus/src/client/exports/Link.js
View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {useEffect} from 'react';
import React, {useEffect, useRef} from 'react';
import {NavLink} from 'react-router-dom';
const internalRegex = /^\/(?!\/)/;
@ -14,7 +14,7 @@ function Link(props) {
const {to, href} = props;
const targetLink = to || href;
const isInternal = internalRegex.test(targetLink);
let preloaded = false;
const preloaded = useRef(false);
const IOSupported =
typeof window !== 'undefined' && 'IntersectionObserver' in window;
@ -48,9 +48,9 @@ function Link(props) {
};
const onMouseEnter = () => {
if (!preloaded) {
if (!preloaded.current) {
window.docusaurus.preload(targetLink);
preloaded = true;
preloaded.current = true;
}
};