How can I change Checkbox color?

[Piero87]

I have tried to change checkbox color with no luck, this is my code:

  const theme = mergeTheme(defaultTheme, {
    components: {
      Checkbox: {
        baseStyle: {
          background: 'red',
          color: 'red'
        },
      },
    },
  })

        <ThemeProvider value={theme}>
          <Checkbox
            {...register("remember")}
            label="Remember me"
            checked={checked}
            onChange={e => setChecked(e.target.checked)}
          />
        </ThemeProvider>

how can I change checkbox square color when checked? and the label color?

[brandongregoryscott]

For any advanced theming like this, you'll probably need to take a look at how we implement the theme ourselves: https://github.com/segmentio/evergreen/blob/master/src/themes/default/components/checkbox.js

In this case, we don't define any base style (just a default appearance which acts as the same thing - I can't tell you why, sorry!)

Each of the states is represented with a placeholder selector, so you'll probably want to at least override _checked and _checkedHover, something like this: https://codesandbox.io/s/issue-1557-themed-checkbox-k9bz1b?file=/src/App.tsx

The label is rendered internally and does not read from the theme - but can be overridden with the extra box props that are spread onto the Checkbox. You'll probably want to create a wrapper component if you're trying to keep it consistent across your app.

evergreen/src/checkbox/src/Checkbox.js

Lines 98 to 106 in 0c36c45

	return (
	<Box
	is="label"
	cursor={disabled ? 'not-allowed' : 'pointer'}
	position="relative"
	display="flex"
	marginY={16}
	{...rest}
	>

[Piero87]

@brandongregoryscott thank you very much it worked, how can I change also label color?

[brandongregoryscott]

Ah, sorry, I was mistaken. The outer Box is rendered as a <label>, but the actual label text is rendered here:

evergreen/src/checkbox/src/Checkbox.js

Lines 133 to 137 in 0c36c45

	{label && (
	<Text marginLeft={8} size={300} color={disabled ? 'muted' : 'default'}>
	{label}
	</Text>
	)}

It looks like we don't allow you to configure the label styling here. You could achieve a similar styling by making your own wrapper component like this:

import { CheckboxProps, Pane, Checkbox, Text, useTheme } from "evergreen-ui";

const CustomLabelCheckbox = (props: CheckboxProps) => {
  const { label, ...rest } = props;
  const { colors } = useTheme();
  return (
    <Pane display="flex" flexDirection="row" alignItems="center">
      <Checkbox {...rest} />
      <Text marginLeft={8} size={300} color={colors.red600}>
        {label}
      </Text>
    </Pane>
  );
};

However, you won't get the benefit of the cursor: pointer styling for that label by default, or being able to click the label to check the box (you'd have to wire up that functionality manually).

I'm thinking we could make that component a little more flexible by accepting a React.ReactNode instead of just a string for the label prop, and when provided a string, it retains the current behavior - rendering the <Text /> component, and otherwise, rendering whatever is provided, so you could pass custom JSX to render in place of the label. We could also take a similar approach to the TableCell components that accept a textProps object.

[dansoevans]

Just use accent-color property in css.

For example;

<style> input[type=checkbox]{ accent-color : "red"; } </style>