Theme variable on Mobile

Configuration
1

Does anyone know what variable it is for Dashboard txt? I only see this on iOS. In my browser it’s fine.
image

2

@Ildar_Gabdullin maybe you can help with this?
I think it’s this variable:

image

If I add color: to .main-title in the console it changes it.
I tried modding my theme thus:

  card-mod-theme: ios-dark-mode-blue-red-mod
  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
    }
    .main-title {
      color: var(--primary-color);
    }
  header-height: 48px

But it isn’t that.

Weird thing is on my desktop chrome it is the right color - it’s only on mobile that it is black. Really weird.

Any help is appreciated. Thanks. And sorry for calling you out but you are a genius with this stuff…

3

Hello David! Unfortunately, I have not learned themes so far… but will try to experiment with your case, on this Monday.
Do not apologize, please. You can call me any time.

1 Like
4

Hello again, David.
Cannot simulate or check your case. I realized that you are using Hassio, and I am using HA in Docker, I just do not have this “Addons” tab…
But I have other tabs like “Logbook” and I think that all tabs’ color is managed by ONE variable - and this is the "--app-header-text-color" variable.
As I said before, I have never worked with themes; I think that this variable should be changed inside a theme.

5

Thanks. I’ll see if I can play with that. I think it’s a frontend issue actually as it’s fine on my desktop even if I resize the window and it only does this on mobile both in the iOS app and chrome. It’s really only an annoyance.

Thanks for having a look…

6

I set that variable to red and it just changes the icon colour…

7

Tomorrow I will check it again.
Since I am not using themes, I tested styles in Inspector (directly changed the color).

8

Yeah I could change it in dev-tools by inspecting the element as well. I’m pretty sure it has to be a frontend issue

9

David, today I downloaded a Google Dark theme, changed it a bit:
изображение
Then I opened a user’s settings, selected the theme.
Then header’s color changed to red:

изображение
изображение768×468 22.7 KB

Then I opened HA companion app on iPad Air, selected the theme - and the header’s color changed too:
изображение
Is it what you are looking for?

10

Yeah! Let me try that tomorrow and I’ll report back. Thanks!

11

Doesn’t change the text on the Supervisor Panel. It does change it on the profile page. It also changes all the main icon colours! I think I tried that before.

12

Since I do not have the Supervisor, could you check a style for this page in Code Inspector? I am interested in the header’s text color.

Regarding icons: in my setup I have some tabs with text headers, some tabs with icon headers. Both are of red color if styled.

Could you send me some pics:

  • supervisor panel
  • main menu panel (located on the left)
  • a logbook tab (or any tab with text header)
  • any tab with icon header
13

As per post #2 it appears to be inheriting it from shadow-root, If I add a color to .main-title it changes the relevant text correctly. I only use icons for my tabs. See first 2 posts for screenshots.

14

So this was fixed in the frontend in 2021.8.4.