dark, ligth icon

how to change dark/light icon

5 Replies

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the dark/light mode icon in a Refine application, you can follow the examples provided for different UI frameworks. Below are examples for Mantine, Ant Design, Chakra UI, and Material UI. Mantine In Mantine, you can use the useMantineColorScheme hook to toggle between dark and light modes and change the icon accordingly.

import { ActionIcon, MantineHeader, Group } from "@mantine/core";
import { IconSun, IconMoonStars } from "@tabler/icons-react";
import { useMantineColorScheme } from "@mantine/core";

const Header = () => {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const dark = colorScheme === "dark";

  return (
    <MantineHeader height={50} p="xs">
      <Group position="right">
        <ActionIcon
          variant="outline"
          color={dark ? "yellow" : "primary"}
          onClick={() => toggleColorScheme()}
          title="Toggle color scheme"
        >
          {dark ? <IconSun /> : <IconMoonStars />}
        </ActionIcon>
      </Group>
    </MantineHeader>
  );
};

import { ActionIcon, MantineHeader, Group } from "@mantine/core";
import { IconSun, IconMoonStars } from "@tabler/icons-react";
import { useMantineColorScheme } from "@mantine/core";

const Header = () => {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const dark = colorScheme === "dark";

  return (
    <MantineHeader height={50} p="xs">
      <Group position="right">
        <ActionIcon
          variant="outline"
          color={dark ? "yellow" : "primary"}
          onClick={() => toggleColorScheme()}
          title="Toggle color scheme"
        >
          {dark ? <IconSun /> : <IconMoonStars />}
        </ActionIcon>
      </Group>
    </MantineHeader>
  );
};

Source (https://refine.dev/docs/ui-integrations/mantine/theming/#theme-switching) Ant Design In Ant Design, you can use the Button component to toggle between dark and light modes and change the icon accordingly.

import { Space, Button } from "antd";
import { IconSun, IconMoonStars } from "@tabler/icons-react";

interface HeaderProps {
  theme: "light" | "dark";
  setTheme: (theme: "light" | "dark") => void;
}
const Header: FC<HeaderProps> = (props) => {
  return (
    <Space direction="vertical" align="end" style={{ padding: "1rem" }}>
      <Button
        onClick={() => {
          props.setTheme(props.theme === "light" ? "dark" : "light");
        }}
        icon={props.theme === "light" ? <IconMoonStars /> : <IconSun />}
      />
    </Space>
  );
};

import { Space, Button } from "antd";
import { IconSun, IconMoonStars } from "@tabler/icons-react";

interface HeaderProps {
  theme: "light" | "dark";
  setTheme: (theme: "light" | "dark") => void;
}
const Header: FC<HeaderProps> = (props) => {
  return (
    <Space direction="vertical" align="end" style={{ padding: "1rem" }}>
      <Button
        onClick={() => {
          props.setTheme(props.theme === "light" ? "dark" : "light");
        }}
        icon={props.theme === "light" ? <IconMoonStars /> : <IconSun />}
      />
    </Space>
  );
};

Source (https://refine.dev/docs/ui-integrations/ant-design/theming/#switching-to-dark-theme) Chakra UI In Chakra UI, you can use the useColorMode hook to toggle between dark and light modes and change the icon accordingly.

import { Box, IconButton, Icon, useColorMode } from "@chakra-ui/react";
import { IconSun, IconMoonStars } from "@tabler/icons-react";

const Header = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Box py="2" px="4" display="flex" justifyContent="flex-end" w="full" bg="chakra-body-bg">
      <IconButton
        variant="ghost"
        aria-label="Toggle theme"
        onClick={toggleColorMode}
      >
        <Icon as={colorMode === "light" ? IconMoonStars : IconSun} w="18px" h="18px" />
      </IconButton>
    </Box>
  );
};

import { Box, IconButton, Icon, useColorMode } from "@chakra-ui/react";
import { IconSun, IconMoonStars } from "@tabler/icons-react";

const Header = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Box py="2" px="4" display="flex" justifyContent="flex-end" w="full" bg="chakra-body-bg">
      <IconButton
        variant="ghost"
        aria-label="Toggle theme"
        onClick={toggleColorMode}
      >
        <Icon as={colorMode === "light" ? IconMoonStars : IconSun} w="18px" h="18px" />
      </IconButton>
    </Box>
  );
};

Source (https://refine.dev/docs/ui-integrations/chakra-ui/theming/#theme-switching) Material UI In Material UI, you can use a context to manage the color mode and toggle between dark and light modes, changing the icon accordingly. ```tsx import { AppBar, IconButton, Box, Stack } from "@mui/material"; import { LightModeOutlined, DarkModeOutlined } from ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

optimistic-goldOP•8mo ago

@kapa.ai how to install ant-design/plots

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To install the @ant-design/plots package, you can use either npm or yarn. Below are the commands for both package managers: Using npm

npm install @ant-design/plots

npm install @ant-design/plots

Using yarn

yarn add @ant-design/plots

yarn add @ant-design/plots

This package is useful for creating various types of charts and visualizations in your application. For more information on how to use @ant-design/plots, you can visit the Ant Design Charts documentation (https://charts.ant.design/en). If you are using Refine and want to integrate Ant Design charts, you might also find it helpful to refer to the Refine documentation on Ant Design integration (https://refine.dev/docs/ui-integrations/ant-design/introduction/). For example, to install Ant Design charts in a Refine project, you can use the following command:

npm install @ant-design/charts

npm install @ant-design/charts

Source (https://refine.dev/blog/building-react-admin-dashboard/#building-the-daily-revenue-component) This will allow you to use Ant Design charts for visualizing data in your Refine application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

dark, ligth icon

Did you find this page helpful?