Link's font color in markdown card based on light or dark mode

Configuration Frontend
1

I have a couple of markdown cards which I use to show devices that online and offline. The cards are set up to go to the respective device when clicking on the icon or state and clicking on the device’s subtitle goes to the respective integration. I have it formatted to match the look and feel of the entities card and I’m pretty happy with the results for the most part.

This is what the offline card looks like:
image

This is the markdown card code:

type: markdown
title: Offline Integration Devices
content: >
  {%- set result = namespace(offline_devices=[]) -%}
  {%- set device_ids = 
    states
      | selectattr('state', 'in', ['unavailable'])
      | rejectattr('entity_id', 'in', integration_entities('zwave_js'))
      | rejectattr('entity_id', 'in', integration_entities('zha'))
      | rejectattr('entity_id', 'in', integration_entities('esphome'))
      | map(attribute='entity_id')
      | map("device_id")
      | map("string")
      | unique
      | select("ne", "None")
      | list
  -%}

  {%- for device_id in device_ids -%}
    {%- set device_name = iif(device_attr(device_id,"name_by_user"), device_attr(device_id,"name_by_user"), device_attr(device_id,"name")) | string -%}
    {%- set identifiers = device_attr(device_id,"identifiers") -%}
    {%- set result.offline_devices = result.offline_devices + [dict(device_name=device_name,device_id=device_id,identifiers=identifiers)] -%}
  {%- endfor -%}
  {%- set sorted_list = result.offline_devices | sort(attribute="device_name") -%}

  <table width=100% border=0>
  {%- for device in sorted_list -%}
    {%- set ids = device.identifiers -%}
    <tr><td align=left width=50px>
    {%- if ids -%}
    {%- set ids = ids | list | first -%}
    &nbsp;&nbsp;<a href="/config/devices/device/{{ device.device_id }}"><font color=#f44336><ha-icon icon=mdi:cloud-off ></ha-icon></font></a>&nbsp;&nbsp;&nbsp;</td><td align=left>{{ device.device_name }}<br><a href="/config/integrations/integration/{{ ids[0] }}"><font color=#727272>Integration: {{ ids[0] }}</font></a></td><td align=right width=50px><a href="/config/devices/device/{{ device.device_id }}">Offline</a></tr>
    {%- endif -%}</td>
  {%- endfor -%}</table>
card_mod:
  style:
    ha-markdown:
      $: |
        a {
          text-decoration: none;
        }
        th, td {
          padding-top: 0px;
          padding-bottom: 6px;
          padding-left: 0px;
          padding-right: 0px;
        }

The one thing that I am still struggling to achieve is getting the font color on the blue “state” link to appear black or white based on the current theme (light or dark). I’ve tried using <font color = inherit> but it turns it green for some reason. I also tried <font color = none> and that changed the font color to black when viewed in light mode but it did not switch to white when viewed in dark mode.

Does anyone have any ideas or suggestions? Much appreciated. Thanks.