T
TyphonJS•2mo ago
geoidesic [Aardvark Games]

TRL 0.3.0-next.2 Dark Theme

I've upgraded my module recently. In v 0.1.0 the Dark Theme from setting was ignored, so it would just produce the standard light theme CSS for both theme settings. After upgrading, suddenly Dark Theme is working – which is great! However, I notice that my layout breaks with Dark Theme. Not really sure why that would be. I'm also not sure how to address it. Is there some CSS class or selector that I should be using to write CSS for the Dark Theme?
8 Replies
geoidesic [Aardvark Games]
geoidesic [Aardvark Games]OP•2mo ago
Currently I pass the GAS class to classes property in defaultOptions for the SvelteApplication: e.g. PCApplication.js 
import { SvelteApplication } from "@typhonjs-fvtt/runtime/svelte/application";
import { MODULE_ID, MODULE_CODE } from "~/src/helpers/constants"

export default class PCApplication extends SvelteApplication {

  static get defaultOptions() {
    const title = this.title;
    return foundry.utils.mergeObject(super.defaultOptions, {
      id: 'foundryvtt-actor-studio-pc-sheet',
      title: game.i18n.localize('GAS.ActorStudio') + ' - ' + game.i18n.localize('GAS.PCTitle'),
      classes: [MODULE_CODE],

...
import { SvelteApplication } from "@typhonjs-fvtt/runtime/svelte/application";
import { MODULE_ID, MODULE_CODE } from "~/src/helpers/constants"

export default class PCApplication extends SvelteApplication {

  static get defaultOptions() {
    const title = this.title;
    return foundry.utils.mergeObject(super.defaultOptions, {
      id: 'foundryvtt-actor-studio-pc-sheet',
      title: game.i18n.localize('GAS.ActorStudio') + ' - ' + game.i18n.localize('GAS.PCTitle'),
      classes: [MODULE_CODE],

...
And then in my sass file: 
@import 'Variables'
@import 'Fonts'
@import 'Mixins'
@import 'Animations'
@import 'features/equipment-purchase.scss'
.tjs-essential-svelte-esm
  --tjs-default-outline-focus-visible: 4px dotted orange

//- Classes that fall outside of my main application
.gas-settings-h4
  font-size: 1.1em
  color: var(--color-highlight)

//- Main application classes
#foundryvtt-actor-studio-pc-sheet
  --tjs-select-appearance: none
  --tjs-select-background: #f9f9f9 
  --tjs-select-background-size: 16px 16px
  --tjs-select-border: 1px solid #ccc
  --tjs-select-border-radius: 4px
  --tjs-select-box-shadow-focus: 0 0 5px rgba(0, 0, 0, 0.2)
  --tjs-select-box-shadow-focus-visible: 0 0 5px rgba(0, 0, 0, 0.5)
  --tjs-select-cursor: pointer
  --tjs-select-flex: 1
  --tjs-select-height: 24px
  --tjs-select-outline-focus-visible: none
  --tjs-select-outline-offset: 2px
  --tjs-select-overflow: hidden
  --tjs-select-padding: 0 5px
  --tjs-select-text-overflow: ellipsis
  --tjs-select-transition-focus-visible: box-shadow 0.2s ease
  --tjs-select-width: auto
.GAS
  ...
@import 'Variables'
@import 'Fonts'
@import 'Mixins'
@import 'Animations'
@import 'features/equipment-purchase.scss'
.tjs-essential-svelte-esm
  --tjs-default-outline-focus-visible: 4px dotted orange

//- Classes that fall outside of my main application
.gas-settings-h4
  font-size: 1.1em
  color: var(--color-highlight)

//- Main application classes
#foundryvtt-actor-studio-pc-sheet
  --tjs-select-appearance: none
  --tjs-select-background: #f9f9f9 
  --tjs-select-background-size: 16px 16px
  --tjs-select-border: 1px solid #ccc
  --tjs-select-border-radius: 4px
  --tjs-select-box-shadow-focus: 0 0 5px rgba(0, 0, 0, 0.2)
  --tjs-select-box-shadow-focus-visible: 0 0 5px rgba(0, 0, 0, 0.5)
  --tjs-select-cursor: pointer
  --tjs-select-flex: 1
  --tjs-select-height: 24px
  --tjs-select-outline-focus-visible: none
  --tjs-select-outline-offset: 2px
  --tjs-select-overflow: hidden
  --tjs-select-padding: 0 5px
  --tjs-select-text-overflow: ellipsis
  --tjs-select-transition-focus-visible: box-shadow 0.2s ease
  --tjs-select-width: auto
.GAS
  ...
TyphonJS (Michael)
TyphonJS (Michael)•2mo ago
Are you using some odd PUG Sass thing? I really can't help you with that. As mentioned previously if you stray from writing normal Sass styles or Svelte templates using PUG or something else you'll have to translate the norm to whatever you are using. Reposting / moving this here. Some info / examples on normal Sass usage. I'll have to come up with some documentation on how to approach it. For hard coding / embedding variations in components that you specifically write for Foundry you can use @at-root feature of Sass. An example here: https://github.com/typhonjs-fvtt-demo/essential-svelte-esm/blob/main/src/view/tjsdocument/embedded-collection/EmbeddedDocAppShell.svelte#L103C1-L105C11 In standalone package styles keyed to a particular app ID a basic example: https://github.com/typhonjs-fvtt-demo/essential-svelte-esm/blob/main/styles/init.scss#L35-L49 Mainly the &.themed.theme-dark / &.themed.theme-light part. It's just going to be a huge clusterfuck once additional themes and such are potentially registered w/ 3rd party theming modules if any of them can even make sense of the styles and do it "properly" vs a hack job. It's one thing to account for the platforms light / dark themes, but it's going to get messy real quick from there. IE how do you prepare for &.themed.theme-<UNKNOWN>? You'll want to separate the structural styles / CSS var mods from the thematic ones that will use the @at-root or &.themed.theme- additional qualifiers.
geoidesic [Aardvark Games]
geoidesic [Aardvark Games]OP•2mo ago
Ok, one thing that seems to be going wrong is the header-icon 
  static get defaultOptions() {
    const title = this.title;
    return foundry.utils.mergeObject(super.defaultOptions, {
      ...
      headerIcon: 'modules/my-module/assets/logo.svg',
  static get defaultOptions() {
    const title = this.title;
    return foundry.utils.mergeObject(super.defaultOptions, {
      ...
      headerIcon: 'modules/my-module/assets/logo.svg',
This is ending up in the class instead of the src: 
<i class="window-icon keep-minimized modules/my-moduleassets/logo.svg svelte-1cu6buv" style=""></i>
<i class="window-icon keep-minimized modules/my-moduleassets/logo.svg svelte-1cu6buv" style=""></i>
TyphonJS (Michael)
TyphonJS (Michael)•2mo ago
Yes, it doesn't support SVG. It never has. I'll look into adding SVG support though as that should be easy enough on headerIcon It basically does a regex search on file extension and if it detects an image will treat things differently, but if not will consider it a Font Awesome icon which is why you see the <i></i> About the PUG stuff though. Alas I can't spend time to figure out any intricasies in how it works in relation to Sass or if that is even connected at all w/ Sass. I do highly recommend that you consider just writing normal template / styles in Sass. The extra features of Sass come in handy with the theming aspects for v13+ in relation to Svelte components.
geoidesic [Aardvark Games]
geoidesic [Aardvark Games]OP•2mo ago
Don't worry about the Pug stuff, tx. Pug is only for the HTML part of the sfc btw, I am writing normal sass in the style tags and pug compiles to HTML. That went smoothly – I've upgraded successfully. Most of the work was CSS-related. I've replaced the svgs with pngs anyway and that's all good. Nice to have a Dark Theme now! That's Actor Studio done.
TyphonJS (Michael)
TyphonJS (Michael)•2mo ago
Nice.. done for now.. You'll have to update to the latest / final release of TRL, but there shouldn't be any problems. Looking into supporting SVG for the header icon. And yes... I see that you are using the older Sass indented style not commonly used. Got nice SVG support now for headerIcon, but also TJSMediaContent in #standard. Thanks for the unintended push! Will be available next release. Also a direct Svelte action for inline SVG loading from URL at #runtime/svelte/action/dom/inline-svg.
geoidesic [Aardvark Games]
geoidesic [Aardvark Games]OP•2mo ago
I am having trouble with something now, which I think might be related because it was working before. Actor Studio has a workflow which begins by building up an actor document that doesn't exist in game and then at a certain point in the workflow, it writes it to the game and then continues editing the in-game actor. The problem I'm having is with reactivity for the former part of the workflow. It was working fine before the upgrade but not after. I build up the application.js like this: 
  static get defaultOptions() {
    const title = this.title;
    return foundry.utils.mergeObject(super.defaultOptions, {
      id: 'foundryvtt-actor-studio-pc-sheet',
      title: game.i18n.localize('GAS.ActorStudio')+' v'+version,
      classes: [MODULE_CODE],
      width: game.settings.get(MODULE_ID, 'windowX') || 700,
      height: game.settings.get(MODULE_ID, 'windowX') || 800,
      headerIcon: 'modules/foundryvtt-actor-studio/assets/actor-studio-logo-dragon-blue.png',
      minWidth: 500,
      padding: 0,
      resizable: true,
      focusAuto: false,
      minimizable: true,
      svelte: {
        class: PCAppShell,
        target: document.body,
        props: function () {
          return { documentStore: this.#documentStore, document: this.reactive.document, levelUp: this.levelUp  };
        },
      },
    });
  }
  static get defaultOptions() {
    const title = this.title;
    return foundry.utils.mergeObject(super.defaultOptions, {
      id: 'foundryvtt-actor-studio-pc-sheet',
      title: game.i18n.localize('GAS.ActorStudio')+' v'+version,
      classes: [MODULE_CODE],
      width: game.settings.get(MODULE_ID, 'windowX') || 700,
      height: game.settings.get(MODULE_ID, 'windowX') || 800,
      headerIcon: 'modules/foundryvtt-actor-studio/assets/actor-studio-logo-dragon-blue.png',
      minWidth: 500,
      padding: 0,
      resizable: true,
      focusAuto: false,
      minimizable: true,
      svelte: {
        class: PCAppShell,
        target: document.body,
        props: function () {
          return { documentStore: this.#documentStore, document: this.reactive.document, levelUp: this.levelUp  };
        },
      },
    });
  }
And then in the application svelte component 
  import { ApplicationShell }   from '@typhonjs-fvtt/runtime/svelte/component/application';
  import { setContext, getContext, onMount, onDestroy } from "svelte";

  export let documentStore;
  setContext("#doc", documentStore);
  import { ApplicationShell }   from '@typhonjs-fvtt/runtime/svelte/component/application';
  import { setContext, getContext, onMount, onDestroy } from "svelte";

  export let documentStore;
  setContext("#doc", documentStore);
In the child components, when I was using 0.1.0, I would do this do update the non-in-game actor: 
const doc = getContext("#doc");
await $doc.updateSource(options);
$doc = $doc;
const doc = getContext("#doc");
await $doc.updateSource(options);
$doc = $doc;
We discussed this here previously: https://discord.com/channels/737953117999726592/1242608273207595049 And I see a similar discussion with Forien here: https://discord.com/channels/737953117999726592/1151262481222737982 Perhaps it makes more sense to continue discussing this in that previous discussion. Is the TJSSettings from 0.3.0 incompatible with Foundry v12? I keep getting this error: 
Error: An error occurred while rendering TestSettingsApp 27. Cannot read properties of undefined (reading 'create')
Error: An error occurred while rendering TestSettingsApp 27. Cannot read properties of undefined (reading 'create')
Is there a way I can get it to work with Foundry v12?
TyphonJS (Michael)
TyphonJS (Michael)•2mo ago
TRL 0.3.X is v13+; for v12 and below you can use 0.2.X. Foundry v13 changes everything up once sgain and there is no feasible way to make TRL work across v12 -> v13.

Did you find this page helpful?