护眼模式CSS分享

经验分享
1

分享自己基于浅色模式魔改的护眼模式，用的WPS的护眼模式颜色#CFE8CC，但只能覆盖自己常用的Obsidian界面，部分Obsidian界面或插件界面还得自己设置。

2024-04-15_195516
2024-04-15_1955161920×1030 115 KB

2 个赞
2 
/* 图标侧边栏 */
.theme-light .sidebar-toggle-button.mod-left{
	background-color: #c1e0bc !important;
}
.theme-light .workspace-ribbon.side-dock-ribbon.mod-left{
	background-color: #c1e0bc;
}
.theme-light .workspace-ribbon {
	border-right: var(--divider-width) solid #B6CCB3;		/*边框*/
}
.theme-light .workspace-ribbon.mod-left:before {
	border-bottom: var(--tab-outline-width) solid #B6CCB3;	/*边框*/
}

/* 左侧边栏 */
.theme-light div[class="workspace-tab-container"] .workspace-leaf .workspace-leaf-content .nav-header{
	background-color: #c1e0bc !important;
	box-shadow: 0px 5px 9px #b4d1b0 !important;
}
.theme-light .workspace-tab-header-container {
	border-bottom: var(--tab-outline-width) solid #B6CCB3;	/*边框*/
}
.theme-light .workspace-leaf-content{
	background-color: #c1e0bc;
}
.theme-light .workspace-leaf-resize-handle {
	border-color: #B6CCB3;					/*边框*/
}

/* 工作标签栏（含部分左侧边栏） */
.theme-light .workspace-tab-header-container{
	background-color: #D6F0D2;
}

/* 活跃的工作标签栏（含部分左侧边栏） */
.theme-light .workspace-split.mod-root .workspace-tab-header.is-active::before,
.theme-light .workspace-split.mod-root .workspace-tab-header.is-active::after{
	box-shadow: inset 0 0 0 var(--tab-outline-width) #CFE8CC, 0 0 0 calc(var(--tab-curve) * 4) #CFE8CC;
}
.theme-light .workspace-tab-header.is-active {
	box-shadow: 0 0 0 var(--tab-outline-width) #B6CCB3;
	background-color: #CFE8CC;
}


