svg 图片根据主题色自动变色原理

前言

废话不多说，我们直接看效果，图1主题为亮白色，可以看到 svg 是黑色的，而图2主题为暗黑色，可以看到 svg 是白色的，下面就来讲下svg 图片根据主题色自动变色的原理。

（图1）

（图2）

具体可查看官网：openbytecode.com/

原理

其实关键就是给 svg 或 path 标签的 fill 属性或 stroke 属性添加 currentColor 值来实现。

currentColor 的意思就是 svg 会随着父容器文字颜色的变化而变化，通过下面的例子相信你就明白了。

示例1：

<ul className='flex items-center justify-center divide-x text-2xl text-neutral-500 dark:text-white'>
  <li className='px-4'>
    <a
      href={metadata.bilibili}
      target='_blank'
      rel='noreferrer'
    >
      <svg
        stroke='currentColor'
        fill='currentColor'
        viewBox='0 0 1024 1024'
        version='1.1'
        strokeWidth='2'
        strokeLinecap='round'
        strokeLinejoin='round'
        height='1em'
        width='1em'
        xmlns='http://www.w3.org/2000/svg'
      >
        <path d='M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.12-7.68 8.490667-11.008l113.109333-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.205333 49.365333l-0.128 4.010667v320c0 28.117333 21.76 51.157333 49.365333 53.162666l3.968 0.170667h533.333334a53.333333 53.333333 0 0 0 53.205333-49.365333l0.128-3.968v-320c0-29.44-23.893333-53.333333-53.333333-53.333334z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z'></path>
      </svg>
    </a>
  </li>
</ul>

示例2：

<ul className='flex items-center justify-center divide-x text-2xl text-neutral-500 dark:text-white'>
    <li className='px-4'>
      <a
        href='#'
        target='_blank'
        rel='noreferrer'
      >
        <svg
          fill='currentColor'
          strokeWidth='2'
          viewBox='0 0 1024 1024'
          strokeLinecap='round'
          strokeLinejoin='round'
          height='1em'
          width='1em'
          xmlns='http://www.w3.org/2000/svg'
        >
          <path d='M579.800805 511.868432c-11.668045 0-23.34121 10.835638-23.34121 24.174642 0 10.837685 11.667022 21.675371 23.34121 21.675371 17.512307 0 30.015832-10.837685 30.015832-21.675371C609.816637 522.705094 597.313112 511.868432 579.800805 511.868432L579.800805 511.868432zM503.098457 399.310086c18.341643 0 30.015832-11.668045 30.015832-29.181376 0-18.342667-11.673165-29.179329-30.015832-29.179329-17.508211 0-34.184015 10.837685-34.184015 29.179329C468.913418 387.643065 485.590245 399.310086 503.098457 399.310086L503.098457 399.310086zM512.269278 0.560058c-282.619393 0-511.724066 229.104674-511.724066 511.724066 0 282.617345 229.104674 511.722019 511.724066 511.722019 282.617345 0 511.722019-229.104674 511.722019-511.722019C1023.992321 229.664732 794.887647 0.560058 512.269278 0.560058L512.269278 0.560058zM415.557399 641.927823c-30.851312 0-53.362162-4.998543-82.542514-13.339005l-84.20733 42.524476 24.182833-71.705853c-59.196184-41.682854-94.216703-94.209536-94.216703-158.408359 0-113.388706 106.719204-200.09838 236.784738-200.09838 115.054546 0 217.605567 68.36803 237.614074 165.085028-8.336366-1.671983-15.842372-2.501319-22.51085-2.501319-113.388706 0-200.92874 85.038714-200.92874 187.589735 0 17.506164 2.501319 33.346488 6.670526 50.024339C429.732907 641.927823 422.226902 641.927823 415.557399 641.927823L415.557399 641.927823zM763.227477 723.633834l16.671708 60.032688-63.363344-35.849855c-24.17669 4.998543-47.52302 12.503525-71.69971 12.503525-111.722867 0-200.09838-76.702348-200.09838-171.747364 0-95.046039 88.376537-171.749411 200.09838-171.749411 105.882701 0 200.92874 76.703372 200.92874 171.749411C845.764871 641.927823 809.915017 689.450843 763.227477 723.633834L763.227477 723.633834zM338.018548 340.949381c-17.508211 0-35.849855 10.837685-35.849855 29.179329 0 17.513331 18.341643 29.186496 35.849855 29.186496 16.676827 0 30.015832-11.673165 30.015832-29.186496C368.03438 351.787067 354.695375 340.949381 338.018548 340.949381L338.018548 340.949381zM710.701818 511.868432c-12.508644 0-23.34633 10.835638-23.34633 24.174642 0 10.837685 10.837685 21.675371 23.34633 21.675371 16.671708 0 29.179329-10.837685 29.179329-21.675371C739.881147 522.705094 727.373526 511.868432 710.701818 511.868432L710.701818 511.868432zM710.701818 511.868432'></path>
        </svg>
      </a>
    </li>
</ul>

上面的两个例子，我们通过修改 svg 标签的 fill 属性和 stroke 属性的值为 currentColor，这样 svg 就会随着父容器字体颜色的变化而变化，父容器 ul 字体颜色在亮白主题下为 text-neutral-500，而在暗黑主题下字体颜色变为白色，因此里面的 svg 就会随着变化。

总结

1. 在 svg 标签中加上 fill="currentColor" 或 stroke="currentColor"；这里要注意 stroke 就是描边的意思，像例一 svg 就需要加 stroke="currentColor"，而例二 svg 就不需要加 stroke="currentColor" 了。

2. 在 path 标签中去掉 fill 属性，或者改为 fill="currentColor" stroke="currentColor"。