{"html":"

\n \n \n \n \n \n \n

","css":".darkThemeBtn * {\n transition: all 0.3s;\n}\n\n.darkThemeBtn input {\n width: 0;\n height: 0;\n visibility: hidden;\n}\n\n.darkThemeBtn label {\n border: 1px solid #efefef;\n background: rgba(239, 239, 239, 0.5);\n border-radius: 10px;\n height: 46px;\n width: 46px;\n margin: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n}\n\n.darkThemeBtn label:active {\n border-radius: 5px;\n}\n\n.darkThemeBtn label svg {\n position: absolute;\n width: 16px;\n transition: 0.3s;\n z-index: 1;\n fill: #000;\n}\n\n.darkThemeBtn label svg.sun {\n width: 20px;\n opacity: 0;\n fill: #fff;\n}\n\n.darkThemeBtn label svg.moon {\n opacity: 1;\n}\n\n.darkThemeBtn input:checked + label {\n background: #4a6cf7;\n}\n\n.darkThemeBtn input:checked + label svg.sun {\n opacity: 1;\n}\n\n.darkThemeBtn input:checked + label svg.moon {\n opacity: 0;\n}\n\n.darkThemeBtn input:checked ~ span {\n background-color: #16174b;\n}"}

heavy-horse-9

👁 实时预览

📝 源代码