ダークモード対応絵文字を作る

まだ便利なツールはないようなので

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/ダークモード対応絵文字を作る/yatta01.svg

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/ダークモード対応絵文字を作る/yatta02.svg

あまり意味がないような…（白黒が入れ替わる）

code:yatta01.svg

<g>

<rect x="5" y="5" width="90" height="90" rx="15" ry="15"

fill-opacity="0" stroke="white" stroke-width="2" />

<rect x="8" y="8" width="84" height="84" rx="10" ry="10"

fill-opacity="0" stroke="#333" stroke-width="3" />

<text x="10" y="48" font-size="45" stroke="white" stroke-width="2" fill="#333"

font-weight="900" letter-spacing="0" word-spacing="0" >

や

</text>

<text x="28" y="58" font-size="35" stroke="white" stroke-width="2" fill="#333"

font-weight="900" letter-spacing="0" word-spacing="0" >

っ

</text>

<text x="45" y="88" font-size="45" stroke="white" stroke-width="2" fill="#333"

font-weight="900" letter-spacing="0" word-spacing="0" >

た

</text>

</g>

</svg>

code:yatta02.svg

<g>

<style type="text/css">

fill: white;

stroke-width:2;

font-weight:900;

}

stroke-width: 2;

fill-opacity: 0;

}

stroke: white;

stroke-width: 2;

fill-opacity: 0;

}

@media (prefers-color-scheme: light) { /* */

/*@media (prefers-color-scheme: dark) { /* */

fill:#333;

stroke:white;

}

}

stroke: white;

}

}

</style>

<rect id="f01" x="5" y="5" width="90" height="90" rx="12" ry="12" />

<rect id="f02" x="7" y="7" width="86" height="86" rx="10" ry="10" />

<text id="tx01" x="10" y="48" font-size="45" letter-spacing="0" word-spacing="0" >

や

</text>

<text id="tx01" x="28" y="58" font-size="35" letter-spacing="0" word-spacing="0" >

っ

</text>

<text id="tx01" x="45" y="88" font-size="45" letter-spacing="0" word-spacing="0" >

た

</text>

}

</g>

</svg>