/* 标题栏 */
.theme-light .view-header{
	background-color: #CFE8CC !important;
}
.theme-light .workspace .mod-root .workspace-tab-header-inner::after{
	background-color: #B6CCB3;
}
.theme-light .mod-fade:not(.mod-at-end):after{
	background: linear-gradient(to right, transparent, #CFE8CC);
}

/* 主界面 */
.theme-light .markdown-preview-view.markdown-rendered{
	background-color: #CFE8CC;
}
.theme-light .workspace-split.mod-root {
    background-color: #B6CCB3;		/*边框*/
}

/* 状态栏 */
.theme-light .status-bar{
	border-color: #B6CCB3;
	background-color: #CFE8CC;
}

/* 底部栏 */
.theme-light .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top div[class="workspace-tab-container"] .workspace-leaf .workspace-leaf-content .view-content{
	background-color: #CFE8CC !important;
}

/* 最小化、最大化、关闭按钮 */
.theme-light .titlebar-button.mod-minimize{
	background-color: #CFE8CC;
}
.theme-light .titlebar-button.mod-maximize{
	background-color: #CFE8CC;
}
.theme-light .titlebar-button.mod-close{
	background-color: #CFE8CC;
}

/* 右侧边栏 */
.theme-light .mod-right-split .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-header-container {
    background-color: #CFE8CC;
}
.theme-light .mod-right-split .workspace-tabs .workspace-tab-header-container {
    background-color: #C1E0BC;
}




.theme-light table {
    border-color: #B6CCB3;
}
.theme-light .markdown-rendered td, .markdown-rendered th {
    border: var(--table-border-width) solid #B6CCB3;
}
.theme-light pre{
	background-color: #C1E0BC !important;
	border: 2px solid transparent;
}

.theme-light .cm-s-obsidian div.HyperMD-codeblock-begin-bg,
.theme-light .cm-s-obsidian div.HyperMD-codeblock-end-bg {
	background-color: #C1E0BC;
}
.theme-light .cm-s-obsidian div.HyperMD-codeblock-bg {
	background-color: #C1E0BC;
}
.theme-light .cm-s-obsidian hr,
.theme-light .markdown-rendered hr{
	border-color: #94c98b;
}
.theme-light .titlebar-button:hover {
    opacity: 1;
    background-color: #afd1a9 !important;
}
.theme-light .cm-s-obsidian .cm-inline-code.cm-list-1,
.theme-light .markdown-rendered code{
	background-color: #C1E0BC;
}
.theme-light .cm-inline-code{
	background-color: #C1E0BC !important;
}

/* 各类搜索框 */
.theme-light textarea,
.theme-light input.metadata-input-text,
.theme-light input[type='date'],
.theme-light input[type='datetime-local'],
.theme-light input[type='text'],
.theme-light input[type='search'],
.theme-light input[type='email'],
.theme-light input[type='password'],
.theme-light input[type='number']{
	background: #CFE8CC;
	border: var(--input-border-width) solid #B6CCB3;
}
/* surfing插件的新标签页中的书签栏 */
.theme-light .wb-bookmark-item,
.theme-light .wb-bookmark-folder{
	border: 1px solid #B6CCB3;
}
/* 各类搜索框搜索结果的展开内容 */
.theme-light .search-result-file-matches{
	background-color: #CFE8CC;
	box-shadow: 0 0 0 1px #B6CCB3;
}
/*  关系图谱的控制框*/
.theme-light .graph-controls{
	background-color: #CFE8CC;
}


/* 设置界面 */
.theme-light .vertical-tab-header{
	background-color: #c1e0bc;
}
.theme-light .horizontal-tab-content,
.theme-light .vertical-tab-content{
	background-color: #CFE8CC;
}
.theme-light .setting-item{
	border-top: 1px solid #B6CCB3;
}
.theme-light .checkbox-container:not(.is-enabled){
	background-color: #B6CCB3;
}
.theme-light .setting-hotkey{
	background-color: #c1e0bc;
}
.theme-light select,
.theme-light .dropdown{
	background-color: #CFE8CC;
}
.theme-light .checkbox-container:after{
	background-color: #CFE8CC;
}
.theme-light button:not(.clickable-icon){
	background-color: #CFE8CC;
}
.theme-light button.mod-cta{
	background-color: var(--interactive-accent) !important;
}

/* 悬浮编辑栏 */
.theme-light .cMenuToolbarDefaultAesthetic {
	background-color: #CFE8CC;
}
.theme-light #cMenuToolbarModalBar.cMenuToolbarDefaultAesthetic {
	border: 1px solid #B6CCB3;
}

/* MySnippets插件的菜单 */
.theme-light .menu{
	background-color: #c1e0bc;
	border: 1px solid #B6CCB3;
}
.theme-light .MySnippetsButton.MS-Reload,
.theme-light .MySnippetsButton.MS-Reload:hover,
.theme-light .MySnippetsButton.MS-Folder,
.theme-light .MySnippetsButton.MS-Folder:hover{
	background-color: var(--interactive-accent) !important;
}
.theme-light .menu-separator{
	border-bottom: 1px solid #B6CCB3;
}

/* 回收站 */
.theme-light button[aria-label="恢复"]{
	background-color: var(--interactive-normal) !important;
}
.theme-light button.mod-warning{
	background-color: var(--background-modifier-error);
}
.modal{
	background-color: #CFE8CC;
}

/* Scroll To Top插件的按钮 */
#__C_scrollToTop,
#__C_scrollToBottom{
	border: 1px solid #B6CCB3;
}
1 个赞