No "severity" colors in specific theme

Hi , I have small problem with the custom card “bignumber-card” and also with “gauge-card” this is how its look in HA “default” theme and this is how its look in “dark-mode” theme

          - type: custom:bignumber-card
            title: temperature
            entity: sensor.sensibo1_temp
            scale: 20px
            from: left
            min: 15
            max: 45
            severity:
              - value: 27
                style: 'var(--label-badge-green)'
              - value: 30
                style: 'var(--label-badge-yellow)'
              - value: 45
                style: 'hsla(0, 100%, 33%, 1)'
########################################
dark-mode:
  primary-color: "#1172e2" ##7d34d6" # Primary (most of the UI)
  primary-background-color: "#282C34" # Primary background colour (dialogs, e.t.c)
  secondary-background-color: "#21252B" # Secondary background colour (main UI background)
  paper-card-background-color: "transparant" # Card background colour
  paper-item-icon-color: "#1172e2" #"#7d34d6" # Icon colour
  primary-text-color: "#EEEEEE" # Primary text colour
  secondary-text-color: "#474E5D" # Secondary text colour
  disabled-text-color: "rgba(255, 255, 255, 0.5)" # Disabled text colour
  divider-color: "rgba(255, 255, 255, 0.12)" # Divider colour
  paper-card-header-color: "#FFFFFF" # Card header text colour
  paper-listbox-background-color: "#21252B" # Listbox background colour
  paper-listbox-color: "#FFFFFF" # Listbox text colour
  paper-grey-200: "#282C34" # Listbox selected item background colour
  table-row-background-color: "transparant"
  table-row-alternative-background-color: "transparant"
  sidebar-icon-color: "#EEEEEE"
  sidebar-selected-icon-color: "#1172e2" #"#7d34d6"
  label-badge-red: '#C6C6C6'     

Another thing, there is a similar problem with the “gauge-card” like you can see here:

              - type: custom:gauge-card
                title: Download
                entity: sensor.speedtest_download
                scale: '33px'
                min: 0
                max: 420
                severity:
                  red: 0
                  green: 250
                  amber: 370

this theme is “special” because there is no background to cards , any help?

[VDRainer]

I changed the severityMap to fixed values in the gauge-card.js to avoid problems with dark themes.

    const severityMap = {
      red: "#e2120b",
      green: "#12c915",
      amber: "#fff600",
      normal: "#103ee5",
    }

Maybe add the value/style options like in the bignumber-card to the gauge severity object? Then you don’t have to hack the *.js or the theme and define the colors in the ui-lovelace.yaml.

[iantrich]

cards moved: card moved: https://github.com/custom-cards/bignumber-card, https://github.com/custom-cards/gauge-card