search

packruler / traefik-themepark

Easily add theme-park.dev themes to supported applications
Apache License 2.0
34 stars 4 forks source link

Improve Safari address bar thumbing #9

Closed beloso closed 2 years ago

beloso commented 2 years ago

Is your feature request related to a problem? Please describe. In Safari the address bar is not being themed according to the theme.park theme. I.e. it's orange in Prowlarr

Describe the solution you'd like Unsure of what's the best approach to do this, it might be needed to overwrite or remove <meta name="theme-color" content="....">

More info: https://css-tricks.com/meta-theme-color-and-trickery/

Additional context

Screenshot 2022-10-21 at 18 59 32

EDIT If not possible to pull the proper color from the css layers, I'd be happy to have a field where I could send the color value I want to see in the address bar.

packruler commented 2 years ago

Can you link me to the documentation for this feature? As far as I am aware theme-park primarily adds one <style ... /> unless it is for an addon.

beloso commented 2 years ago

Oh, sorry. I don't think this is a theme-park feature. And as far as my experience goes Safari macOS browser is the only one that doesn't color the "address bar" appropriately (see my prowlarr snapshot above). From what I could understand this can only be solved by sub filtering/replacing the <meta name="theme-color" content="...."> I figure I can use another Traefik plugin and do this, just thought to ask if it would be possible to integrate it in this one.

packruler commented 2 years ago

You should be able to use my Rewrite Body plugin. This plugin is mostly a wrapper for that plugin to simplify the setup of theme-park themes. I expect you will need to make a plugin reference to add the link tag for the theme as well as the meta tag you are referencing, but it should be relatively straight forward.

For example:

middlewares:
    rewrite-foo:
      plugin:
        rewrite-body:
          lastModified: true

          rewrites:
            - regex: </head>
              replacement: >-
                <link rel="stylesheet" type="text/css" href="https://theme-park.dev/css/base/prowlarr/nord.css">
                <meta name="theme-color" content="#000000">
                </head>

          monitoring:
            methods:
              - GET
            types:
              - text/html