Custom Theming

[derin]

Anyone mind giving me a second pair of eyes. I'm trying to implement a custom theme. Followed the documentation and my syntax appears to be correct but I cant get the custom color values ie the custom theme to show up either by default or as an option. What am I missing?

  "default_server_config": {
    "m.homeserver": {
      "base_url": "https://foobar.foo.app",
      "server_name": "foo.app"
    },
    "m.identity_server": {
      "base_url": "https://vector.im"
    }
  },
  "disable_custom_urls": true,
  "disable_guests": true,
  "disable_login_language_selector": false,
  "disable_3pid_login": true,
  "brand": "appsurd",
  "integrations_ui_url": "https://scalar.vector.im/",
  "integrations_rest_url": "https://scalar.vector.im/api",
  "integrations_widgets_urls": [
    "https://scalar.vector.im/_matrix/integrations/v1",
    "https://scalar.vector.im/api",
    "https://scalar-staging.vector.im/_matrix/integrations/v1",
    "https://scalar-staging.vector.im/api",
    "https://scalar-staging.riot.im/scalar/api"
  ],
  "bug_report_endpoint_url": "https://element.io/bugreports/submit",
  "defaultCountryCode": "USA",
  "showLabsSettings": false,
  "features": {
    "feature_pinning": "labs",
    "feature_custom_status": "labs",
    "feature_custom_tags": "labs",
    "feature_state_counters": "labs"
  },
  "default_federate": true,
  "roomDirectory": {
    "servers": [
      "matrix.org"
    ]
  },
  "piwik": false,
  "enable_presence_by_hs_url": {
    "https://matrix.org": false,
    "https://matrix-client.matrix.org": false
  },
  "settingDefaults": {
    "breadcrumbs": true
  },
  "jitsi": {
    "preferredDomain": "jitsi.riot.im"
  },
  "branding": {
    "welcomeBackgroundUrl": "/custom/background.jpg",
    "authHeaderLogoUrl": "/custom/appsurd_wordmark_dark.svg",
     "default_theme": "custom-appsurd"
  },
  "custom_themes": [
    {
      "name": "appsurd",
      "is_dark": false,
      "colors": {
        "accent-color": "#df0013",
        "primary-color": "#00aff4",
        "warning-color": "#faa81ad9",
        "sidebar-color": "#202225",
        "roomlist-background-color": "#2f3136",
        "roomlist-text-color": "#dcddde",
        "roomlist-text-secondary-color": "#8e9297",
        "roomlist-highlights-color": "#4f545c52",
        "roomlist-separator-color": "#40444b",
        "timeline-background-color": "#36393f",
        "timeline-text-color": "#dcddde",
        "secondary-content": "#dcddde",
        "tertiary-content": "#dcddde",
        "timeline-text-secondary-color": "#b9bbbe",
        "timeline-highlights-color": "#04040512",
        "reaction-row-button-selected-bg-color": "#b9bbbe"
      }
      }
  ]
}

[murgero]

@derin This is the wrong place to ask, I think since this is not cloudron specific.

That being said, maybe there is some help to be had anyway as a best effort

When you load element, can you open your broswers devtools and check for errors?

[girish]

@derin In the example, the custom_themes is a key inside "settingDefaults":

[derin]

@murgero I appreciate the help and will try that. If all else fails I'll give the element.io community space a try.

Looking in the console gave me this:

Initialised rageshake. rageshake.ts:50:19
To fix line numbers in Chrome: Meatball menu → Settings → Ignore list → Add /rageshake\.js$ rageshake.ts:50:19
Using Web platform rageshake.ts:50:19
Using WebAssembly Olm rageshake.ts:50:19
Configuring rageshake persistence... rageshake.ts:50:19
returning explicit theme: custom-appsurd 2 rageshake.ts:50:19
Loading skin... rageshake.ts:50:19
Skin loaded! rageshake.ts:50:19
set language to en-us

Brilliant. Now I just need to find out why it doesnt like my red accent color.

[derin]

@girish thanks for pointing that out. It got more than half way there. thank you!! The custom theme is applied as default and shows in the settings panel but for some odd reason it wont replace the element.io green with the accent color I chose...will ask in the element.io chat rooms. Thanks again @girish.

[girish]

@derin would be great if you could post your final working theme here when you have it working.

[humptydumpty]

@derin any luck with this? I'm just trying to add a logo and background and can't get it to work. Suggestions?

[humptydumpty]

@girish Element's docs shows the code a bit differently. Please see: https://github.com/vector-im/element-web/blob/develop/docs/config.md#branding-and-embedded_pages

They are using the full URL link and the key itself is different. ex: welcome_background_url

Sadly, this also didn't work.

[girish]

@humptydumpty See https://github.com/vector-im/element-web/issues/22370 . Specifically https://github.com/vector-im/element-web/issues/22370#issuecomment-1140178322 . It seems a custom welcome page is used by default and those settings are ignored.

The below works for me:

  "embedded_pages": {
    "login_for_welcome": true
  },
  "branding": {
    "auth_header_logo_url": "https://www.cloudron.io/img/logo.svg"
  },

[humptydumpty]

@girish Yep, that worked perfectly. Thanks, Girish!