建议增加深色模式

[ymyuuu]

[ttgml]

我手动改了一下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%);
    }
}

[huanqiugame]

你可以自己修改模板文件，使用其它前端框架也是可以的。