Open ymyuuu opened 4 months ago
我手动改了一下CSS,你可以把它加到/admin/css/style这个文件的末尾,然后 浏览器/系统 开启了深色模式之后,它会自动切换到深色模式。
/* * dark mode */ @media (prefers-color-scheme: dark) { body { background: #222; } h2, h3 { color: #e1e1e1; } .welcome-board em { color: #e1e1e1 } input[type=text], input[type=password], input[type=email], textarea { background: #333333; border: 1px solid #515151; color: hsl(205deg, 20%, 94%); } .wmd-edittab a.active { background: #333333; color: #bbb; } .typecho-post-area #slug { background: hsl(205deg, 20%, 32%); color: hsl(205deg, 20%, 94%); } #custom-field { background: #333333; } #custom-field .typecho-label a { color: #bbb; } #custom-field td { border-bottom: 1px solid #515151; } .typecho-list-table td { border-top: 1px solid #666; } .btn, #ui-datepicker-div .ui-datepicker-current, #ui-datepicker-div .ui-datepicker-close { background-color: #24333e; color: rgb(255, 255, 255); } .typecho-list-table tbody tr:hover td { background-color: #444; } .btn:hover, #ui-datepicker-div .ui-datepicker-current:hover, #ui-datepicker-div .ui-datepicker-close:hover { background-color: hsl(205deg, 25%, 23%); } .typecho-option-tabs li.current a, .typecho-option-tabs li.active a { background-color: #444; } .typecho-option-tabs a { border: 1px solid #666; color: #999; } .category-option ul { background-color: rgba(0, 0, 0, 0); } .category-option li { color: #999; } #ui-datepicker-div { border: 1px solid #383d45; background: #333333; color: #bbb; } #ui-datepicker-div .ui-datepicker-calendar a { background-color: #24333e; } .preview .submit { background: hsl(205deg, 20%, 32%); } select { border: 1px solid #515151; background: #666; } #wmd-preview { background: #333333; color: #bbb; } .wmd-button-row li:hover { background-color: #24333e; } .fullscreen #wmd-button-bar, .fullscreen #text, .fullscreen #wmd-preview, .fullscreen .submit { background: #222; } .fullscreen #wmd-preview { border-left: 1px solid #333333; background: #333; } #wmd-preview .focus, #wmd-preview .focus * { background-color: #24333e !important; } .typecho-table-wrap { background: #333333; } .typecho-list-table { color: #bbb; } .typecho-list-table tbody tr.checked td { background-color: #333333; } .dropdown-menu { border: 1px solid #515151; background: #24333e; } .dropdown-menu a:hover { background: #11191f; } .btn:active, #ui-datepicker-div .ui-datepicker-current:active, #ui-datepicker-div .ui-datepicker-close:active, .btn.active, #ui-datepicker-div .active.ui-datepicker-current, #ui-datepicker-div .active.ui-datepicker-close { background-color: #24333e; } input[type=text]:disabled, input[type=text]:read-only, input[type=password]:disabled, input[type=password]:read-only, input[type=email]:disabled, input[type=email]:read-only, textarea:disabled, textarea:read-only { background: #333333; } #upload-panel { border: 1px dashed #515151; background-color: #333333; color: hsl(205deg, 20%, 94%); } .typecho-page-main ul.tag-list { background-color: #333333; } .typecho-page-main ul.tag-list span { color: #467b96; } .typecho-page-main ul.tag-list li:hover { background-color: #999; } .typecho-page-main ul.tag-list li.checked { background-color: #bbb; } .typecho-option label.typecho-label { color: #e9e9e6; } .typecho-page-main .typecho-option .multiline { color: #bbb; } input[type="radio"], input[type="checkbox"], input[type="radio"] + label, input[type="checkbox"] + label { vertical-align: middle; color: hsl(205deg, 16%, 77%); } .typecho-theme-list tbody tr.current td { background-color: #444; } #typecho-welcome { background-color: #333333; } #typecho-welcome li { color: #bbb; } ul.token-input-list { border: 1px solid #515151; background-color: #333333; } li.token-input-token { background-color: hsl(205deg, 16%, 77%); } }
你可以自己修改模板文件,使用其它前端框架也是可以的。
我手动改了一下CSS,你可以把它加到/admin/css/style这个文件的末尾,然后 浏览器/系统 开启了深色模式之后,它会自动切换到深色模式。