Custom Theme

Note

This document is for Jade 12.0.0 and above.

All the themes are defined in jade_themes folders in the resource pack. Each json file in the folder is a theme that can be selected in the config screen. The file name is the theme name.

You can refer to this example to create your own theme.

There are two types of themes: gradient borders like the built-in themes, or with a background image.

Gradient Borders

jade_themes/dark.json

{
  "version": 100,
  "tooltipStyle": {
    // optional, transparent by default
    "backgroundColor": "#131313",
    "borderColor": [
      // top-left
      "#383838",
      // top-right
      "#383838",
      // bottom-right
      "#242424FF",
      // bottom-left
      "#242424FF"
    ],
    // optional
    "borderWidth": 1,
    // optional
    "roundCorner": true
  }
}

Note that you can't comment in json files, the above is just for explanation.

All the color values can also accept format like rgba(0, 0, 0, 0.5) or hsla(270deg, 60%, 70%, 0.5).

Background Image

jade_themes/stardew_valley.json

{
  "version": 100,
  "tooltipStyle": {
    // the main background nine-slice image
    "sprite": "jade_stardew:stardew_valley",
    // optional, when there is icon present, use this sprite instead.
    "withIconSprite": "jade_stardew:stardew_valley",
  }
}

Common Properties

jade_themes/stardew_valley.json

{
  // background color is light
  "lightColorScheme": true,
  // change the text style
  "text": {
    "colors": {
      "title": "#000000",
      "normal": "#444444",
      "info": "#000000",
      "success": "#198754",
      "warning": "#FFC107",
      "danger": "#DC3545",
      "failure": "#AB296A"
    },
    "shadow": true,
    "modNameStyle": {
      "italic": false
    }
  },
  "tooltipStyle": {
    /* box style */
  },
  "nestedBoxStyle": {
    /* text style */
  },
  "viewGroupStyle": {
    /* box style */
  },
  // default background opacity
  "changeOpacity": 1,
  // turn on/off the round border after switching to this theme
  // do limited effect on theme with background image. in that case, it's recommended to set this to false
  "changeRoundCorner": false,
  // automatically enable this theme when the resource pack is enabled
  "autoEnable": true,
  // add a frame around the icon
  "iconSlotSprite": "nine-slice sprite",
  "iconSlotInflation": -2
}

Box Style Spec - Common Properties

{
  "padding": [
    6,
    7,
    6,
    6
  ],
  // a box progress is a progress bar that attached to the box, similar to the block breaking progress bar
  "boxProgressOffset": [
    -1,
    -2,
    -1,
    2
  ],
  "boxProgressColors": {
    "normal": "#FFFFFF",
    "failure": "#FF4444",
    // ...
  }
}

Finally, don't forget to name your theme!

lang/en_us.json

{
  "jade.theme.jade_stardew.stardew_valley": "Stardew Valley"
}