{"html":"

\n \n \n

\n \n \n \n Light\n \n \n\n \n \n

\n \n \n \n Dark\n \n \n\n \n \n

\n \n \n \n System\n \n \n

\n","css":".theme-selector {\n border: none;\n}\n\n.legend {\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 12px;\n}\n\n.radio-group {\n display: flex;\n gap: 16px;\n}\n\n.theme-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n position: relative;\n}\n\n.radio-input {\n position: absolute;\n opacity: 0;\n}\n\n.theme-box {\n width: 88px;\n height: 70px;\n border-radius: 6px;\n border: 1px solid #555;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.05);\n transition: all 0.2s ease;\n}\n\n/* Fake themes */\n.light-theme {\n background: linear-gradient(to bottom, #fff 60%, #e5e5e5 40%);\n}\n\n.dark-theme {\n background: linear-gradient(to bottom, #1a1a1a 60%, #333 40%);\n}\n\n.system-theme {\n background: repeating-linear-gradient(\n 45deg,\n #ccc,\n #ccc 10px,\n #999 10px,\n #999 20px\n );\n}\n\n.radio-input:checked + .theme-box {\n border-color: #6366f1;\n background-color: rgba(99, 102, 241, 0.1);\n outline: 3px solid rgba(99, 102, 241, 0.4);\n}\n\n.option-label {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n font-size: 12px;\n font-weight: 500;\n color: #ccc;\n}\n.label-text {\n color: rgb(38, 0, 255);\n}\n.theme-option input:checked ~ .option-label .check-icon {\n display: inline-block;\n}\n\n.theme-option input:not(:checked) ~ .option-label .check-icon {\n display: none;\n}\n\n.theme-option input:checked ~ .option-label .minus-icon {\n display: none;\n}\n\n.theme-option input:not(:checked) ~ .option-label .minus-icon {\n display: inline-block;\n}\n\n.icon {\n width: 16px;\n height: 16px;\n color: #6366f1;\n}\n"}

little-grasshopper-6

👁 实时预览

📝 源代码