diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js index ba2eaed5e5dc..0f09eab68218 100644 --- a/packages/docusaurus-theme-classic/src/index.js +++ b/packages/docusaurus-theme-classic/src/index.js @@ -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() { diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index e317c97fc756..a3c66d93a559 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -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,122 +67,116 @@ function Navbar() { const logoUrl = useBaseUrl(logo.src); return ( - <> - - {/* TODO: Do not assume that it is in english language */} - - - - + + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js b/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js index fca07be14f3f..e2c4350ced1f 100644 --- a/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js +++ b/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js @@ -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'); diff --git a/packages/docusaurus/src/client/exports/Link.js b/packages/docusaurus/src/client/exports/Link.js index 58ad2aeec90b..9f40e95e5c02 100644 --- a/packages/docusaurus/src/client/exports/Link.js +++ b/packages/docusaurus/src/client/exports/Link.js @@ -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; } };