src/components/common/ToggleTheme.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

---
import { Icon } from 'astro-icon/components';

import { UI } from 'astrowind:config';

export interface Props {
  label?: string;
  class?: string;
  iconClass?: string;
  iconName?: string;
}

const {
  label = 'Toggle between Dark and Light mode',
  class:
    className = 'text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
  iconClass = 'w-6 h-6',
  iconName = 'tabler:sun',
} = Astro.props;
---

{
  !(UI.theme && UI.theme.endsWith(':only')) && (
    <button type="button" class={className} aria-label={label} data-aw-toggle-color-scheme>
      <Icon name={iconName} class={iconClass} />
    </button>
  )
}