Custom CSS in each theme

[ardeora]

I wanted to check to see if it would be possible to provide our own css styles in the themes.json file?

The issue

I have been playing around with fig to add a custom theme for my local fig window. I wanted to add some padding and eliminate box shadows but the current theme schema doesn't allow for this. It would be awesome if a css key could be added in the themes.json file that will inject a custom stylesheet in the fig window. This would also open the door for creating really dynamic fig themes. Here is an example of using custom themes (First pic: default behavior, second pic: themes with custom stylesheets)

How I am currently circumventing this problem right now

Whenever fig starts, it fetches the html document and css files from the fig servers. I am intercepting the query to get the css file and monkey patching my custom CSS on the response body

My suggestion

It should be fairly easy to support a css key in the theme.json file like so:

{
  "author": {
    "name": "John Does",
    "twitter": "@john_doe",
    "github": "jdoe"
  },
  "version": "1.0",
  "theme": {
       ....existing config here for convenient theme-ing,
      "css": "#foo { background: yellow; }"
  }
}

and then parsing that string during runtime and inserting it into a new <style> element after the existing stylesheet.

I would love to hear your thoughts and would be happy to contribute or add documentation for the different DOM elements in the fig window for easy reference for future theme creators

[mschrage]

Hey @ardeora! Sorry for the slow response here. This definitely makes sense to add. PS. I love your theme. Would you mind sharing the CSS and we can include it as a default :)

[mschrage]

@SeparateRecords do we support this now? I know we have a setting that allows users to set custom CSS fig settings autocomplete.userStyles ' /* custom css */ ' but I'm not sure if this is possible in a theme.