mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-06 10:20:09 +02:00
feat(theme): allow to load a Docusaurus page with theme from query-string: ?docusaurus-theme=dark (#8708)
This commit is contained in:
Sébastien Lorber
GitHub
parent
50b1dc7db3
commit
0f7552accb
5 changed files with 78 additions and 7 deletions
|
|
@ -26,6 +26,8 @@ const ContextReplacementPlugin = requireFromDocusaurusCore(
|
||||||
// Need to be inlined to prevent dark mode FOUC
|
// Need to be inlined to prevent dark mode FOUC
|
||||||
// Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
|
// Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
|
||||||
const ThemeStorageKey = 'theme';
|
const ThemeStorageKey = 'theme';
|
||||||
|
const ThemeQueryStringKey = 'docusaurus-theme';
|
||||||
|
|
||||||
const noFlashColorMode = ({
|
const noFlashColorMode = ({
|
||||||
defaultMode,
|
defaultMode,
|
||||||
respectPrefersColorScheme,
|
respectPrefersColorScheme,
|
||||||
|
|
@ -39,6 +41,14 @@ const noFlashColorMode = ({
|
||||||
document.documentElement.setAttribute('data-theme', theme);
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getQueryStringTheme() {
|
||||||
|
var theme = null;
|
||||||
|
try {
|
||||||
|
theme = new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
||||||
|
} catch(e) {}
|
||||||
|
return theme;
|
||||||
|
}
|
||||||
|
|
||||||
function getStoredTheme() {
|
function getStoredTheme() {
|
||||||
var theme = null;
|
var theme = null;
|
||||||
try {
|
try {
|
||||||
|
|
@ -47,9 +57,9 @@ const noFlashColorMode = ({
|
||||||
return theme;
|
return theme;
|
||||||
}
|
}
|
||||||
|
|
||||||
var storedTheme = getStoredTheme();
|
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
||||||
if (storedTheme !== null) {
|
if (initialTheme !== null) {
|
||||||
setDataThemeAttribute(storedTheme);
|
setDataThemeAttribute(initialTheme);
|
||||||
} else {
|
} else {
|
||||||
if (
|
if (
|
||||||
respectPrefersColorScheme &&
|
respectPrefersColorScheme &&
|
||||||
|
|
|
||||||
43
website/_dogfooding/_pages tests/embeds.tsx
Normal file
43
website/_dogfooding/_pages tests/embeds.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
/**
|
||||||
|
* 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 React from 'react';
|
||||||
|
import Layout from '@theme/Layout';
|
||||||
|
import Heading from '@theme/Heading';
|
||||||
|
import BrowserWindow from '@site/src/components/BrowserWindow';
|
||||||
|
|
||||||
|
function IframeTest({url}: {url: string}) {
|
||||||
|
return (
|
||||||
|
<div style={{padding: 10}}>
|
||||||
|
<BrowserWindow
|
||||||
|
url={url}
|
||||||
|
style={{minWidth: '40vw', maxWidth: 400}}
|
||||||
|
bodyStyle={{padding: 0}}>
|
||||||
|
<iframe src={url} title={url} style={{width: '100%', height: 300}} />
|
||||||
|
</BrowserWindow>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// See https://github.com/facebook/docusaurus/issues/8672
|
||||||
|
export default function Embeds(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div style={{padding: 10}}>
|
||||||
|
<Heading as="h1">Test Embeds</Heading>
|
||||||
|
<div style={{display: 'flex', flexWrap: 'wrap'}}>
|
||||||
|
<IframeTest url="/?docusaurus-theme=light" />
|
||||||
|
<IframeTest url="/?docusaurus-theme=dark" />
|
||||||
|
<IframeTest url="/?docusaurus-theme=unexpected-value" />
|
||||||
|
<IframeTest url="/" />
|
||||||
|
<IframeTest url="https://docusaurus.io/" />
|
||||||
|
<IframeTest url="https://tutorial.docusaurus.io/" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -33,3 +33,4 @@ import Readme from "../README.mdx"
|
||||||
- [Head metadata tests](/tests/pages/head-metadata)
|
- [Head metadata tests](/tests/pages/head-metadata)
|
||||||
- [Unlisted page](/tests/pages/unlisted)
|
- [Unlisted page](/tests/pages/unlisted)
|
||||||
- [Analytics](/tests/pages/analytics)
|
- [Analytics](/tests/pages/analytics)
|
||||||
|
- [Embeds](/tests/pages/embeds)
|
||||||
|
|
|
||||||
|
|
@ -127,6 +127,17 @@ In light mode, the `<html>` element has a `data-theme="light"` attribute; in dar
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
:::tip
|
||||||
|
|
||||||
|
It is possible to initialize the Docusaurus theme directly from a `docusaurus-theme` query string parameter.
|
||||||
|
|
||||||
|
Examples:
|
||||||
|
|
||||||
|
- [`https://docusaurus.io/?docusaurus-theme=dark`](https://docusaurus.io/?docusaurus-theme=dark)
|
||||||
|
- [`https://docusaurus.io/docs/configuration?docusaurus-theme=light`](https://docusaurus.io/docs/configuration?docusaurus-theme=light)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
### Mobile View {#mobile-view}
|
### Mobile View {#mobile-view}
|
||||||
|
|
||||||
Docusaurus uses `996px` as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries.
|
Docusaurus uses `996px` as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries.
|
||||||
|
|
|
||||||
|
|
@ -5,24 +5,28 @@
|
||||||
* LICENSE file in the root directory of this source tree.
|
* LICENSE file in the root directory of this source tree.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, {type ReactNode} from 'react';
|
import React, {type CSSProperties, type ReactNode} from 'react';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
|
|
||||||
import styles from './styles.module.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
minHeight: number;
|
minHeight?: number;
|
||||||
url: string;
|
url: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
bodyStyle?: CSSProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function BrowserWindow({
|
export default function BrowserWindow({
|
||||||
children,
|
children,
|
||||||
minHeight,
|
minHeight,
|
||||||
url = 'http://localhost:3000',
|
url = 'http://localhost:3000',
|
||||||
|
style,
|
||||||
|
bodyStyle,
|
||||||
}: Props): JSX.Element {
|
}: Props): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<div className={styles.browserWindow} style={{minHeight}}>
|
<div className={styles.browserWindow} style={{...style, minHeight}}>
|
||||||
<div className={styles.browserWindowHeader}>
|
<div className={styles.browserWindowHeader}>
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttons}>
|
||||||
<span className={styles.dot} style={{background: '#f25f58'}} />
|
<span className={styles.dot} style={{background: '#f25f58'}} />
|
||||||
|
|
@ -41,7 +45,9 @@ export default function BrowserWindow({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.browserWindowBody}>{children}</div>
|
<div className={styles.browserWindowBody} style={bodyStyle}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue