Theming and iOS app

Does anyone know which theme attributes dictate the colors of the title bar and bottom icons in the iOS app? Some themes I’ve been using color everything white and I can’t for the life of me figure out which attribute it is.

I think this is a display error on iPhone X. These regions are outside of the webview.

Depends on the theme I use, most themes do properly show the icons and top bar coloured to the primary colour used in the theme. But I have 2 other themes I’ve copied from the forum here that don’t do it. I’ve tried painstakingly going through each line hoping to figure out which it is but haven’t found which it is. But it also could be an attribute I’m not using too.

Can you share the themes that do work?

Here’s one that works…

dark_mode_blue:
  primary-color: "#396FB6"
  light-primary-color: "#77a0d4"
  dark-primary-color: "#3539ce"
  text-primary-color: "#ffffff"
  primary-background-color: "#37464f"
  sidebar-text_-_background: "#3c4348"
  paper-card-background-color: "#263137" # Card background colour
  paper-card-header-color: "var(--text-primary-color)"
  secondary-background-color: "var(--primary-background-color)"
  primary-text-color: "var(--text-primary-color)"
  secondary-text-color: "#ffffff" #selected text on a dark bkgnd
  paper-listbox-background-color: "var(--sidebar-text_-_background)"
  paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
  paper-toggle-button-checked-button-color: "var(--dark-primary-color)"
  paper-toggle-button-checked-bar-color: "var(--dark-primary-color)"
  paper-slider-knob-color: "var(--primary-color)"
  paper-slider-knob-start-color: "var(--primary-color)"
  paper-slider-pin-color: "var(--primary-color)"
  paper-slider-active-color: "var(--primary-color)"
  paper-slider-secondary-color: "var(--light-primary-color)"
  paper-slider-container-color: "var(--sidebar-text_-_background)"
  paper-progress-secondary-color: "var(--sidebar-text_-_background)"
  paper-item-selected_-_background-color: "var(--primary-color)"
  paper-item-icon-active-color: "var(--primary-color)"
  paper-item-icon_-_color: "var(--primary-text-color)"
  paper-item-icon-color: "var(--primary-color)"
  paper-grey-50: "var(--sidebar-text_-_background)"
  paper-grey-200: "var(--primary-background-color)"
  label-badge-background-color: "var(--sidebar-text_-_background)"
  label-badge-text-color: "var(--text-primary-color)"
  label-badge-red: "var(--primary-color)"
  label-badge-blue: "var(--light-primary-color)"
  label-badge-green: "var(--dark-primary-color)"
  label-badge-yellow: "var(--text-primary-color)"
  label-badge-grey: "var(--paper-grey-500)"
  table-row-background-color: "var(--paper-card-background-color)"
  table-row-alternative-background-color: "var(--sidebar-text_-_background)"

This theme does not work for me. I still have empty bars at the top and bottom. I did notice that when I reinstall the app, the bars show properly until I enable location tracking and/or notifications.

When changing themes I find I always have to go to settings and tap the save button and then exit. It forces a reload and then the full theme is loaded. Otherwise it seems to not update the top and bottom colors. It’s more of an iOS app issue then a theme issue.

I figured this out. Looks like iOS doesn’t like variables for this line…

primary-color: 'hsl(var(--huesat) 80%)'

But if you manually configure the color for this one everything else seems to work fine…

primary-color: "#424242"

1 Like