Changing color scheme to custom light dark colors. help

[woeful egret]

Hi all, i have a button that toggles the dark/light theme, i also have some custom colors in the theme.ts file. However, I cant get the custom dark color to show in the App, but not the custom light color.

wrapping the app:

import { theme } from "./theme";

...
    <MantineProvider theme={theme}>
      <Router />
    </MantineProvider>

...

on click togggle theme calls:

import cx from "clsx";
import {
  useMantineColorScheme,
  useComputedColorScheme,
  Group,
} from "@mantine/core";
// import { useMantineTheme } from '@mantine/core';



import { IconSun, IconMoon } from "@tabler/icons-react";
import classes from "./ColorSchemeToggle.module.css";

export function ColorSchemeToggle() {
  const { setColorScheme } = useMantineColorScheme();

  const computedColorScheme = useComputedColorScheme("light", {getInitialValueInEffect: true,});
  // const theme = useMantineTheme();

  return (
    <Group>
      <button
        style={{
          border: "none",
          background: "none",
          cursor: "pointer",
        }}
        onClick={() => setColorScheme(computedColorScheme === "light" ? "dark" : "light")}
      >
        <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
        <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
      </button>
    </Group>
  );
}

theme.ts

import { createTheme } from '@mantine/core';

export const theme = createTheme({
  colors: {
    'dark': [
      '#d5d7e0',
      '#acaebf',
      '#8c8fa3',
      '#fff7cc',
      '#4d4f66',
      '#34354a',
      '#262230',  // button inner (sun button in dark mode)
      '#0d021c',  // main #0d021c
      '#0c0d21',
      '#01010a',
    ],
    'light': [
      "#ffe9f3",
      "#fed3e2",
      "#f5a7c0",
      "#ed779d",
      "#e64f7f",
      "#e2356c",
      "#e12663",
      "#c91753",
      "#b30d49",
      "#9f003e"
    ],
  },
});

[thorny sequoia]

https://mantine.dev/theming/colors/#virtual-colors

[woeful egret]

Hi @thorny sequoia isnt that effecively what ive done? created a theme with specifc colros for light and dark?

The dark mode colors work, but the light mode dont

[thorny sequoia]

There is no such thing as dark mode and light mode colors. Values in theme.colors are the same for light and dark color scheme.

[woeful egret]

im not sure i understand. So how do i override the value for the ColorSchemeToggle ?

[plush kettle]

Try this

createTheme({
  primaryColor: 'primary',
  colors: {
    primary: virtualColor({
      name: 'primary',
      dark: 'dark',
      light: 'light'
    }),
    dark: [...],
    light: [...]
  }
})

[woeful egret]

Hi @plush kettle

Have done with the below, unfortunately this doe not change the light mode. dark is ok with respect to the dark colors. But light does not change to the "light" colros below

import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";
import { Router } from "./Router";
import { createTheme, virtualColor } from '@mantine/core';

export const theme2 = createTheme({
  primaryColor: 'primary',
  colors: {
    primary: virtualColor({
      name: 'primary',
      dark: 'dark',
      light: 'light'
    }),
    'dark': [
      '#d5d7e0',
      '#acaebf',
      '#8c8fa3',
      '#fff7cc',
      '#4d4f66',
      '#34354a',
      '#262230',  // button inner (sun button in dark mode)
      '#0d021c',  // main #0d021c
      '#0c0d21',
      '#01010a',
    ],
    light: [
      '#d5d7e0',
      '#acaebf',
      '#8c8fa3',
      '#666980',
      '#4d4f66',
      '#34354a',
      '#2b2c3d',
      '#010133',
      '#0c0d21',
      '#01010a',
    ],
  }
})




export default function App() {
  return (
    <MantineProvider theme={theme2}>
      <Router />
    </MantineProvider>
  );
}

[plush kettle]

I guess it is because you have similar colors for the dark and light palettes

Try replacing and see if it works properly

primary: virtualColor({
  name: 'primary',
  dark: 'green',
  light: 'yellow'
})

[woeful egret]

Nope, this doesnt work, I just get the standard Mantine dark (dark grey), and light (white) colors. No green or yellow in either of the modes

@plush kettle
funny thing is i can reference bg="primary" elsewher in other components, and it works. But not for the themeToggle ?

Im wondering if the ColorSchemeToggle is using its own values somehwere?

      <Box bg="primary" c="white" p="md" fw={700}>
      This box has virtual background color,
      it is pink in dark mode and cyan in light mode
    </Box>

[plush kettle]

Works as expected
https://stackblitz.com/edit/github-wjvkrc-aukrcv?file=src%2FApp.tsx

[woeful egret]

Yeah, the color of the button changes. This is true. But, how to get the background in each mode to change?

[plush kettle]

Use
https://mantine.dev/styles/css-variables/#css-variables-resolver
Here is a list of css variables
https://mantine.dev/styles/css-variables/#other-color-variables

const resolver: CSSVariablesResolver = (theme) => ({
  variables: {
    '--mantine-color-body': theme.colors.primary[6], // example
  },
  light: {},
  dark: {},
});

[woeful egret]

Ok thanks, ill check it out and report back

@plush kettle managed to change the background color with this only:

const resolver: CSSVariablesResolver = (theme) => ({
  variables: {
    '--mantine-color-white': theme.other.deepOrangeLight,
  },
});

--mantine-color-body did not seem todo anything

[plush kettle]

Then try this way

const resolver: CSSVariablesResolver = (theme) => ({
  variables: {},
  light: {
    '--mantine-color-body': ...
  },
  dark: {
    '--mantine-color-body': ...
  },
});

[woeful egret]

@plush kettle Perfect!! thankyou very much 🙌