Cloudron makes it easy to run web apps like WordPress, Nextcloud, GitLab on your server. Find out more or install now.


Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Bookmarks
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

Cloudron Forum

Apps | Demo | Docs | Install
  1. Cloudron Forum
  2. Matrix (Synapse/Element)
  3. Custom Theming

Custom Theming

Scheduled Pinned Locked Moved Matrix (Synapse/Element)
10 Posts 4 Posters 2.0k Views 5 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    derin
    wrote on last edited by
    #1

    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"
          }
          }
      ]
    }
    
    murgeroM girishG 2 Replies Last reply
    0
    • D 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"
            }
            }
        ]
      }
      
      murgeroM Offline
      murgeroM Offline
      murgero
      App Dev
      wrote on last edited by
      #2

      @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://urgero.org
      ~ Professional Nerd. Freelance Programmer. ~

      D 1 Reply Last reply
      0
      • D 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"
              }
              }
          ]
        }
        
        girishG Offline
        girishG Offline
        girish
        Staff
        wrote on last edited by girish
        #3

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

        D 1 Reply Last reply
        0
        • murgeroM 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?

          D Offline
          D Offline
          derin
          wrote on last edited by derin
          #4

          @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.

          1 Reply Last reply
          1
          • girishG girish

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

            D Offline
            D Offline
            derin
            wrote on last edited by derin
            #5

            @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.

            girishG 1 Reply Last reply
            0
            • D 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.

              girishG Offline
              girishG Offline
              girish
              Staff
              wrote on last edited by
              #6

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

              1 Reply Last reply
              0
              • humptydumptyH Offline
                humptydumptyH Offline
                humptydumpty
                wrote on last edited by
                #7

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

                1 Reply Last reply
                0
                • humptydumptyH Offline
                  humptydumptyH Offline
                  humptydumpty
                  wrote on last edited by humptydumpty
                  #8

                  @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.

                  1 Reply Last reply
                  0
                  • girishG Offline
                    girishG Offline
                    girish
                    Staff
                    wrote on last edited by
                    #9

                    @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"
                      },
                    
                    humptydumptyH 1 Reply Last reply
                    3
                    • girishG 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"
                        },
                      
                      humptydumptyH Offline
                      humptydumptyH Offline
                      humptydumpty
                      wrote on last edited by
                      #10

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

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Bookmarks
                      • Search