summaryrefslogtreecommitdiffstats
path: root/src/components/molecules/forms/theme-toggle.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/forms/theme-toggle.tsx')
-rw-r--r--src/components/molecules/forms/theme-toggle.tsx8
1 files changed, 5 insertions, 3 deletions
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index c927151..6d54591 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -4,17 +4,17 @@ import Toggle, {
} from '@components/atoms/forms/toggle';
import Moon from '@components/atoms/icons/moon';
import Sun from '@components/atoms/icons/sun';
-import { FC, useState } from 'react';
+import { useState, VFC } from 'react';
import { useIntl } from 'react-intl';
-export type ThemeToggleProps = Pick<ToggleProps, 'value'>;
+export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>;
/**
* ThemeToggle component
*
* Render a Toggle component to set theme.
*/
-const ThemeToggle: FC<ThemeToggleProps> = ({ value }) => {
+const ThemeToggle: VFC<ThemeToggleProps> = ({ value, ...props }) => {
const intl = useIntl();
const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value);
const themeLabel = intl.formatMessage({
@@ -42,9 +42,11 @@ const ThemeToggle: FC<ThemeToggleProps> = ({ value }) => {
id="theme-settings"
name="theme-settings"
label={themeLabel}
+ labelSize="medium"
choices={themeChoices}
value={isDarkTheme}
setValue={setIsDarkTheme}
+ {...props}
/>
);
};