<![CDATA[Custom Theming]]>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"
      }
      }
  ]
}
]]>https://forum.cloudron.io/topic/6059/custom-themingRSS for NodeMon, 05 Oct 2026 23:57:59 GMTWed, 24 Nov 2021 11:02:32 GMT60<![CDATA[Reply to Custom Theming on Mon, 22 May 2023 13:15:19 GMT]]>@girish Yep, that worked perfectly. Thanks, Girish!

]]>https://forum.cloudron.io/post/67017https://forum.cloudron.io/post/67017Mon, 22 May 2023 13:15:19 GMT<![CDATA[Reply to Custom Theming on Mon, 22 May 2023 09:30:24 GMT]]>@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"
  },
]]>https://forum.cloudron.io/post/67005https://forum.cloudron.io/post/67005Mon, 22 May 2023 09:30:24 GMT<![CDATA[Reply to Custom Theming on Sun, 21 May 2023 14:41:22 GMT]]>@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.

]]>https://forum.cloudron.io/post/66990https://forum.cloudron.io/post/66990Sun, 21 May 2023 14:41:22 GMT<![CDATA[Reply to Custom Theming on Sun, 21 May 2023 13:57:40 GMT]]>@derin any luck with this? I'm just trying to add a logo and background and can't get it to work. Suggestions?

]]>https://forum.cloudron.io/post/66988https://forum.cloudron.io/post/66988Sun, 21 May 2023 13:57:40 GMT<![CDATA[Reply to Custom Theming on Thu, 25 Nov 2021 20:37:52 GMT]]>@derin would be great if you could post your final working theme here when you have it working.

]]>https://forum.cloudron.io/post/39799https://forum.cloudron.io/post/39799Thu, 25 Nov 2021 20:37:52 GMT<![CDATA[Reply to Custom Theming on Thu, 25 Nov 2021 12:59:24 GMT]]>@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.

]]>https://forum.cloudron.io/post/39772https://forum.cloudron.io/post/39772Thu, 25 Nov 2021 12:59:24 GMT<![CDATA[Reply to Custom Theming on Thu, 25 Nov 2021 13:03:22 GMT]]>@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.

]]>https://forum.cloudron.io/post/39771https://forum.cloudron.io/post/39771Thu, 25 Nov 2021 13:03:22 GMT<![CDATA[Reply to Custom Theming on Wed, 24 Nov 2021 19:08:54 GMT]]>@derin In the example, the custom_themes is a key inside "settingDefaults":

]]>https://forum.cloudron.io/post/39748https://forum.cloudron.io/post/39748Wed, 24 Nov 2021 19:08:54 GMT<![CDATA[Reply to Custom Theming on Wed, 24 Nov 2021 15:44:34 GMT]]>@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?

]]>https://forum.cloudron.io/post/39735https://forum.cloudron.io/post/39735Wed, 24 Nov 2021 15:44:34 GMT