Adding new themes from local data

You can inject new sheet themes into your INVESTIGATOR game by putting some JSON (or YAML) files in in your Foundry data folder. This is designed for moderately technical users who are comfortable:

• Writing JSON
• Editing files in their Foundry server's Data folder.

If you're after instructions on adding new themes from third-party module code, see Adding new themes from third-party code.

Feedback welcome! Let me know how well the authoring experience goes for you, what works, what doesn't. You can email me, DM me on Twitter, or raise a ticket right here on GitLab.

The basic idea:

1. Create a folder in your Foundry server's Data folder, called investigator_themes.

2. Inside Data/investigator_themes, create a file called my_new_theme.json.

3. At a minimum, populate the file with this:

   {
     "displayName": "My new theme",
     "schemaVersion": "v1"
   }

4. Reload Foundry in your browser.

5. Go to INVESTIGATOR Settings.

6. Ta da! Your new theme will be listed as one of the options. Yes, it's going to look fugly right now. We'll deal with that next.

A more complete example:

Here's the entire "Teal of Cthulhu" theme expressed as JSON. You can start from this when crafting your own theme:

{
  "schemaVersion": "v1",
  "displayName": "Teal of Cthulhu (Local copy)",
  "global": "@import url(\"https://fonts.googleapis.com/css2?family=Federo&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap\");",
  "largeSheetRootStyle": {
    "backgroundImage": "url(systems/investigator/assets/wallpaper/marjanblan-5Ft4NWTmeJE-unsplash.webp)"
  },
  "bodyFont": "16px 'Patrick Hand SC', sans-serif",
  "displayFont": "normal small-caps normal 1em 'Federo', serif",
  "logo": {
    "frontTextElementStyle": {
      "background": "linear-gradient(135deg, #efb183 0%,#222 30%,#efb183 90%)",
      "backgroundClip": "text"
    },
    "rearTextElementStyle": {
      "textShadow": "2px 0px 1px black, 6px 0px 4px rgba(0,0,0,0.5), -1px 0px 0px rgba(255,255,255,0.5)"
    },
    "textElementsStyle": {
      "transform": "rotateY(-30deg) rotateZ(-1deg) translateX(-5%)"
    },
    "backdropStyle": {
      "perspective": "500px",
      "perspectiveOrigin": "50% 50%",
      "backgroundImage": "radial-gradient(closest-side, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%)"
    }
  },
  "colors": {
    "accent": "#1d5d5d",
    "accentContrast": "white",
    "glow": "#5effff",
    "wallpaper": "#ddd",
    "backgroundSecondary": "rgba(255,255,255,0.2)",
    "backgroundPrimary": "rgba(255,255,255,0.5)",
    "backgroundButton": "rgba(0,0,0,0.1)",
    "text": "#433"
  }
}

Permissions and normal players

Custom local themes will only work for normal users if you give them permission to "Use File Browser".

To do this:

1. Go to Settings -> User Management.
2. Then either:
   • Turn your "Players" into "Trusted Players", or
   • Configure Permissions -> select "Use file browser" in the "Player" column, and then click "Save Configuration".

Please note that giving your players this permission means they will be able to browse your foundry data folder. If you are not comfortable giving your players this privilege, please stick to the built-in themes.

Using a different folder

You can change the folder name for themes in the INVESTIGATOR Settings window.

Renaming themes

If you rename a theme file, make sure you re-select it in the Settings (or on a PC sheet). We use the filename as the "unique identifier" for a local custom theme, so if you rename it, INVESTIGATOR will think it's a whole new theme.

Schema versions

We use schema versions so that we can upgrade theme definitions internally without breaking everyone's custom theme. As long as you keep that "schemaVersion": "v1" there, your theme will keep working even if we upgrade to a new schema internally.

Using YAML

You can use YAML instead of JSON. Just give your theme the extension .yaml.