Switch theme color mode when docs color mode is changed

docs/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+	'ignorePatterns': [ 'node_modules/**/*', 'build/**/*' ]
+};

docs/docs/components/button.md

@@ -26,7 +26,7 @@ import { Button } from '@amalgama/react-native-ui-kit';
 	</Button>
 </CodePreview>
 
-```tsx
+```jsx
 <Button variant="primary" margin="3" onPress={() => {window.alert( 'Clicked!' );}}>
 	Click!
 </Button>

docs/src/theme/ColorModeToggle/index.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import type { Props } from '@theme/ColorModeToggle';
+
+declare function ColorModeToggle( { className, value, onChange }: Props ): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ColorModeToggle>;
+export default _default;

docs/src/theme/ColorModeToggle/index.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
+import { useThemeColorModeSwtich } from '@amalgama/react-native-ui-kit';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { translate } from '@docusaurus/Translate';
+import IconLightMode from '@theme/Icon/LightMode';
+import IconDarkMode from '@theme/Icon/DarkMode';
+import styles from './styles.module.css';
+
+function ColorModeToggle( { className, value, onChange } ) {
+	const isBrowser = useIsBrowser();
+	const switchColorMode = useThemeColorModeSwtich();
+
+	const title = translate(
+		{
+			message: 'Switch between dark and light mode (currently {mode})',
+			id: 'theme.colorToggle.ariaLabel',
+			description: 'The ARIA label for the navbar color mode toggle'
+		},
+		{
+			mode:
+				value === 'dark'
+					? translate( {
+						message: 'dark mode',
+						id: 'theme.colorToggle.ariaLabel.mode.dark',
+						description: 'The name for the dark color mode'
+					} )
+					: translate( {
+						message: 'light mode',
+						id: 'theme.colorToggle.ariaLabel.mode.light',
+						description: 'The name for the light color mode'
+					} )
+		}
+	);
+
+	useEffect( () => {
+		switchColorMode( value );
+	}, [ value ] );
+
+	return (
+		<div className={clsx( styles.toggle, className )}>
+			<button
+				className={clsx(
+					'clean-btn',
+					styles.toggleButton,
+					!isBrowser && styles.toggleButtonDisabled
+				)}
+				type="button"
+				onClick={() => onChange( value === 'dark' ? 'light' : 'dark' )}
+				disabled={!isBrowser}
+				title={title}
+				aria-label={title}>
+				<IconLightMode
+					className={clsx( styles.toggleIcon, styles.lightToggleIcon )}
+				/>
+				<IconDarkMode
+					className={clsx( styles.toggleIcon, styles.darkToggleIcon )}
+				/>
+			</button>
+		</div>
+	);
+}
+export default React.memo( ColorModeToggle );

docs/src/theme/ColorModeToggle/styles.module.css

@@ -0,0 +1,28 @@
+.toggle {
+  width: 2rem;
+  height: 2rem;
+}
+
+.toggleButton {
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
+}
+
+.toggleButton:hover {
+  background: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='light'] .darkToggleIcon,
+[data-theme='dark'] .lightToggleIcon {
+  display: none;
+}
+
+.toggleButtonDisabled {
+  cursor: not-allowed;
+}

src/index.tsx

@@ -2,6 +2,7 @@ export { default as Theme } from './core/theme/Theme';
 export { default as defaultTheme } from './core/theme/defaultTheme';
 export { default as extendThemeConfig } from './core/theme/extendThemeConfig';
 export { ThemeProvider, ThemeConsumer } from './core/theme/context';
+export { useTheme, useThemeColorModeSwtich } from './core/theme/hooks';
 export {
 	Box,
 	Button,