How can I create my own theme?

[GhostOrder28]

I'm trying to figure out how to create a custom theme, I've been reading the docs and the type definitions but I can't make it work, this is what I have so far:

const myTheme = mergeTheme(defaultTheme, {
  colors: {
    customColor: '#7DBCBC'
  }
})

export default function App() {
  return (
    <ThemeProvider value={myTheme}>
      <Pane 
        width={50}
        height={50}
        backgroundColor={'customColor'}
      />
    </ThemeProvider>    
  );
}

Nothing is being displayed in the viewport, so it seems I didn't get it right, how would look a basic custom theme setting? I know here is a couple of examples but they don't show how to set the colors property, just the components one.

[brandongregoryscott]

Hey @GhostOrder28 - sorry if this wasn't clear from the docs. We don't really support referencing design tokens like that at this time. If you wanted to use customColor in a component, you would need to reference the value directly from the theme (probably through the useTheme hook, which is generically typed)

interface CustomTheme extends Theme {
  colors: {
    customColor: string;
  };
}

const customTheme: CustomTheme & DefaultTheme = mergeTheme(defaultTheme, {
  colors: {
    customColor: "#2596be"
  }
});

// app.tsx or equivalent 'root' component
const App = () => {
  return (
    <ThemeProvider value={customTheme}>
      {...}
    </ThemeProvider>
  );
};

// Some custom components deeper in the tree
const CustomParagraph = (props) => {
  const { colors } = useTheme<CustomTheme>();
  const { children, ...rest } = props;
  return (
    <Paragraph color={colors.customColor} {...rest}>
      {children}
    </Paragraph>
  );
};

I put together a small sandbox demoing this: https://codesandbox.io/s/evergreen-custom-theme-example-3ckblh?file=/src/App.tsx

Let me know if you have any other questions or suggestions for improvements on the docs!

[GhostOrder28]

Thank you @brandongregoryscott , that useTheme hook was the missing piece of the puzzle! I know there is a mention of it in the docs but I didn't know how to use it.

I think right now the hover effect is the only issue on the top of my head, and now that I think it is related with theming because as far as I know that is the only way to set the hover properties for an element, isn't it?

I know that in the docs there is an example in the theming part where you set the background for a _hover property but that just adds to the Button component, what if I want to have two types of button each of them with a different animation when hovered? Do I have to create a theme for each of them? What if I want to apply a hover effect to a Pane? is it possible?

[brandongregoryscott]

So the hover styles/pseudo-selectors are a bit tricky right now. ui-box, which we build almost all of our components on top of, doesn't handle these yet [but I'm working on it], so we use glamor to fill in the gap there.

The _hover, _active, etc. you see in the theme are 'friendly' names for what might be more complex selectors (&:hover:not(:disabled) or something along those lines) under the hood, which we map up in the respective component. So _hover might be present in a Button's theme, but not the Text or TextInput component themes. These can be overridden where present, but adding a _hover key/style object onto a component that doesn't already have it wired up internally will have no effect.

All this to say is - if you really need a hover/focus/active style on a component that doesn't support it in the theme, you'll probably need to pull in the css function from glamor and apply the class name it serializes. (See Badge.js as an example of where we're doing it internally)

As far as how to go about styling multiple Buttons or variants of buttons w/ different hover styles, you probably want to add separate appearances to the theme, i.e.

interface CustomTheme extends Theme {
  components: {
    Button: {
      appearances: {
        superdanger: {
          backgroundColor: string;
          _hover: {
            backgroundColor: string;
          };
        };
        success: {
          backgroundColor: string;
          _hover: {
            backgroundColor: string;
          };
        };
      };
    };
  };
}

const customTheme: CustomTheme & DefaultTheme = mergeTheme(defaultTheme, {
  components: {
    Button: {
      appearances: {
        superdanger: {
          backgroundColor: "indianred",
          _hover: {
            backgroundColor: "firebrick"
          }
        },
        success: {
          backgroundColor: "lawngreen",
          _hover: {
            backgroundColor: "greenyellow"
          }
        }
      }
    }
  }
});

// In your component tree:
<Button appearance="superdanger">superdanger</Button>
<Button appearance="success">success</Button>

This is a case where we actually do allow for custom tokens that can be referenced by key (same with sizes)

You can see how we implement this for the different Button appearances we support out of the box, i.e. default, primary, minimal, and destructive: https://github.com/segmentio/evergreen/blob/master/src/themes/default/components/button.js#L79-L118

Note: There are some functions in there that receive the theme and props as arguments to make extra decisions based on the intent. The TypeScript definition for Theme doesn't really account for this, and it should work, but I haven't used it a lot personally. (I believe the logic that passes through theme and props happens here)

[GhostOrder28]

Thank you, I really appreciate the in-depth explanation and also I'm happy to see that pseudo selectors will be implemented widely in the future!