ThemeSwitch

Used to toggle the theme of the application.

Demo

React

SizeSmallMediumLarge

Mode: light

Vue

SizeSmallMediumLarge

Mode: light

Example

React

import {
  ThemeSwitch,
  type ThemeSwitchMode,
} from '@fintech-sandpit/ui/react';
import { useState } from 'react';

const [mode, setMode] = useState<ThemeSwitchMode>(() => {
  return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
});

const handleToggle = (mode: ThemeSwitchMode) => {
  document.documentElement.dataset.theme = mode;
  localStorage.theme = mode;
  setMode(mode);
};

return (
  <ThemeSwitch
    mode={mode}
    size="md"
    onToggle={handleToggle}
  />
);

Vue

<script setup lang="ts">
import {
  ThemeSwitch,
  type ThemeSwitchMode,
} from '@fintech-sandpit/ui/vue';
import { ref } from 'vue';

const mode = ref<ThemeSwitchMode>(() => {
  return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
});

const handleToggle = (mode: ThemeSwitchMode) => {
  document.documentElement.dataset.theme = mode;
  localStorage.theme = mode;
  mode.value = mode;
};
</script>

<template>
  <ThemeSwitch
    :mode="mode"
    size="md"
    @toggle="handleToggle"
  />
</template>

Props

Name	Type	Default	Description
mode	ThemeSwitchMode	light	The mode of the theme switch
size	ThemeSwitchSize	md	The size of the theme switch

Events

React

Name	Type	Description
onToggle	(mode: ThemeSwitchMode) => void	Callback fired when the mode changes

Vue

Name	Argument	Description
toggle	ThemeSwitchMode	Event emitted when the mode changes

Types

export type ThemeSwitchMode = 'light' | 'dark'
export type ThemeSwitchSize =  'sm' | 'md' | 'lg'