Theming in Altair GraphQL

I have been working on introducing more theming options in Altair GraphQL Client, as has been requested several times. Altair already had a few customization options available for a while now (font size and font family), but the implementation wasn’t going to scale well for more customization options. So I decided to look for better solutions.

CSS-in-JS

CSS-in-JS has been a popular solution for managing component styles in the React community for a while now with several CSS-in-JS solutions existing including styled-components, emotion, JSS, and many more. This also comes with the advantage of having the styles managed by JavaScript, where we can dynamically modify the styles easily.

These benefits makes this a preferred solution to the theming problem. I decided to go with emotion since it is one of the popular framework agnostic libraries.

themeConfig settings

Altair can now be customized using themeConfig in the settings. The interface can be found here.

{
  colors: {
    primary: foundations.colors.green,
    secondary: foundations.colors.blue,

    bg: foundations.colors.white,
    offBg: foundations.colors.lightGray,
    font: foundations.colors.black,
    offFont: foundations.colors.darkGray,
    border: foundations.colors.gray,
    offBorder: foundations.colors.lightGray,

    headerBg: foundations.colors.white,
  },
  shadow: {
    color: foundations.colors.black,
    opacity: .1,
  },
  editor: {
    fontFamily: {
      default: 'inherit',
    },
    fontSize: foundations.type.fontSize.body,
    colors: {
      comment: foundations.colors.darkGray,
      string: foundations.colors.orange,
      number: foundations.colors.orange,
      variable: foundations.colors.black,
      keyword: foundations.colors.blue,
      atom: foundations.colors.black,
      attribute: foundations.colors.green,
      property: foundations.colors.blue,
      punctuation: foundations.colors.blue,
      definition: foundations.colors.orange,
      builtin: foundations.colors.orange,
      cursor: foundations.colors.blue,
    },
  }
}

So to change the primary color of Altair to rebeccapurple, you can use the following in the settings:

{
  // ...
  "themeConfig": {
    "colors": {
      "primary": "rebeccapurple"
    }
  }
}

The selected base theme is dracula, and the themeConfig is merged on top of the selected theme. This makes it easy t just customize parts of the theme, instead of having to customize every token.

Conclusion

This config options should be available from v2.5.1. Now you can customize Altair to be consistent with the design style of your services for your users. The next steps after this would be the option of providing the theme customization via the plugin system.