dragontheory / D7460N-with-db

Your data your way. Fast, easy, and secure.
https://d7460n-app-with-resizer.pages.dev/
2 stars 1 forks source link

Fix SVG logo changing color depending on if it is a bg size or favicon size #17

Closed dragontheory closed 2 years ago

dragontheory commented 2 years ago

Logo should assume light styles for dark system theme, dark styles for light system them, and light styles for favicon size using media queries.

dragontheory commented 2 years ago
<svg
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRatio="xMidYMid meet"
  viewBox="0 0 380 380"
  fill="var(--fill-color)"
  fill-opacity="var(--fill-opacity)"
  stroke="var(--stroke-color)"
  stroke-opacity="var(--stroke-opacity)"
  stroke-width="10">
  <path d="m1805 3506c-60-23-285-107-499-187-214-79-381-145-370-146 10-2 237 8 504 20l485 23 230-112c127-61 337-164 468-227l237-116v-613-613l-92-110c-115-137-538-562-678-680-58-49-116-98-129-109l-25-21 23 35c80 127 111 235 111 390 0 94-13 211-26 232-3 4-22-3-42-16-20-12-52-28-71-34-147-51-285 72-285 253 0 84 20 149 75 240 22 37 39 69 36 71-2 2-26 20-52 39l-48 34 27 7c41 10 193-2 251-20 59-18 97-44 77-53-21-8-72-54-72-64 0-5 10-9 23-9 103-1 335-101 472-205l87-65 28 20c122 87 200 264 200 454v91l-37-55-36-54-36 43c-20 23-55 73-77 109l-42 67 20 22 20 22-40 48c-114 138-253 396-316 591-10 28-21 50-26 47-12-7-32-98-33-155-1-27-4-50-7-50s-36 24-75 53c-91 68-263 243-345 351-36 46-68 85-72 85-14 1-9-164 7-246 8-43 26-100 40-128 13-27 23-50 22-52-2-1-54 24-117 56-265 135-558 211-817 211-125 0-125 0-31-99 97-101 182-218 152-208-10 3-50 18-89 31-38 14-80 26-92 26h-23v-649-648l88-119c260-352 612-695 987-964 77-55 145-100 151-100 15 0 219 143 332 233 311 249 638 588 840 873l62 87v752 752l-227 111c-126 61-403 197-616 301-214 105-392 191-395 190-4 0-56-20-117-43zm510-1248c37-56 49-84 53-123 3-27 2-48 0-45-28 28-101 126-108 146-15 38-12 94 5 94 1 0 24-33 50-72z" transform="matrix(.1 0 0 -.1 0 380)"/>
  <defs>
    <style type="text/css">
      :root {
        --fill-color: #000; /* 222035 */
        --fill-opacity: 1.0;
        color-scheme: dark light;
      }
      @media (prefers-color-scheme: dark) {:root {--fill-color: #DDD;}}
      @media (min-width: 600px) {:root {--fill-color: #000000;}} /* 222035 */
    </style>
  </defs>
</svg>