mirror of
https://github.com/Snigdha-OS/documentation.git
synced 2025-09-13 20:14:56 +02:00
48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
/**
|
|
* 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 clsx from 'clsx';
|
|
import useIsBrowser from '@docusaurus/useIsBrowser';
|
|
import { useColorMode } from '../../contexts/colorMode';
|
|
import styles from './styles.module.css';
|
|
const AllThemes = ['light', 'dark'];
|
|
/**
|
|
* Generic component to render anything themed in light/dark
|
|
* Note: it's preferable to use CSS for theming because this component
|
|
* will need to render all the variants during SSR to avoid a theme flash.
|
|
*
|
|
* Use this only when CSS customizations are not convenient or impossible.
|
|
* For example, rendering themed images or SVGs...
|
|
*
|
|
* @param className applied to all the variants
|
|
* @param children function to render a theme variant
|
|
* @constructor
|
|
*/
|
|
export default function ThemedComponent({ className, children, }) {
|
|
const isBrowser = useIsBrowser();
|
|
const { colorMode } = useColorMode();
|
|
function getThemesToRender() {
|
|
if (isBrowser) {
|
|
return colorMode === 'dark' ? ['dark'] : ['light'];
|
|
}
|
|
// We need to render both components on the server / hydration to avoid:
|
|
// - a flash of wrong theme before hydration
|
|
// - React hydration mismatches
|
|
// See https://github.com/facebook/docusaurus/pull/3730
|
|
return ['light', 'dark'];
|
|
}
|
|
return (<>
|
|
{getThemesToRender().map((theme) => {
|
|
const themedElement = children({
|
|
theme,
|
|
className: clsx(className, styles.themedComponent, styles[`themedComponent--${theme}`]),
|
|
});
|
|
return <React.Fragment key={theme}>{themedElement}</React.Fragment>;
|
|
})}
|
|
</>);
|
|
}
|
|
//# sourceMappingURL=index.js.map
|