chore: update logo to support dark/light themes

MoustaphaCamara · MoustaphaCamara · commit 07796dd3c537 · 2025-02-22T13:48:45.000+01:00
- Implemented a &lt;picture&gt; element with media queries.
- Use reactbits-gh-white.svg for dark mode and reactbits-gh-black.svg for light mode.
- Updated fallback &lt;img&gt; tag accordingly.
diff --git a/README.md b/README.md
@@ -1,7 +1,11 @@
 <div align="center">
 	<br>
 	<br>
-	<img src="./src/assets/logos/reactbits-gh.svg" alt="react-bits logo" width="1000">
+    <picture>
+      <source media="(prefers-color-scheme: light)" srcset="src/assets/logos/reactbits-gh-black.svg">
+      <source media="(prefers-color-scheme: dark)" srcset="src/assets/logos/reactbits-gh-white.svg">
+      <img src="src/assets/logos/reactbits-gh-black.svg" alt="react-bits logo" width="1000">
+    </picture>
 	<br>
 	<br>
 </div>
diff --git a/src/assets/logos/reactbits-gh-black.svg b/src/assets/logos/reactbits-gh-black.svg
@@ -0,0 +1,47 @@
+<svg width="1576" height="407" viewBox="0 0 1576 407" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="728.187" cy="305.828" r="43.4112" transform="rotate(15 728.187 305.828)" stroke="#00D8FF" stroke-width="3"/>
+    <circle cx="1411.82" cy="303.232" r="32.7654" stroke="#FFEE51" stroke-width="3"/>
+    <rect x="1027.42" y="51.2611" width="94.5253" height="94.5253" rx="15.5953" transform="rotate(9.908 1027.42 51.2611)" stroke="#7CFF67" stroke-width="3"/>
+    <circle cx="172.03" cy="274.775" r="44.8502" stroke="#FF87B2" stroke-width="3"/>
+    <rect x="381.292" y="88.0181" width="64.8694" height="64.8694" rx="10.3969" transform="rotate(-13.1099 381.292 88.0181)" stroke="#FF9346" stroke-width="3"/>
+    <g filter="url(#filter0_d_301_35)">
+        <path d="M30.2836 304.751V113.045H77.4493L82.394 148.42C87.212 140.051 93.0444 132.951 99.891 127.119C106.738 121.287 114.725 116.722 123.854 113.426C132.983 110.129 142.873 108.481 153.523 108.481V164.775H135.646C128.038 164.775 120.938 165.663 114.345 167.438C108.006 169.213 102.427 172.129 97.6088 176.186C93.0444 179.99 89.4942 185.315 86.9585 192.162C84.6763 198.755 83.5352 207.123 83.5352 217.266V304.751H30.2836Z" fill="black"/>
+        <path d="M261.182 309.315C241.91 309.315 224.794 305.258 209.833 297.144C195.125 288.775 183.587 277.238 175.219 262.53C166.851 247.569 162.667 230.326 162.667 210.8C162.667 191.021 166.724 173.524 174.839 158.309C183.207 142.841 194.745 130.669 209.452 121.794C224.413 112.918 241.784 108.481 261.563 108.481C280.581 108.481 297.191 112.665 311.391 121.033C325.845 129.401 337.002 140.685 344.863 154.886C352.978 169.086 357.035 185.442 357.035 203.953C357.035 206.489 356.908 209.278 356.655 212.321C356.655 215.364 356.401 218.661 355.894 222.211H205.673V189.88H303.023C302.262 178.215 297.951 168.959 290.09 162.113C282.483 155.013 272.974 151.462 261.563 151.462C252.941 151.462 245.08 153.491 237.98 157.548C230.88 161.606 225.301 167.565 221.244 175.426C217.186 183.287 215.158 193.303 215.158 205.475V216.505C215.158 226.395 217.06 235.144 220.863 242.751C224.667 250.105 229.992 255.81 236.839 259.867C243.685 263.925 251.673 265.953 260.802 265.953C269.931 265.953 277.411 264.052 283.244 260.248C289.33 256.444 293.894 251.499 296.937 245.413H351.33C347.78 257.332 341.694 268.109 333.072 277.745C324.704 287.381 314.434 295.115 302.262 300.947C290.09 306.526 276.397 309.315 261.182 309.315Z" fill="black"/>
+        <path d="M441.31 309.315C425.588 309.315 412.402 306.78 401.751 301.708C391.355 296.383 383.62 289.409 378.549 280.788C373.731 271.912 371.322 262.15 371.322 251.499C371.322 240.088 374.238 229.945 380.07 221.07C385.903 212.195 394.905 205.221 407.076 200.15C419.248 195.078 434.463 192.542 452.721 192.542H499.886C499.886 183.413 498.618 175.933 496.083 170.101C493.8 164.015 489.997 159.45 484.672 156.407C479.6 153.364 472.753 151.843 464.132 151.843C454.749 151.843 446.762 153.871 440.169 157.929C433.829 161.986 429.899 168.072 428.377 176.186H376.647C378.169 162.493 382.733 150.702 390.34 140.812C397.948 130.669 408.091 122.808 420.77 117.229C433.702 111.397 448.283 108.481 464.512 108.481C482.516 108.481 498.111 111.524 511.297 117.61C524.737 123.696 535.007 132.444 542.107 143.855C549.461 155.266 553.138 169.34 553.138 186.076V306.411H502.153L502.169 275.843C499.633 280.914 496.336 285.479 492.279 289.536C488.475 293.593 484.038 297.144 478.966 300.186C473.895 302.976 468.189 305.131 461.85 306.653C455.764 308.428 448.917 309.315 441.31 309.315ZM454.242 268.236C460.582 268.236 466.287 267.221 471.359 265.193C476.43 262.91 480.741 259.741 484.291 255.683C487.841 251.626 490.757 247.062 493.04 241.99C495.322 236.665 496.843 230.959 497.604 224.874V224.493H459.187C451.833 224.493 445.747 225.508 440.929 227.536C436.365 229.311 432.942 231.974 430.659 235.524C428.377 238.82 427.236 242.624 427.236 246.935C427.236 251.499 428.377 255.43 430.659 258.726C432.942 262.023 436.111 264.432 440.169 265.953C444.226 267.475 448.917 268.236 454.242 268.236Z" fill="black"/>
+        <path d="M672.082 309.315C652.81 309.315 635.694 305.004 620.732 296.383C605.771 287.761 593.98 275.97 585.358 261.009C576.99 246.047 572.806 228.931 572.806 209.659C572.806 189.88 576.99 172.51 585.358 157.548C593.98 142.334 605.771 130.415 620.732 121.794C635.694 112.918 652.937 108.481 672.462 108.481C697.06 108.481 717.726 115.074 734.462 128.26C751.452 141.193 762.229 159.07 766.794 181.892H710.119C708.09 173.27 703.526 166.55 696.426 161.732C689.579 156.661 681.338 154.125 671.702 154.125C663.08 154.125 655.346 156.407 648.499 160.972C641.906 165.283 636.708 171.495 632.904 179.61C629.101 187.724 627.199 197.487 627.199 208.898C627.199 217.52 628.213 225.254 630.242 232.101C632.524 238.694 635.567 244.399 639.37 249.217C643.428 254.035 648.246 257.712 653.824 260.248C659.403 262.784 665.362 264.051 671.702 264.051C678.295 264.051 684.127 263.037 689.199 261.009C694.27 258.726 698.708 255.557 702.512 251.499C706.315 247.189 708.851 242.117 710.119 236.285H766.794C762.229 258.6 751.452 276.35 734.462 289.536C717.473 302.722 696.679 309.315 672.082 309.315Z" fill="black"/>
+        <path d="M868.438 376.116C854.744 376.116 842.699 373.961 832.303 369.65C822.159 365.339 814.298 358.239 808.72 348.349C803.141 338.46 800.352 325.02 800.352 308.03V157.548H783.304V113.045L800.304 113.056L800.262 60.1741H853.603V113.045H903.431V157.548H853.603V308.41C853.603 316.779 855.378 322.611 858.928 325.907C862.732 329.204 869.071 330.852 877.947 330.852H903.051V376.116H868.438Z" fill="black"/>
+        <path d="M1042.79 309.315C1032.9 309.315 1024.15 308.047 1016.54 305.512C1008.94 303.229 1002.22 299.933 996.383 295.622C990.551 291.311 985.606 286.366 981.549 280.788L981.557 304.751H928.298V30.8857H981.549V139.291C987.381 130.415 995.242 123.062 1005.13 117.229C1015.28 111.397 1027.7 108.481 1042.41 108.481C1059.91 108.481 1075.5 112.918 1089.19 121.794C1103.14 130.415 1114.04 142.334 1121.91 157.548C1130.02 172.51 1134.08 189.753 1134.08 209.278C1134.08 228.297 1130.02 245.413 1121.91 260.628C1114.04 275.843 1103.27 287.761 1089.57 296.383C1075.88 305.004 1060.29 309.315 1042.79 309.315ZM1029.86 262.91C1039.49 262.91 1048.11 260.628 1055.72 256.064C1063.33 251.499 1069.29 245.16 1073.6 237.045C1077.91 228.931 1080.06 219.675 1080.06 209.278C1080.06 198.628 1077.91 189.246 1073.6 181.131C1069.29 173.017 1063.33 166.677 1055.72 162.113C1048.11 157.295 1039.49 154.886 1029.86 154.886C1019.97 154.886 1011.22 157.295 1003.61 162.113C996.257 166.677 990.424 173.017 986.114 181.131C981.803 188.992 979.647 198.248 979.647 208.898C979.647 219.548 981.803 228.931 986.114 237.045C990.424 245.16 996.257 251.499 1003.61 256.064C1011.22 260.628 1019.97 262.91 1029.86 262.91Z" fill="black"/>
+        <path d="M1157.16 304.751V113.045H1210.41V304.751H1157.16Z" fill="black"/>
+        <path d="M1464.2 309.315C1446.45 309.315 1431.11 306.526 1418.18 300.947C1405.24 295.115 1395.1 287.381 1387.75 277.745C1380.39 267.855 1376.08 256.698 1374.81 244.272H1428.07C1429.08 248.837 1430.98 253.021 1433.77 256.824C1436.81 260.375 1440.75 263.291 1445.56 265.573C1450.63 267.855 1456.59 268.996 1463.44 268.996C1470.03 268.996 1475.36 268.109 1479.42 266.334C1483.73 264.305 1486.9 261.769 1488.92 258.726C1491.21 255.683 1492.35 252.387 1492.35 248.837C1492.35 243.765 1490.83 239.835 1487.78 237.045C1484.74 234.256 1480.3 231.974 1474.47 230.199C1468.64 228.424 1461.67 226.775 1453.55 225.254C1444.42 223.225 1435.42 220.943 1426.54 218.407C1417.92 215.872 1410.06 212.575 1402.96 208.518C1396.12 204.207 1390.66 198.882 1386.61 192.542C1382.55 186.203 1380.52 178.342 1380.52 168.959C1380.52 157.548 1383.56 147.278 1389.65 138.15C1395.99 129.021 1404.99 121.794 1416.66 116.469C1428.57 111.143 1442.77 108.481 1459.26 108.481C1482.59 108.481 1500.97 113.806 1514.41 124.456C1528.1 134.853 1536.22 149.053 1538.75 167.058H1488.54C1487.28 161.479 1484.11 157.168 1479.04 154.125C1473.96 151.082 1467.24 149.561 1458.88 149.561C1450.25 149.561 1443.53 151.082 1438.72 154.125C1434.15 157.168 1431.87 161.225 1431.87 166.297C1431.87 169.593 1433.39 172.636 1436.43 175.426C1439.48 177.961 1443.79 180.244 1449.37 182.272C1455.2 184.047 1462.3 185.822 1470.67 187.597C1485.63 190.64 1498.69 194.191 1509.85 198.248C1521 202.051 1529.75 207.63 1536.09 214.984C1542.43 222.084 1545.6 232.481 1545.6 246.174C1545.85 258.346 1542.56 269.25 1535.71 278.886C1529.12 288.522 1519.73 296.002 1507.56 301.328C1495.39 306.653 1480.94 309.315 1464.2 309.315Z" fill="black"/>
+        <path d="M1318.35 304.751C1304.65 304.751 1292.61 302.596 1282.21 298.285C1272.07 293.974 1264.21 286.874 1258.63 276.984C1253.05 267.095 1250.26 253.655 1250.26 236.665V157.549H1233.21V113.045L1250.21 113.056L1250.17 60.1743H1303.51V113.045H1353.34V157.549H1303.51V237.046C1303.51 245.414 1305.29 251.246 1308.84 254.542C1312.64 257.839 1318.98 259.487 1327.86 259.487H1352.96V304.751H1318.35Z" fill="black"/>
+        <rect x="1157.13" y="30.8857" width="53.2783" height="53.2805" fill="black"/>
+        <circle cx="1290.46" cy="170.101" r="18.1435" fill="black"/>
+        <circle cx="710.043" cy="163.739" r="18.1435" fill="black"/>
+        <circle cx="680.621" cy="148.628" r="18.1435" fill="black"/>
+        <circle cx="647.542" cy="152.998" r="18.1435" fill="black"/>
+        <circle cx="200.237" cy="152.998" r="18.1435" fill="black"/>
+        <circle cx="624.161" cy="175.132" r="18.1435" fill="black"/>
+        <circle cx="616.096" cy="205.576" r="18.1435" fill="black"/>
+        <circle cx="622.799" cy="236.931" r="18.1435" fill="black"/>
+        <circle cx="644.334" cy="260.888" r="18.1435" fill="black"/>
+        <circle cx="676.364" cy="266.591" r="18.1435" fill="black"/>
+        <circle cx="710.043" cy="254.425" r="18.1435" fill="black"/>
+        <circle cx="1290.46" cy="195.181" r="18.1435" fill="black"/>
+        <circle cx="1290.46" cy="220.315" r="18.1435" fill="black"/>
+        <circle cx="1290.46" cy="245.24" r="18.1435" fill="black"/>
+        <circle cx="1314.55" cy="268.967" r="18.1435" fill="black"/>
+        <path d="M1353 268.494C1353 278.515 1354.3 288.033 1344.28 288.033C1334.26 288.033 1326.13 279.909 1326.13 269.889C1326.13 259.869 1334.26 253.755 1344.28 253.755C1354.79 253.755 1353 258.474 1353 268.494Z" fill="black"/>
+    </g>
+    <defs>
+        <filter id="filter0_d_301_35" x="0.283592" y="0.885742" width="1575.33" height="405.23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="15"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_301_35"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_301_35" result="shape"/>
+        </filter>
+    </defs>
+</svg>
diff --git a/src/assets/logos/reactbits-gh-white.svg b/src/assets/logos/reactbits-gh-white.svg
