3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-24 14:36:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): Support swizzling TypeScript components (#2671)

Browse source 
* feat(v2): Support swizzling TypeScript components

* Add tsc --noEmit to tsc script in theme-classic

Now everything can pass the type checker! (although still a lot of any)

* Add tsconfig and types.d.ts to website

Improve developer experience.

As an example, I converted NotFound to tsx

* Apply type annotation suggestions

* Do not fallback to `getThemePath` if getTypeScriptThemePath is undefined

* Fix tsc

* Add module declaration for @theme-original/*

* Move babel cli to root package.json
This commit is contained in:
Sam Zhou 2020-06-25 10:07:30 -04:00 • committed by GitHub
parent 20930dc837
commit 5ccd24cc1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
59 changed files with 345 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,83 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {useState, useCallback, useEffect} from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
const themes = {
light: '',
dark: 'dark',
};
const useTheme = () => {
const {
siteConfig: {themeConfig: {disableDarkMode}} = {},
} = useDocusaurusContext();
const [theme, setTheme] = useState(
typeof document !== 'undefined'
? document.documentElement.getAttribute('data-theme')
: themes.light,
);
const setThemeSyncWithLocalStorage = useCallback(
(newTheme) => {
try {
localStorage.setItem('theme', newTheme);
} catch (err) {
console.error(err);
}
},
[setTheme],
);
const setLightTheme = useCallback(() => {
setTheme(themes.light);
setThemeSyncWithLocalStorage(themes.light);
}, []);
const setDarkTheme = useCallback(() => {
setTheme(themes.dark);
setThemeSyncWithLocalStorage(themes.dark);
}, []);
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
}, [theme]);
useEffect(() => {
if (disableDarkMode) {
return;
}
try {
const localStorageTheme = localStorage.getItem('theme');
if (localStorageTheme !== null) {
setTheme(localStorageTheme);
}
} catch (err) {
console.error(err);
}
}, [setTheme]);
useEffect(() => {
if (disableDarkMode) {
return;
}
window
.matchMedia('(prefers-color-scheme: dark)')
.addListener(({matches}) => {
setTheme(matches ? themes.dark : themes.light);
});
}, []);
return {
isDarkTheme: theme === themes.dark,
setLightTheme,
setDarkTheme,
};
};
export default useTheme;