效果
代码片段
首先安装 Solarized 主题，然后开启深色模式，再开启 common.css 和 Solarized-dark.css 代码片段才有效果。
common.css
body {
--file-line-width: 100%;
}
/* 编辑模式下，右侧空白太大 */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content {
max-width: 100%;
}
Solarized-dark.css (代码有点乱，能用就行^_^)
body{
color: rgb(164, 181, 182);
}
.theme-dark {
/* 编辑器背景色 */
--background-primary: #002B36;
/* 软件框架背景色，包括面板 */
--background-primary-alt: #013643;
--ribbon-background: var(--background-primary-alt);
--status-bar-background: var(--background-primary-alt);
--text-title: #93A1A1;
--icon-color: rgb(119 135 141);
--text-normal: #A4B4B6;
--nav-item-color-hover: rgb(209, 211, 214);
/* --tag-color: */
/* tag */
--text-accent:#CCCC66;
/* 主色调 */
--color-accent: #669999;
/* hover background */
--interactive-accent-hover: #99CC99;
--color-accent-hsl: 0, 0%, 100%;
/* 文件padding */
--file-margins: 20px;
/* 链接颜色 */
/* --link-external-color:#9674c6; */
/* 文件文字距左边边距 */
--file-folding-offset: 20px;
/* 错误按钮背景色 */
--background-modifier-error: #FF9999;
--background-modifier-error-hover: #FFCCCC;
/* 设置按钮背景色 */
--interactive-normal: rgb(20 77 91);
/* 代码块边框颜色 */
--HyperMD-codeblock-border: 1px solid #1a4655;
/* 高亮代码块颜色 */
--text-highlight-bg: #a5f0f0;
/* 左侧目录文字大小 */
--nav-item-size: 14px;
}
/* 菜单分隔线颜色 */
.menu-separator {
border-bottom: 1px solid rgb(11, 66, 80);
}
/* 菜单边框颜色 */
.menu{
border: 1px solid rgb(17 77 92);
background-color: var(--background-primary-alt);
}
.cm-s-obsidian .is-flashing span.cm-inline-code{
/* color: #CCCC66; */
background-color: var(--text-highlight-bg);
}
/* 按钮颜色 */
button {
border: 1px solid #204f5f
}
/* 文本框颜色 */
textarea, input.metadata-input-text, input[type='date'], input[type='datetime-local'], input[type='text'], input[type='search'], input[type='email'], input[type='password'], input[type='number']{
border: 1px solid #25596a;
}
textarea:hover, input.metadata-input-text:hover, input[type='date']:hover, input[type='datetime-local']:hover, input[type='text']:hover, input[type='search']:hover, input[type='email']:hover, input[type='password']:hover, input[type='number']:hover{
border: 1px solid #387589;
}
/* 文本选中颜色 */
::selection {
/* color: white !important; */
/* background: darkcyan !important; */
background-color: #31344f!important;
}
/* 文件列表距左右边距离 */
.nav-files-container {
padding-left: 4px;
padding-right:6px;
}
.tree-item-self {
color: rgb(142 162 170);
}
.empty-state-action{
color: inherit;
}
.empty-state-action:hover {
color: #669999;
}
.cm-hashtag.cm-hashtag-begin {
border-top-left-radius: var(--tag-radius);
border-bottom-left-radius: var(--tag-radius);
padding-left: 8px;
}
.cm-hashtag.cm-hashtag-end {
border-top-right-radius: var(--tag-radius);
border-bottom-right-radius: var(--tag-radius);
padding-right: 8px;
}
.workspace-tabs .workspace-leaf{
background-color: var(--background-primary-alt)
}
.nav-file-title, .nav-folder-title {
color: rgb(164, 181, 182);
}
.clickable-icon{
color: var(--icon-color)
}
.workspace-tab-header{
color: rgb(133 138 139);
}
.is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon, .is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
color: rgb(194 194 194);
}
.theme-dark {
/* 标题下边距 */
--inline-title-margin-bottom: 0.9em;
}
/* 标题上边距 */
.view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller{
padding-top: 18px;
}
/* 去掉H1等标题上边距 */
.cm-s-obsidian .cm-line.HyperMD-header {
padding-top: 0;
}
/* 光标颜色 */
.cm-editor * {
caret-color: #FFFFFF!important;
}
/* edit toolbar background */
.cMenuToolbarDefaultAesthetic {
/* background-color: var(--color-base-10, --background-primary); */
background: none;
}
/* 提示对话框背景样式 */
.suggestion-container{
background-color: var(--background-primary-alt);
}
/* 代码块样式 */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock{
border-left: var(--HyperMD-codeblock-border);
border-right: var(--HyperMD-codeblock-border);
}
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock.HyperMD-codeblock-begin {
border-left: var(--HyperMD-codeblock-border);
border-right: var(--HyperMD-codeblock-border);
border-top: var(--HyperMD-codeblock-border);
}
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock.HyperMD-codeblock-end {
border-left: var(--HyperMD-codeblock-border);
border-right: var(--HyperMD-codeblock-border);
border-bottom: var(--HyperMD-codeblock-border);
}
body {
/* 鼠标移入时的颜色 */
--scrollbar-color-movein: hsla(var(--color-accent-hsl), 15%);
/* 鼠标点击时的颜色 */
--scrollbar-color-active: hsla(var(--color-accent-hsl), 40%);
--animation: var(--anim-duration-fast) var(--anim-motion-smooth);
}
/* 滚动条样式 */
/* ! overflow: overlay is deprecated */
body.scrollbar-gutter-overlay :is(.vertical-tab-header, .vertical-tab-content, .nav-files-container, .view-content, .search-result-container, .git-view-body, .suggestion-container .suggestion, .prompt-results, .community-modal-search-results-wrapper, .community-modal-info, .modal:not(.mod-settings, .mod-community-theme, .mod-community-plugin), .tag-container, .backlink-pane, .workspace-leaf-content[data-type=markdown] .cm-scroller, .markdown-preview-view, .workspace-leaf-content[data-type=calendar] .view-content, .janitor-scan-results, .excalidraw-wrapper :is(.App-mobile-menu, .App-menu .Stack .Island.App-menu__left, .scrollbar), .excalidraw-contextMenuContainer .popover, .kanban-plugin__board, .kanban-plugin__lane-items) {
overflow-y: overlay !important;
}
body.scrollbar-gutter-overlay .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container, body.scrollbar-gutter-overlay mjx-container, body.scrollbar-gutter-overlay .markdown-embed-content .markdown-rendered, body.scrollbar-gutter-overlay pre code {
overflow-x: overlay !important;
}
body.scrollbar-gutter-reserve {
--setting-scrollbar-gutter: stable;
}
body.scrollbar-hover-accent {
--setting-scrollbar-hover: hsla(var(--color-accent-hsl), 20%);
}
/* https://stackoverflow.com/a/74050413/20058211 */
/* https://stackoverflow.com/a/46304690/20058211 */
@property --scrollbar-color {
syntax: "<color>";
inherits: true;
initial-value: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
width: 8px!important;
height: var(--size-4-3) !important;
background-color: transparent !important;
}
::-webkit-scrollbar-track {
background-color: transparent !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
border-radius: var(--size-2-3) !important;
border: 3.6px solid transparent !important;
background-color: var(--scrollbar-color) !important;
}
::-webkit-scrollbar-thumb:hover {
--scrollbar-color: var(--setting-scrollbar-hover);
}
::-webkit-scrollbar-thumb:active {
--scrollbar-color: hsla(var(--color-accent-hsl), 40%);
}
body:not(.scrollbar-movein-animation) {
--scrollbar-color: hsla(var(--color-accent-hsl), 15%);
}
body.scrollbar-movein-animation :is(.vertical-tab-header, .vertical-tab-content, .nav-files-container, .view-content, .search-result-container, .git-view-body, .suggestion-container .suggestion, .prompt-results, .community-modal-search-results-wrapper, .community-modal-info, .modal:not(.mod-settings, .mod-community-theme, .mod-community-plugin), .tag-container, .backlink-pane, .workspace-leaf-content[data-type=markdown] .cm-scroller, .markdown-preview-view, .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container, mjx-container, .markdown-embed-content .markdown-rendered, pre code, .workspace-leaf-content[data-type=calendar] .view-content, .janitor-scan-results, .excalidraw-wrapper :is(.App-mobile-menu, .App-menu .Stack .Island.App-menu__left, .scrollbar), .excalidraw-contextMenuContainer .popover, .kanban-plugin__board, .kanban-plugin__lane-items) {
transition: --scrollbar-color var(--animation);
scrollbar-gutter: var(--setting-scrollbar-gutter, initial);
}
body.scrollbar-movein-animation :is(.vertical-tab-header, .vertical-tab-content, .nav-files-container, .view-content, .search-result-container, .git-view-body, .suggestion-container .suggestion, .prompt-results, .community-modal-search-results-wrapper, .community-modal-info, .modal:not(.mod-settings, .mod-community-theme, .mod-community-plugin), .tag-container, .backlink-pane, .workspace-leaf-content[data-type=markdown] .cm-scroller, .markdown-preview-view, .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container, mjx-container, .markdown-embed-content .markdown-rendered, pre code, .workspace-leaf-content[data-type=calendar] .view-content, .janitor-scan-results, .excalidraw-wrapper :is(.App-mobile-menu, .App-menu .Stack .Island.App-menu__left, .scrollbar), .excalidraw-contextMenuContainer .popover, .kanban-plugin__board, .kanban-plugin__lane-items):hover {
--scrollbar-color: hsla(var(--color-accent-hsl), 15%);
}
body.scrollbar-movein-animation textarea {
color: transparent;
transition: color var(--animation);
-webkit-text-fill-color: var(--text-normal);
}
body.scrollbar-movein-animation textarea:hover {
color: hsla(var(--color-accent-hsl), 15%);
}
body.scrollbar-movein-animation textarea * {
-webkit-text-fill-color: initial;
}
body.scrollbar-movein-animation textarea::-webkit-scrollbar-thumb {
box-shadow: 0 0 0 10px inset;
border-width: 3.2px;
background-clip: content-box;
background-color: transparent !important;
}
body.scrollbar-smooth.scrollbar-smooth-editor .workspace-leaf-content[data-type=markdown] .cm-scroller, .markdown-preview-view,
body.scrollbar-smooth :is(.vertical-tab-header, .vertical-tab-content, .nav-files-container, .view-content, .search-result-container, .git-view-body, .suggestion-container .suggestion, .prompt-results, .community-modal-search-results-wrapper, .community-modal-info, .modal:not(.mod-settings, .mod-community-theme, .mod-community-plugin), .tag-container, .backlink-pane, .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container, mjx-container, .markdown-embed-content .markdown-rendered, pre code, .workspace-leaf-content[data-type=calendar] .view-content, .janitor-scan-results, .excalidraw-wrapper :is(.App-mobile-menu, .App-menu .Stack .Island.App-menu__left, .scrollbar), .excalidraw-contextMenuContainer .popover, .kanban-plugin__board, .kanban-plugin__lane-items) {
scroll-behavior: smooth;
}
/* 表格样式 */
/* see https://forum-zh.obsidian.md/t/topic/27878 */
body {
/* 表格圆角大小 */
--table-radius: var(--size-2-3);
/* 表格按钮颜色 */
--table-btn-color: var(--color-accent);
/* 表格按钮背景色 */
--table-btn-bg: var(--background-primary);
/* 表格边框颜色 */
--table-border-color: rgb(23, 64, 81);
/* 表格头背景色 */
--table-header-bg: var(--table-border-color);
/* 表格隔行背景色 */
--table-alt-line-bg: var(--background-primary);
/* 动画时间 */
--animation: 200ms var(--anim-motion-smooth);
/* 表格标题大小 */
--table-header-size: 15px;
/* 表格文字大小 */
--table-text-size: var(--table-header-size);
}
/* 单元格内边距 */
.markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper{
padding: 9px 13px;
}
.markdown-rendered table {
border-collapse: initial;
border-spacing: 0;
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) {
--table-white-space: break-all;
/* width: 100%; */
}
/* :is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) .table-editor {
width: 100%;
} */
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) .table-col-btn {
border-top-right-radius: var(--table-radius);
border-bottom-right-radius: var(--table-radius);
color: var(--table-btn-color);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) .table-row-btn {
border-bottom-left-radius: var(--table-radius);
border-bottom-right-radius: var(--table-radius);
color: var(--table-btn-color);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) :is(.table-col-btn, .table-row-btn, .table-col-drag-handle:hover, .table-row-drag-handle:hover) {
transition: var(--animation);
background-color: var(--table-btn-bg);
--table-drag-handle-color: var(--table-btn-color);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) :is(tr:hover .table-row-drag-handle, th:hover .table-col-drag-handle) {
opacity: 1;
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) th:first-child:not(:has(:is(.table-row-drag-handle, .table-col-drag-handle):hover)) {
border-top-left-radius: var(--table-radius);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) th:last-child:not(:has(.table-col-drag-handle:hover)) {
border-top-right-radius: var(--table-radius);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table):has(.table-col-btn:hover) th:last-child {
border-top-right-radius: 0;
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) tr:last-child td:first-child {
border-bottom-left-radius: var(--table-radius);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table):has(.table-row-btn:hover) tr:last-child td:first-child {
border-bottom-left-radius: 0;
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) tr:last-child td:last-child {
border-bottom-right-radius: var(--table-radius);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table):has(:is(.table-col-btn, .table-row-btn):hover) tr:last-child td:last-child {
border-bottom-right-radius: 0;
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) :is(th, td):not(:first-child) {
border-left: 0;
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) tbody td {
border-top: 0;
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) thead tr {
background-color: var(--table-header-bg);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) tbody tr:nth-of-type(2n) {
background-color: var(--table-alt-line-bg);
}
:is(.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, .markdown-rendered table) tbody tr:nth-of-type(2n+1) {
background-color: var(--background-primary);
}