XKoji.devXKoji.dev

Theming in Altair GraphQL

September 18, 2020

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"
    }
  }
}

Altair in 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.


Did you find this useful? Do you think there are better approaches to take, or questions? You can reach out to me on twitter @imolorhe.

Write about what you learn. It pushes you to understand topics better.

Sometimes the gaps in your knowledge only become clear when you try explaining things to others. It's OK if no one reads what you write. You get a lot out of just doing it for you.

@addyosmani

Articles by Samuel Imolorhe. I am a web developer who likes building useful things and sharing what I learn with the community. Follow me on Twitter

© 2020, Built with Gatsby
Back to top ↑