Typecho 后台没有暗色模式，没搜到可以通过钩子来实现挂载后台样式链接的，找到的插件好像也是覆盖对应文件来实现，于是就让 AI 推荐了一下配色，自己手动给后台添加了个暗色模式，昏暗的环境下眼睛舒服多了。
下面是修改方法，跟随操作系统，无法手动切换，如果有缺失的地方可以自己补齐 CSS 代码：
- 找到
admin/css/style.css文件 - 添加下面的 CSS 代码，
:root部分可添加在文件顶部@charset "UTF-8";的下面，其他的@media (prefers-color-scheme: dark)开始部分可添加在文件最末尾：
:root {
--dark-bg: #121212;
--dark-secondary-bg: #1e1e1e;
--dark-text: #e0e0e0;
--dark-muted-text: #9e9e9e;
--dark-link: #467B96;
--dark-accent: #3c6a81;
--dark-border: #333;
}
@media (prefers-color-scheme: dark) {
html, body {
background-color: var(--dark-bg);
color: var(--dark-text);
}
a {
color: var(--dark-link);
}
a:hover {
color: var(--dark-accent);
text-decoration: underline;
}
/* 表单与输入 */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
background-color: var(--dark-secondary-bg);
border-color: var(--dark-border);
color: var(--dark-text);
box-shadow: none;
}
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--dark-link);
}
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,
select:disabled {
background-color: #232323;
color: #777;
border-color: #222;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
border-color: var(--dark-link);
background-color: #232323;
outline: none;
color: var(--dark-text);
}
/* 按钮 */
.btn, .primary {
background-color: var(--dark-link);
color: #fff;
border-color: var(--dark-link);
box-shadow: none;
}
.btn:hover, .primary:hover {
background-color: var(--dark-accent);
color: #fff;
}
.btn:disabled, .primary:disabled {
background-color: #222;
color: #666;
cursor: not-allowed;
border-color: #222;
}
.btn-warn {
background-color: #b94a48;
color: #fff;
border-color: #b94a48;
}
.btn-warn:hover {
background-color: #a4403f;
color: #fff;
}
/* 表格 */
.typecho-table-wrap {
background-color: var(--dark-secondary-bg);
color: var(--dark-text);
}
.typecho-list-table {
background-color: var(--dark-bg);
color: var(--dark-text);
}
.typecho-list-table th {
border-bottom-color: var(--dark-border);
background-color: #232323;
}
.typecho-list-table td {
border-top-color: var(--dark-border);
background-color: var(--dark-secondary-bg);
}
.typecho-list-table tbody tr:hover td {
background-color: #232323;
}
.typecho-list-table tbody tr.checked td {
background-color: #2a2a2a;
}
/* 下拉菜单 */
.dropdown-menu, div.token-input-dropdown {
background-color: var(--dark-secondary-bg);
border-color: var(--dark-border);
box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.dropdown-menu a {
color: var(--dark-text);
}
.dropdown-menu a:hover, div.token-input-dropdown ul li.token-input-dropdown-item {
background-color: var(--dark-link);
color: #fff;
}
/* 选项卡 */
.typecho-option-tabs a {
color: var(--dark-muted-text);
background-color: var(--dark-secondary-bg);
border-color: var(--dark-border);
}
.typecho-option-tabs a:hover {
background-color: var(--dark-link);
color: #fff;
}
.typecho-option-tabs li.current a,
.typecho-option-tabs li.active a {
background-color: var(--dark-accent);
color: #fff;
}
/* 分页 */
.typecho-pager a {
color: var(--dark-muted-text);
background-color: var(--dark-secondary-bg);
border: 1px solid var(--dark-border);
}
.typecho-pager a:hover {
background-color: var(--dark-link);
color: #fff;
}
.typecho-pager li.current a {
background-color: var(--dark-accent);
color: #fff;
}
/* 消息、弹窗 */
.success {
background: #284828;
color: #b6fcb6;
}
.notice {
background: #484828;
color: #fffecb;
}
.error {
background: #4a2323;
color: #ffbcbc;
}
.message {
background: #232323;
color: var(--dark-text);
}
.popup {
background: #232323;
color: var(--dark-text);
border-bottom: 1px solid var(--dark-border);
}
.balloon {
background: #444;
color: #fff;
}
/* 代码块 */
#wmd-preview code,
#wmd-preview pre {
background-color: #181818;
color: #f8f8f2;
}
#wmd-preview blockquote {
border-left: 4px solid #333;
color: #aaa;
background: #181818;
}
#wmd-preview table th, #wmd-preview table td {
border: 1px solid #333;
background: #232323;
color: var(--dark-text);
}
/* 其它常用区域 */
#custom-field, .category-option ul, ul.token-input-list, li.token-input-token {
background-color: var(--dark-secondary-bg);
color: var(--dark-text);
border-color: var(--dark-border);
}
.typecho-login-wrap,
.typecho-login {
background-color: var(--dark-bg);
}
#typecho-welcome {
background-color: var(--dark-secondary-bg);
color: var(--dark-text);
}
.profile-avatar {
background-color: #232323;
border-color: var(--dark-border);
}
.front-archive {
color: var(--dark-muted-text);
}
/* 标签列表 */
.typecho-page-main ul.tag-list {
background-color: var(--dark-secondary-bg);
color: var(--dark-text);
}
.typecho-page-main ul.tag-list li {
background-color: #232323;
color: var(--dark-text);
}
.typecho-page-main ul.tag-list li.checked {
background-color: var(--dark-link);
color: #fff;
}
.typecho-page-main ul.tag-list li:hover {
background-color: var(--dark-accent);
color: #fff;
}
.typecho-theme-list tbody tr.current td {
background-color: var(--dark-bg);
color: #fff;
}
}