components color-mode-button.tsx

0% Statements 0/9

0% Branches 0/2

0% Functions 0/2

0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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
29
30
31
32
33
34  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { IconButton, IconButtonProps, useColorMode } from '@stacks/ui';
import { IconSun, IconSunOff } from '@tabler/icons';
import React, { forwardRef, Ref } from 'react';
 
export const ColorModeButton = forwardRef(
  (props: Omit<IconButtonProps, 'icon'>, ref: Ref<HTMLDivElement>) => {
    const { colorMode } = useColorMode();
    const Icon = colorMode === 'light' ? IconSun : IconSunOff;
    return (
      <IconButton
        height="32px"
        width="32px"
        style={{
          cursor: 'default',
          minHeight: 'unset',
          minWidth: 'unset',
          padding: 0,
        }}
        icon={Icon}
        onClick={() => main.theme.toggleMode()}
        title="Toggle color mode"
        as="button"
        {...(props as any)}
        ref={ref as any}
        iconProps={{
          color: props.color,
        }}
      />
    );
  }
);
 
ColorModeButton.displayName = 'ColorModeButton';