分享一个自用的深色主题css

分享一个自己通过调试工具一点一点扣出来的css样式,用于默认主题深色风格。
都是基本元素的样式,没有对任何插件进行过调试,不保证无冲突哈~

/*
|  \/  (_)                    
| .  . |___  ___   _ _ __ ___ 
| |\/| | \ \/ / | | | '__/ _ \
| |  | | |>  <| |_| | | |  __/
\_|  |_/_/_/\_\\__,_|_|  \___|

"Mixure" by @kelvinzhao
------------------------------
本人使用的英文字体是 Open Sans,中文字体是仓耳云黑
仅适用于深色默认方案,以Snippet方式加载
1. 借鉴了 LYT-Mode 和 Blue Topaz,还有简悦
2. 个人摸索调试,只知道一点皮毛,不保证冲突,不保证质量
3. 随意修改、分发
updated: 2023-3-8
*/
.theme-dark{
  /* ---------页面样式相关--------- */
  --background-primary: #2B2F3A;                          /* 定义背景颜色 */
  --background-secondary: #1F1F24;
  --background-secondary-alt: #1F1F24;
  --tab-stacked-pane-width: 550px;                        /* 堆叠时,每个笔记容器的宽度 */
  --file-line-width: calc(70vh);                          /* 排版宽度 */
  --file-margins: 40px;                                   /* 主体与边框最小距离 */
  --inline-title-color: gray;                             /* 页面内显示标文件名的颜色 */
  --line-height-normal:1.7;                               /* 行间距 */
  --tab-border-color: #F7FF79;                            /* 当前Tab的高亮边框颜色 */
  --tab-text-color-focused-active-current: var(--tab-border-color);   /* 当前Tab上文件名颜色 */
  --tab-stacked-font-size: 1.1em;                         /* Tab上文件名大小 */
  --interactive-hover: var(--interactive-accent-hover);   /* 设置里面,交互选项的hover颜色 */

  /* ---------ribbon--------- */
  --ribbon-background: var(--background-secondary);       /* ribbon 的背景颜色 */
  --ribbon-background-collapsed: var(--background-secondary);
  --divider-color: #444;                                  /* 分割线颜色 */
  --nav-item-background-active: #444;
  --nav-item-color-active: ;
  /* --background-modifier-border-focus: var(--tab-border-color); */
  
  /* ---------各种文字样式--------- */
  --text-normal:#D3CECA;                     /* 正文颜色 */
  --blockquote-color: cyan;                  /* 引用文字颜色 */
  --strike-color: gray;                      /* 删除线文字的颜色 */
  --bold-weight: 600;                        /* 加粗的字重 */
  --bold-color: #F8C280;                     /* 加粗字体颜色 */
  --italic-color: #AC80FF;                   /* 斜体字颜色 */
  --h1-color: #D4DD00;                       /* 定义标题颜色 */
  --h2-color: #C983FF;
  --h3-color: #00CAF6;
  --h4-color: #38A886;
  --h5-color: #B9C1E0;
  --h6-color: #979Db3;
  --code-normal: #F97979;                    /* inline code 颜色 */
  --code-background: #292939;                /* inline code 背景颜色 */
  --list-marker-color:hsl(263deg 37% 69%);   /* 列表标识颜色 */
  --link-decoration: none;                   /* 内部链接取消下划线 */
  --link-external-decoration: none;          /* 外部链接取消下划线 */
  --graph-node-unresolved: cyan;             /* 关系图谱中未建文件节点颜色 */
  --table-border-color: gray;                /* 表格样式 */
  --table-header-background: var(--background-secondary-alt);
  --table-header-background-hover: var(--background-secondary-alt);
  --hr-color: #666;                          /* HR 横线颜色 */
  --hr-thickness: 2px;                       /* HR 横线厚度 */

  /* --------预览模式下对Heading增加左侧级别提示--------- */
  --h1-line-height: 1.4;
  --h2-line-height: 1.4;
  --h3-line-height: 1.4;
  --h4-line-height: 1.4;
  --h5-line-height: 1.4;
  --h6-line-height: 1.4;

  /* --------Heading级别提示样式---------- */
  --heading-before-font-size: 12px;
  --heading-before-padding: 0px 5px 0px 5px;
  --heading1-before-margin: 10px -40px;
  --heading2-before-margin: 5px -40px;
  --heading3-before-margin: 4px -40px;
  --heading4-before-margin: 2px -40px;
  --heading5-before-margin: 1px -40px;
  --heading6-before-margin: 1px -40px;

  /* ---------自定义标注高亮颜色(参考简阅读)----------- */
  --sr-annote-color-0: #004daa;
  --sr-annote-color-1: #80761d;
  --sr-annote-color-2: #517579;
  --sr-annote-color-3: #517080;
  --sr-annote-color-4: #547534;
  --sr-annote-color-5: #805b6d;
  --highlight-border-thickness: 0px;
  --highlight-border-color: cyan;
  --highlight-text-color: var(--text-normal);

  /* ---------自定义Callout主题色----------- */
  --callout-bug: var(--color-red-rgb);
  --callout-default: var(--color-blue-rgb);
  --callout-error: var(--color-red-rgb);
  --callout-example: var(--color-purple-rgb);
  --callout-fail: var(--color-red-rgb);
  --callout-important: var(--color-cyan-rgb);
  --callout-info: 188,143,140;
  --callout-question: var(--color-yellow-rgb);
  --callout-success: var(--color-green-rgb);
  --callout-summary: var(--color-cyan-rgb);
  --callout-tip: 238,150,120;
  --callout-todo: var(--color-blue-rgb);
  --callout-warning: var(--color-orange-rgb);
  --callout-quote: 155,155,150;
}

/*////////////////////////////////////*/
/*////////////////////////////////////*/
/*////////////////////////////////////*/

/* ---------笔记顶部header阴影效果--------- */
.view-header {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.6) 0px 8px 16px -8px;
}

/* ---------两侧工具栏水平分割线--------- */
.nav-header{
  border-bottom: 1px solid var(--divider-color);
}

/* ---------Frontmatter label样式----------- */
.frontmatter-section-label{
  color:#77A88D;
}
.frontmatter-section-data{
  color:#777;
}

/* ---------标题Heading阴影--------- */
span.cm-header.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6,
h1,h2,h3,h4,h5,h6 {
  filter: drop-shadow(0px 4px 3px rgb(31,31,31));
}

/* ---------定义Callout边框和背景色透明度--------- */
.callout {
  border: 1px solid gray;
  background-color: rgba(var(--callout-color), 0.1);
}

/* ---------当前笔记左边框--------- */
.theme-dark .mod-root .workspace-tabs.mod-stacked .workspace-tab-header.is-active.mod-active {
    border-left: 2px solid var(--tab-border-color);
}

/* ---------标题竖版中文方向--------- */
.workspace-tab-header-inner-title {
  text-orientation: mixed;
  color: gray;
}

/* ---------删除线--------- */
del,
.cm-strikethrough {
  color: var(--strike-color);
}

/* ---------高亮标记--------- */
span.cm-highlight.cm-highlight, 
.markdown-preview-view mark, 
.callout mark {
  /* font-family: "Microsoft YaHei Light";*/
  color: var(--highlight-text-color);
  border-bottom: var(--highlight-border-thickness) solid var(--highlight-border-color);
  background: linear-gradient(hsla(0,0%,100%,0) 50%,var(--sr-annote-color-4) 0);
}

/* ---------预览模式 Tag 颜色--------- */
a.tag:hover {
  color: var(--text-normal);
  background-color: var(--interactive-accent);
}
/* ---------常用带颜色的标签--------- */
.tag[href^="#yellow"]:hover {
  color: black;
  background-color: yellow;
}
.tag[href^="#yellow"],
.cm-tag-yellow {
  color: yellow;
}
.tag[href^="#green"]:hover {
  color: white;
  background-color: green;
}
.tag[href^="#green"],
.cm-tag-green {
  color: #00E000;
}
.tag[href^="#blue"]:hover{
  color: white;
  background-color: blue;
}
.tag[href^="#blue"],
.cm-tag-blue {
  color: lightblue;
}
.tag[href^="#pink"]:hover{
  color: black;
  background-color: deeppink;
}
.tag[href^="#pink"],
.cm-tag-pink {
  color: deeppink;
}
.tag[href^="#purple"]:hover{
  color: white;
  background-color: blueviolet;
}
.tag[href^="#purple"],
.cm-tag-purple {
  color: fuchsia;
}
.tag[href^="#red"]:hover{
  color: white;
  background-color: #FF5150;
}
.tag[href^="#red"],
.cm-tag-red {
  color: #FF5150;
}

/* ---------搜寻结果高亮--------- */
.is-flashing {
  background-color: rgb(118 118 99 / 40%);
  border-radius: 0;
  color: var(--tab-border-color);
}

/* ---------表格头--------- */
.table-view-table > thead > tr > th {
  font-weight: 400;
  font-size: larger;
  border-bottom: 2px gray solid;
}

/* ---------foot-note 角标--------- */
.footnote-link {
  font-size: smaller;
}

/* ---------图片的标题--------- */
/* 需插件 Image Captions */
.image-captions-caption {
  font-size:smaller;
  color:lightgray;
  margin: 0px 0 0 0;
  padding: 0px 0px;
  text-align: center;
  background: var(--background-primary);
}

/* ---------Heading 标题行预览模式下在前面显示级别提示--------- */
.markdown-reading-view h1:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading1-before-margin);
  border:1px solid var(--h1-color);
  content:"1";
  font-size: var(--heading-before-font-size);
  color: var(--h1-color);
}
.markdown-reading-view h2:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading2-before-margin);
  border:1px solid var(--h2-color);
  content:"2";
  font-size: var(--heading-before-font-size);
  color: var(--h2-color);
}
.markdown-reading-view h3:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading3-before-margin);
  border:1px solid var(--h3-color);
  content:"3";
  font-size: var(--heading-before-font-size);
  color: var(--h3-color);
}
.markdown-reading-view h4:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading4-before-margin);
  border:1px solid var(--h4-color);
  content:"4";
  font-size: var(--heading-before-font-size);
  color: var(--h4-color);
}
.markdown-reading-view h5:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading5-before-margin);
  border:1px solid var(--h5-color);
  content:"5";
  font-size: var(--heading-before-font-size);
  color: var(--h5-color);
}
.markdown-reading-view h6:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading6-before-margin);
  border:1px solid var(--h6-color);
  content:"6";
  font-size: var(--heading-before-font-size);
  color: var(--h6-color);
}
1 个赞

预览图

2 个赞

做成了Theme.css,主要特点是:

  1. 大纲标题增加了级别提示
  2. 增加了预览模式“开灯”效果
/*
|  \/  (_)                    
| .  . |___  ___   _ _ __ ___ 
| |\/| | \ \/ / | | | '__/ _ \
| |  | | |>  <| |_| | | |  __/
\_|  |_/_/_/\_\\__,_|_|  \___|

"Mixure" by @kelvinzhao
------------------------------
本人使用的英文字体是 Open Sans,中文字体是仓耳云黑
1. 借鉴了 LYT-Mode 和 Blue Topaz,还有简悦
2. 个人摸索调试,只知道一点皮毛,不保证冲突,不保证质量
3. 随意修改、分发
updated: 2023-3-10
*/
body {
	/* 系统变量 */
	--file-line-width: 							calc(70vh);                         /* 排版宽度 */
	--file-margins: 							20px 40px;                          /* 内容主体与边框最小距离 */
	--h1-line-height: 							1.4;								/* 大纲标题的行高 */
	--h2-line-height: 							1.4;
	--h3-line-height: 							1.4;
	--h4-line-height: 							1.4;
	--h5-line-height: 							1.4;
	--h6-line-height: 							1.4;
	--header-height:							40px;								/* app标题栏高度 */
	--indentation-guide-width: 					1px;								/* 缩进提示线样式 */
	--line-height-normal:						1.7;                             	/* 行间距 */
	--link-decoration: 							none;                   			/* 内部链接取消下划线 */
	--link-external-decoration: 				none;          						/* 外部链接取消下划线 */
	--list-marker-color:						var(--interactive-accent);			/* 列表标志的颜色 */
	--nav-item-color-active:					white;								/* 左侧目录树当前项目文字颜色 */
	--tab-stacked-pane-width: 					600px;                        		/* 堆叠时,每个笔记容器的宽度 */
	--tab-stacked-font-size: 					1.1em;     							/* Tab上文件名大小 */
	--tab-text-color-focused-active-current: 	var(--currenttab-border-color);		/* 当前Tab标题颜色 */

	/* 自定义变量 */
	--heading-before-font-size: 				12px;								/* Heading级别提示样式 */
	--heading-before-padding: 					0px 5px 0px 5px;
	--heading1-before-margin: 					10px -40px;
	--heading2-before-margin: 					5px -40px;
	--heading3-before-margin: 					4px -40px;
	--heading4-before-margin: 					2px -40px;
	--heading5-before-margin: 					1px -40px;
	--heading6-before-margin: 					1px -40px;
	--highlight-border-thickness:				0px;								/* 高亮标记主题底部横线的粗细 */  	
}
:root
{
	/* dark theme */ 
  	--bg-primary-dark: 							#202020;
  	--bg-primary-dark-alt: 						#242424;
  	--bg-secondary-dark: 						#282828;
  	--bg-secondary-dark-alt:					#353535;
  	--blockquote-color-dark:					cyan;
  	--bold-color-dark: 							#F8C280;
  	--callout-background-alpha-dark:			0.1;
  	--callout-text-color-dark:					cyan;
  	--code-normal-dark:							#F97979;
  	--currenttab-border-color-dark:				#F7FF79;
  	--divider-color-dark:						var(--bg-secondary-dark-alt);
  	--fm-section-label-dark:					#77A88D;
	--fm-section-data-dark:						#777;
  	--graph-unresolved-dark:					cyan;
  	--h1-color-dark: 							#D4DD00;
  	--h2-color-dark: 							#C983FF;
  	--h3-color-dark: 							#00CAF6;
  	--h4-color-dark: 							#38A886;
  	--h5-color-dark: 							#B9C1E0;
  	--h6-color-dark: 							#979Db3;
  	--header-shadow-dark:						drop-shadow(0px 4px 3px rgba(11,11,11,0.5));
  	--highlight-border-color-dark:				#F7FF79;
  	--highlight-text-color-dark:				var(--text-normal);
  	--hr-color-dark: 							#666;
  	--indent-guide-color-dark:					#333333;
  	--inline-title-color-dark:					gray;
  	--italic-color-dark: 						#AC80FF;
  	--search-result-bgcolor-dark:				rgb(118 118 99 / 30%);
  	--sr-annote-color-dark0:					#004daa;
	--sr-annote-color-dark1:					#80761d;
	--sr-annote-color-dark2:					#517579;
	--sr-annote-color-dark3:					#517080;
	--sr-annote-color-dark4:					#547534;
	--sr-annote-color-dark5: 					#805b6d;
  	--strike-text-color-dark:					gray;
  	--table-border-color-dark:					gray;
  	--tableheader-bg-dark:						var(--bg-secondary-dark-alt);
  	--tableheader-bghover-dark:					var(--bg-secondary-dark-alt);
  	--text-normal-dark:							#C0C0C0;
  	--viewheader-lightpull-color-dark:			250, 0, 105;
  	--viewheader-boxshadow-dark:				0px 0px 10px 5px rgba(10,10,10,0.5);

  	/* light theme */
  	--bg-primary-light:							#FFFFFF;
  	--bg-primary-light-alt:						#F0F0F0;
  	--bg-secondary-light:						#F6F6F6;
  	--bg-secondary-light-alt:					#FCFCFC;
  	--blockquote-color-light:					gray;
  	--bold-color-light: 						#F97930;
  	--callout-background-alpha-light:			0.2;
	--callout-text-color-light:					var(--text-normal);
	--code-normal-light:						#FF4979;
  	--currenttab-border-color-light:			#FF7668;
  	--divider-color-light:						#E0E0E0;
  	--fm-section-label-light:					#77A88D;
	--fm-section-data-light:					#777;
  	--graph-unresolved-light:					red;
  	--h1-color-light: 							brown;
  	--h2-color-light: 							purple;
  	--h3-color-light: 							blueviolet;
  	--h4-color-light: 							green;
  	--h5-color-light: 							#343434;
  	--h6-color-light: 							#454545;
  	--header-shadow-light:						drop-shadow(0px 2px 2px rgba(31,31,31,0.3));
  	--highlight-border-color-light:				red;
  	--highlight-text-color-light:				var(--text-normal);
  	--hr-color-light:							var(--interactive-accent-hover);
  	--indent-guide-color-light:					#BBB;
  	--inline-title-color-light:					gray;
  	--italic-color-light: 						deeppink;
  	--search-result-bgcolor-light:				rgb(118 118 99 / 15%);
  	--sr-annote-color-light0: 					#509dFA;
	--sr-annote-color-light1: 					#D0C66d;
	--sr-annote-color-light2: 					#A1C5C9;
	--sr-annote-color-light3: 					#A1C0D0;
	--sr-annote-color-light4: 					#A4C584;
	--sr-annote-color-light5: 					#D0AbBd;
  	--strike-text-color-light:					gray;
  	--text-normal-light:						#606060;
  	--table-border-color-light:					#ddd;
  	--tableheader-bg-light:						var(--bg-secondary-light-alt);
  	--tableheader-bghover-light:				var(--bg-secondary-light-alt);
	--viewheader-lightpull-color-light:			10, 0, 155;
	--viewheader-boxshadow-light:				0px -4px 12px 4px rgba(10,10,10,0.2);
}

.theme-dark{
	/* ---------页面样式相关--------- */
	--background-primary: 						var(--bg-primary-dark);						/* 笔记区域背景色 */
	--background-primary-alt: 					var(--bg-primary-dark-alt);					/* 笔记中区别于背景色的第二种选择 */
	--background-secondary: 					var(--bg-secondary-dark);					/* 最顶栏 focus */
	--background-secondary-alt: 				var(--bg-secondary-dark-alt);				/* 最顶栏 非focus */
	--currenttab-border-color:					var(--currenttab-border-color-dark);		/* 当前Tab边框高亮颜色 */
	--inline-title-color: 						var(--inline-title-color-dark);				/* 页面内标题颜色 */

	/* ---------ribbon--------- */
	--background-modifier-border:				var(--divider-color-dark);					/* 左右侧栏分割线颜色 */
	--nav-item-background-active: 				hsla(var(--interactive-accent-hsl),0.5);	/* 左右侧栏选中状态背景色 */
	--viewheader-boxshadow:						var(--viewheader-boxshadow-dark);			/* 正文顶部层次感阴影 */
	--viewheader-lightpull-color:				var(--viewheader-lightpull-color-dark);		/* 正文顶部开灯基本色 */

	/* ---------各种文字样式--------- */
	--blockquote-color: 						var(--blockquote-color-dark);				/* 引用文字颜色 */
	--bold-color: 								var(--bold-color-dark);						/* 粗体字颜色 */
	--callout-background-alpha:					var(--callout-background-alpha-dark);		/* callouts 背景色透明度 */
	--callout-text-color:						var(--callout-text-color-dark);				/* callouts 文字颜色 */
	--code-normal: 								var(--code-normal-dark);					/* 代码文字颜色 */
	--fm-section-label:							var(--fm-section-label-dark);				/* frontmatter标签字体颜色 */
	--fm-section-data:							var(--fm-section-data-dark);				/* frontmatter值字体颜色 */
	--graph-node-unresolved: 					var(--graph-unresolved-dark);				/* 关系图谱中未建立文件颜色 */
	--h1-color: 								var(--h1-color-dark);                   	/* 大纲标题颜色 */
	--h2-color: 								var(--h2-color-dark);
	--h3-color: 								var(--h3-color-dark);
	--h4-color: 								var(--h4-color-dark);
	--h5-color: 								var(--h5-color-dark);
	--h6-color: 								var(--h6-color-dark);
	--header-shadow:							var(--header-shadow-dark);					/* 大纲标题阴影设置 */
	--highlight-border-color:					var(--highlight-border-color-dark);			/* 高亮marker下划线颜色 */
	--highlight-text-color: 					var(--highlight-text-color-dark);			/* 高亮marker文字颜色 */
	--hr-color: 								var(--hr-color-dark);						/* HR横线颜色 */
	--indentation-guide-color: 					var(--indent-guide-color-dark);				/* 缩进指示线颜色 */
	--italic-color: 							var(--italic-color-dark);					/* 斜体字颜色 */
	--search-result-bgcolor:					var(--search-result-bgcolor-dark);			/* 搜寻结果背景颜色 */
	--sr-annote-color:							var(--sr-annote-color-dark4);				/* 高亮marker标记颜色,参考简悦 */
	--strike-text-color:						var(--strike-text-color-dark);				/* 删除线字体颜色 */
	--table-border-color: 						var(--table-border-color-dark);				/* 表格边框颜色 */
	--table-header-background: 					var(--tableheader-bg-dark);					/* 表头背景色 */
	--table-header-background-hover: 			var(--tableheader-bghover-dark);			/* 表头背景色hover */
	--text-normal:								var(--text-normal-dark);					/* 正文常规颜色 */
}

.theme-light{
	/* ---------页面样式相关--------- */
	--background-primary: 						var(--bg-primary-light);						/* 笔记区域背景色 */
	--background-primary-alt: 					var(--bg-primary-light-alt);					/* 笔记中区别于背景色的第二种选择 */
	--background-secondary: 					var(--bg-secondary-light);					/* 最顶栏 focus */
	--background-secondary-alt: 				var(--bg-secondary-light-alt);				/* 最顶栏 非focus */
	--currenttab-border-color:					var(--currenttab-border-color-light);		/* 当前Tab边框高亮颜色 */
	--inline-title-color: 						var(--inline-title-color-light);				/* 页面内标题颜色 */

	/* ---------ribbon--------- */
	--background-modifier-border:				var(--divider-color-light);					/* 左右侧栏分割线颜色 */
	--nav-item-background-active: 				hsla(var(--interactive-accent-hsl),0.5);	/* 左右侧栏选中状态背景色 */
	--viewheader-boxshadow:						var(--viewheader-boxshadow-light);			/* 正文顶部层次感阴影 */
	--viewheader-lightpull-color:				var(--viewheader-lightpull-color-light);		/* 正文顶部开灯基本色 */

	/* ---------各种文字样式--------- */
	--blockquote-color: 						var(--blockquote-color-light);				/* 引用文字颜色 */
	--bold-color: 								var(--bold-color-light);						/* 粗体字颜色 */
	--callout-background-alpha:					var(--callout-background-alpha-light);		/* callouts 背景色透明度 */
	--callout-text-color:						var(--callout-text-color-light);				/* callouts 文字颜色 */
	--code-normal: 								var(--code-normal-light);					/* 代码文字颜色 */
	--fm-section-label:							var(--fm-section-label-light);				/* frontmatter标签字体颜色 */
	--fm-section-data:							var(--fm-section-data-light);				/* frontmatter值字体颜色 */
	--graph-node-unresolved: 					var(--graph-unresolved-light);				/* 关系图谱中未建立文件颜色 */
	--h1-color: 								var(--h1-color-light);                   	/* 大纲标题颜色 */
	--h2-color: 								var(--h2-color-light);
	--h3-color: 								var(--h3-color-light);
	--h4-color: 								var(--h4-color-light);
	--h5-color: 								var(--h5-color-light);
	--h6-color: 								var(--h6-color-light);
	--header-shadow:							var(--header-shadow-light);					/* 大纲标题阴影设置 */
	--highlight-border-color:					var(--highlight-border-color-light);			/* 高亮marker下划线颜色 */
	--highlight-text-color: 					var(--highlight-text-color-light);			/* 高亮marker文字颜色 */
	--hr-color: 								var(--hr-color-light);						/* HR横线颜色 */
	--indentation-guide-color: 					var(--indent-guide-color-light);				/* 缩进指示线颜色 */
	--italic-color: 							var(--italic-color-light);					/* 斜体字颜色 */
	--search-result-bgcolor:					var(--search-result-bgcolor-light);			/* 搜寻结果背景颜色 */
	--sr-annote-color:							var(--sr-annote-color-light4);				/* 高亮marker标记颜色,参考简悦 */
	--strike-text-color:						var(--strike-text-color-light);				/* 删除线字体颜色 */
	--table-border-color: 						var(--table-border-color-light);				/* 表格边框颜色 */
	--table-header-background: 					var(--tableheader-bg-light);					/* 表头背景色 */
	--table-header-background-hover: 			var(--tableheader-bghover-light);			/* 表头背景色hover */
	--text-normal:								var(--text-normal-light);					/* 正文常规颜色 */
}

/*////////////////////////////////////*/
/*////////////////////////////////////*/
/*////////////////////////////////////*/

/* 笔记顶部header阴影效果 */
/* 编辑模式下:关灯 */
/* 预览模式下:开灯 */
.is-focused .workspace-leaf.mod-active > div[data-mode="source"]
.view-header {	
	box-shadow: var(--viewheader-boxshadow);
}
/* 瀑布灯 */
.is-focused .workspace-leaf.mod-active > div[data-mode="preview"]
.view-header {
 	box-shadow: var(--viewheader-boxshadow), 0px -50px 150px 50px rgba(var(--viewheader-lightpull-color),0.5); 
}

/* 以下是用下方笔记区域做灯光效果的代码,但因为是背景色,所以会被前景元素遮挡,效果不好 */
/* 曲线灯 */
/*
.is-focused .workspace-leaf.mod-active > div[data-mode="preivew"]
.view-content {
  	background-image: radial-gradient(ellipse 90% 20% at center -25px,
  									  #FFFF0080 1%,
  									  #FFFF0030 3%,
  									  #FFFF0020 10%,
  									  transparent 60%);
  	width:100%;
  	height:100%;
}
*/
/* 直线灯 */
/*
.is-focused .workspace-leaf.mod-active > div[data-mode="preview"]
.view-content {
  	background-image: linear-gradient(#EEEE0020 1%,
  									  #AAAA0010 5%,
  									  #88880005 8%,
  									  transparent 10%);
  	width:100%;
  	height:100%;
}
*/

/* Frontmatter label样式 */
.frontmatter-container {
  	font-family: var(--font-monospace);
  	line-height: 1.6em;
}
.frontmatter-section-label{
  	color: var(--fm-section-label);
}
.frontmatter-section-data{
  	color: var(--fm-section-data);
 	font-size: small;
}

/* 标题Heading阴影 */
span.cm-header.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6,
h1,h2,h3,h4,h5,h6 {
	filter: var(--header-shadow);
}

/* 定义Callout边框和背景色透明度 */
.callout {
  	background-color: rgba(var(--callout-color), var(--callout-background-alpha));
  	color: var(--callout-text-color);
}

/* 当前笔记左边框高亮 */
.workspace-tabs.mod-stacked .workspace-tab-header.is-active.mod-active {
    border-left: 1px solid var(--currenttab-border-color); 	
}

/* 删除线 */
del, .cm-strikethrough {
  	color: var(--strike-text-color);
}

/* 高亮标记 */
span.cm-highlight.cm-highlight, 
.markdown-preview-view mark, 
.callout mark {
  color: var(--highlight-text-color);
  border-bottom: var(--highlight-border-thickness) solid var(--highlight-border-color);
  background: linear-gradient(hsla(0,0%,100%,0) 50%, var(--sr-annote-color) 0);
}

/* 预览模式 Tag 颜色 */
a.tag:hover {
  color: var(--text-normal);
  background-color: var(--interactive-accent);
}

/* 搜寻结果高亮 */
.is-flashing {
  background-color: var(--search-result-bgcolor);
  border-radius: 0;
}

/* 表格头 */
.table-view-table > thead > tr > th {
  font-weight: 400;
  font-size: larger;
  border-bottom: 2px gray solid;
}

/* foot-note 角标 */
.footnote-link {
  font-size: smaller;
}

/* Heading 标题行前面显示级别提示 */
.markdown-reading-view h1:hover::before, div[class="HyperMD-header HyperMD-header-1 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading1-before-margin);
  border:1px solid var(--h1-color);
  content:"1";
  font-size: var(--heading-before-font-size);
  color: var(--h1-color);
}
.markdown-reading-view h2:hover::before, div[class="HyperMD-header HyperMD-header-2 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading2-before-margin);
  border:1px solid var(--h2-color);
  content:"2";
  font-size: var(--heading-before-font-size);
  color: var(--h2-color);
}
.markdown-reading-view h3:hover::before, div[class="HyperMD-header HyperMD-header-3 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading3-before-margin);
  border:1px solid var(--h3-color);
  content:"3";
  font-size: var(--heading-before-font-size);
  color: var(--h3-color);
}
.markdown-reading-view h4:hover::before, div[class="HyperMD-header HyperMD-header-4 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading4-before-margin);
  border:1px solid var(--h4-color);
  content:"4";
  font-size: var(--heading-before-font-size);
  color: var(--h4-color);
}
.markdown-reading-view h5:hover::before, div[class="HyperMD-header HyperMD-header-5 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading5-before-margin);
  border:1px solid var(--h5-color);
  content:"5";
  font-size: var(--heading-before-font-size);
  color: var(--h5-color);
}
.markdown-reading-view h6:hover::before, div[class="HyperMD-header HyperMD-header-6 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading6-before-margin);
  border:1px solid var(--h6-color);
  content:"6";
  font-size: var(--heading-before-font-size);
  color: var(--h6-color);
}

/* 美化链接图标 */
/* 参考:https://www.yuque.com/fanmofeng/obsidian/wilqz3 */
/* 取消系统默认的图标 */
:is(.external-link, .markdown-source-view.mod-cm6 .cm-link .cm-underline, .markdown-source-view.mod-cm6 .cm-url .cm-underline){
  background-image: none;
  background-size: 0px;
  padding-right: 0px;
  background-position-y: 0px;
}
/* 外部链接 */
:is(.markdown-preview-view a.external-link, .cm-link:not(.cm-hmd-footnote) .cm-underline)::before {
  content: "";
  display: inline-block;
  transform: translateY(var(--size-2-1));
  width: calc(var(--font-text-size) - var(--size-4-1));
  height: calc(var(--font-text-size) - var(--size-4-1));
  margin-right: var(--size-4-1);
  margin-left: 2px;
  background-color: var(--link-external-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
}
/* 内部连接,未建立文件不显示before,有文件的才显示 */
:not(.markdown-rendered .internal-link.is-unresolved, .cm-hmd-internal-link .is-unresolved .cm-underline):is(.markdown-rendered .internal-link, .cm-hmd-internal-link .cm-underline)::before {
  content: "";
  display: inline-block;
  width: calc(var(--font-text-size) - var(--size-2-1) + 3px);
  height: calc(var(--font-text-size) - var(--size-2-1) + 3px);
  margin-right: var(--size-2-1);
  margin-left: 2px;
  margin-bottom: -2px;
  background-color: var(--link-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=""><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>');
}

/*////////////////////////////////////*/
/*///////////// 插件支持 //////////////*/
/*////////////////////////////////////*/

/* 插件 Image Captions */
.theme-dark .image-captions-figure {
  font-size:smaller;
  color: var(--text-normal);
  margin: 0px 0 0 0;
  padding: 0px 0px;
  text-align: center;
  background: var(--background-primary);
}
.theme-light .image-captions-figure {
  font-size:smaller;
  color: var(--text-normal);
  margin: 0px 0 0 0;
  padding: 0px 0px;
  text-align: center;
  background: var(--background-primary);
}

精简了一下,另外加入了style settings。差不多算是一个阶段版本了。
主要特点:

  1. 大纲标题增加了级别提示
  2. 当前tab显著标识(包括border和title颜色)
  3. 大纲标题阴影
  4. 主体页面顶部阴影效果
  5. 预览状态增加“开灯”效果,区分预览和编辑状态
  6. 有文件的内部链接前面加了图标,和未建立文件的链接加以区分
/*
|  \/  (_)                    
| .  . |___  ___   _ _ __ ___ 
| |\/| | \ \/ / | | | '__/ _ \
| |  | | |>  <| |_| | | |  __/
\_|  |_/_/_/\_\\__,_|_|  \___|

"Mixure" by @kelvinzhao
------------------------------
本人使用的英文字体是 Open Sans,中文字体是仓耳云黑
1. 借鉴了 LYT-Mode 和 Blue Topaz,还有简悦
2. 个人摸索调试,只知道一点皮毛,不保证冲突,不保证质量
3. 还没适配什么插件
4. 随意修改、分发
updated: 2023-3-11
*/

/* @settings

name: Mixure
id: Mixure-style
collapsed: false
settings:
	-
		id: background-colors
		title: Background colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: background-primary
		title: Primary background
		description: Background color for the main window
		type: variable-themed-color
		format: hex
		default-light: '#FFFFFF'
		default-dark: '#202020'
	-
		id: background-primary-alt
		title: Primary Alternative background
		description: Alternative background color for main window such as code background
		type: variable-themed-color
		format: hex
		default-light: '#F0F0F0'
		default-dark: '#242424'
	-
		id: background-secondary
		title: Second background
		description: Background color for left sidebar and status bar
		type: variable-themed-color
		format: hex
		default-light: '#F6F6F6'
		default-dark: '#282828'
	-
		id: background-secondary-alt
		title: Second Alternative background
		description: Alternative background color for title bar focused
		type: variable-themed-color
		format: hex
		default-light: '#FCFCFC'
		default-dark: '#353535'
	-
		id: callout-background-alpha
		title: Callout background alpha
		description: Alpha value of callout background color
		type: variable-number-slider
        default: 0.2
        min: 0.1
        max: 1
        step: 0.1
	-
		id: table-header-background
		title: Table Header background color
		type: variable-themed-color
		format: hex
		default-light: '#F6F6F6'
		default-dark: '#353535'
	-
		id: Headings-colors
		title: Headings colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: h1-color
		title: Heading 1 color
		type: variable-themed-color
		format: hex
		default-light: '#964B00'
		default-dark: '#D4DD00'
	-
		id: h2-color
		title: Heading 2 color
		type: variable-themed-color
		format: hex
		default-light: '#A020F0'
		default-dark: '#C983FF'
	-
		id: h3-color
		title: Heading 3 color
		type: variable-themed-color
		format: hex
		default-light: '#8a2be2'
		default-dark: '#00CAF6'
	-
		id: h4-color
		title: Heading 4 color
		type: variable-themed-color
		format: hex
		default-light: '#00FF00'
		default-dark: '#38A886'
	-
		id: h5-color
		title: Heading 5 color
		type: variable-themed-color
		format: hex
		default-light: '#343434'
		default-dark: '#B9C1E0'
	-
		id: h6-color
		title: Heading 6 color
		type: variable-themed-color
		format: hex
		default-light: '#454545'
		default-dark: '#979Db3'
	-
		id: Text-colors
		title: Text colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: text-normal
		title: Normal Text color
		type: variable-themed-color
		format: hex
		default-light: '#606060'
		default-dark: '#C0C0C0'
	-
		id: inline-title-color
		title: Inline Title color
		type: variable-themed-color
		format: hex
		default-light: '#808080'
		default-dark: '#808080'
	-
		id: bold-color
		title: Bold text color
		type: variable-themed-color
		format: hex
		default-light: '#F97930'
		default-dark: '#F8C280'
	-
		id: highlight-text-color
		title: Highlight Mark Text color
		type: variable-themed-color
		format: hex
		default-light: '#606060'
		default-dark: '#C0C0C0'
	-
		id: text-highlight-bg
		title: Highlight color
		type: variable-themed-color
		format: hex
		default-light: '#509dFA'
		default-dark: '#80761d'
	-
		id: italic-color
		title: Italic text color
		type: variable-themed-color
		format: hex
		default-light: '#ff1493'
		default-dark: '#AC80FF'
	-
		id: code-normal
		title: Code text color
		type: variable-themed-color
		format: hex
		default-light: '#FF4979'
		default-dark: '#F97979'
	-
		id: text-strike-color
		title: Strike text color
		type: variable-themed-color
		format: hex
		default-light: '#808080'
		default-dark: '#808080'
	-
		id: fm-section-label
		title: Frontmatter label text color
		type: variable-themed-color
		format: hex
		default-light: '#77A88D'
		default-dark: '#77A88D'
	-
		id: fm-section-data
		title: Frontmatter data text color
		type: variable-themed-color
		format: hex
		default-light: '#777777'
		default-dark: '#777777'
	-
		id: blockquote-color
		title: Blockquote text color
		type: variable-themed-color
		format: hex
		default-light: '#808080'
		default-dark: '#00FFFF'
    -
		id: callout-text-color
		title: Callout text color
		type: variable-themed-color
		format: hex
		default-light: '#606060'
		default-dark: '#00FFFF'
	-
		id: Other-settings
		title: Other settings
		type: heading
		level: 2
		collapsed: true
	-
		id: file-line-width
		title: File width
		type: variable-number
		format: vh
		default: 80
	-
		id: tab-text-color-focused-active-current
		title: Current tab border and file name color
		type: variable-themed-color
		format: hex
		default-light: '#FF7668'
		default-dark: '#F7FF79'
	-
		id: divider-color
		title: Divider color
		description: The color of dividers in sidebar
		type: variable-themed-color
		format: hex
		default-light: '#E0E0E0'
		default-dark: '#242424'
	-
		id: nav-item-background-active-alpha
		title: Alpha of active nav-item background color
		type: variable-number-slider
		min: 0.1
		max: 1
		step: 0.1
		default: 0.5
	-
		id: graph-unresolved
		title: Graph unresolved color
		description: The color of unresolved file in graph view
		type: variable-themed-color
		format: hex
		default-light: '#FF0000'
		default-dark: '#00FFFF'
	-
		id: heading-shadow
		title: Headings shadow color
		type: variable-themed-color
		opacity: true
		format: rgb
		default-light: rgba(31,31,31,0.3)
		default-dark: rgba(11,11,11,0.5)
	-
		id: hr-color
		title: Hr color
		type: variable-themed-color
		format: hex
		default-light: '#666666'
		default-dark: '#666666'
	-
		id: indentation-guide-color
		title: Indentation guide color
		type: variable-themed-color
		format: hex
		default-light: '#BBBBBB'
		default-dark: '#333333'	
	-
		id: table-border-color
		title: Table Border color
		type: variable-themed-color
		format: hex
		default-light: '#DDDDDD'
		default-dark: '#808080'
	-
		id: viewheaderpull-color
		title: Light color when previewing
		description: Lights Up! Look at it!
		type: variable-themed-color
		opacity: true
		format: rgb
		default-light: rgba(10, 0, 155, 0.5)
		default-dark: rgba(250, 0, 105, 0.5)
	-
		id: viewheaderpull-blur
		title: Blur of the Light
		type: variable-number
		format: px
		default: 150
	-
		id: viewheaderpull-length
		title: Length of the Light
		type: variable-number
		format: px
		default: 150
*/

body {
	/* 系统变量 */
	--file-line-width: 							80vh;                        		 /* 排版宽度 */
	--file-margins: 							20px 45px;                          /* 内容主体与边框最小距离 */
	--h1-line-height: 							1.4;								/* 大纲标题的行高 */
	--h2-line-height: 							1.4;
	--h3-line-height: 							1.4;
	--h4-line-height: 							1.4;
	--h5-line-height: 							1.4;
	--h6-line-height: 							1.4;
	--header-height:							40px;								/* app标题栏高度 */
	--line-height-normal:						1.7;                          	 	/* 行间距 */
	--link-decoration: 							none;                 				/* 内部链接取消下划线 */
	--link-external-decoration: 				none;        						/* 外部链接取消下划线 */
	--list-marker-color:						var(--interactive-accent);			/* 列表标志的颜色 */
	--nav-item-color-active:					white;								/* 左侧目录树当前项目文字颜色 */
	--tab-stacked-pane-width: 					600px;                      		/* 堆叠时,每个笔记容器的宽度 */
	--tab-stacked-font-size: 					1.1em;   							/* Tab上文件名大小 */

	/* 自定义变量 */
	--heading-before-font-size: 				12px;								/* Heading级别提示样式 */
	--heading-before-padding: 					0px 5px 0px 5px;
	--heading1-before-margin: 					10px -42px;
	--heading2-before-margin: 					5px -42px;
	--heading3-before-margin: 					4px -42px;
	--heading4-before-margin: 					2px -42px;
	--heading5-before-margin: 					1px -42px;
	--heading6-before-margin: 					1px -42px; 	
}

.theme-dark {
	/* dark theme */ 
	--background-primary: 						#202020;
	--background-primary-alt: 					#242424;
	--background-secondary: 					#282828;
	--background-secondary-alt:					#353535;
	--blockquote-color:							cyan;
	--bold-color: 								#F8C280;
	--callout-background-alpha:					0.1;
	--callout-text-color:						cyan;
	--code-normal:								#F97979;
	--tab-text-color-focused-active-current:	#F7FF79;
	--divider-color:							var(--background-secondary-alt);
	--fm-section-label:							#77A88D;
	--fm-section-data:							#777777;
	--graph-node-unresolved:					cyan;
	--h1-color: 								#D4DD00;
	--h2-color: 								#C983FF;
	--h3-color: 								#00CAF6;
	--h4-color: 								#38A886;
	--h5-color: 								#B9C1E0;
	--h6-color: 								#979Db3;
	--heading-shadow:							rgba(11,11,11,0.5);
	--highlight-text-color:						var(--text-normal);
	--hr-color: 								#666666;
	--indentation-guide-color:					#333333;
	--inline-title-color:						gray;
	--italic-color: 							#AC80FF;
	--text-highlight-bg:						#547534;
	--text-strike-color:						gray;
	--table-border-color:						gray;
	--table-header-background:					var(--background-secondary-alt);
	--text-normal:								#C0C0C0;
	--viewheaderpull-color:						rgba(250, 0, 105,0.5);
	--viewheaderpull-blur:						150px;
	--viewheaderpull-length:					150px;
	--viewheader-boxshadow:						rgba(10,10,10,0.5);
	--background-modifier-border:				var(--divider-color);					/* 左右侧栏分割线颜色 */
	--nav-item-background-active-alpha:			0.5;
	--nav-item-background-active: 				hsla(var(--interactive-accent-hsl),var(--nav-item-background-active-alpha));	/* 左右侧栏选中状态背景色 */
	--table-header-background-hover: 			var(--table-header-background);			/* 表头背景色hover */
	
}

.theme-light{
	/* light theme */
	--background-primary:						#FFFFFF;
	--background-primary-alt:					#F0F0F0;
	--background-secondary:						#F6F6F6;
	--background-secondary-alt:					#FCFCFC;
	--blockquote-color:							gray;
	--bold-color: 								#F97930;
	--callout-background-alpha:					0.2;
	--callout-text-color:						var(--text-normal);
	--code-normal:								#FF4979;
	--tab-text-color-focused-active-current:	#FF7668;
	--divider-color:							#E0E0E0;
	--fm-section-label:							#77A88D;
	--fm-section-data:							#777777;
	--graph-node-unresolved:					red;
	--h1-color: 								brown;
	--h2-color: 								purple;
	--h3-color: 								blueviolet;
	--h4-color: 								green;
	--h5-color: 								#343434;
	--h6-color: 								#454545;
	--heading-shadow:							rgba(31,31,31,0.3);
	--highlight-text-color:						var(--text-normal);
	--hr-color:									var(--interactive-accent-hover);
	--indentation-guide-color:					#BBBBBB;
	--inline-title-color:						gray;
	--italic-color: 							deeppink;
	--text-highlight-bg:						#509dFA;
	--text-strike-color:						gray;
	--text-normal:								#606060;
	--table-border-color:						#DDDDDD;
	--table-header-background:					var(--background-secondary-alt);
	--viewheaderpull-color:						rgba(10, 0, 155, 0.5);
	--viewheaderpull-blur:						150px;
	--viewheaderpull-length:					150px;
	--viewheader-boxshadow:						rgba(10,10,10,0.2);
	--background-modifier-border:				var(--divider-color);					/* 左右侧栏分割线颜色 */
	--nav-item-background-active: 				hsla(var(--interactive-accent-hsl),0.5);	/* 左右侧栏选中状态背景色 */
	--table-header-background-hover: 			var(--table-header-background);				/* 表头背景色hover */
}

/*////////////////////////////////////*/
/*////////////////////////////////////*/
/*////////////////////////////////////*/

/* 笔记顶部header阴影效果 */
/* 编辑模式下:关灯 */
/* 预览模式下:开灯 */
.is-focused .workspace-leaf.mod-active > div[data-mode="source"]
.view-header {	
	box-shadow: 0px 0px 10px 5px var(--viewheader-boxshadow);
}
/* 瀑布灯 */
.is-focused .workspace-leaf.mod-active > div[data-mode="preview"]
.view-header {
 	box-shadow: 0px 0px 10px 5px var(--viewheader-boxshadow), 0px 0px var(--viewheaderpull-blur) var(--viewheaderpull-length) var(--viewheaderpull-color); 
}

/* Frontmatter label样式 */
.frontmatter-container {
	font-family: var(--font-monospace);
	line-height: 1.6em;
}
.frontmatter-section-label{
	color: var(--fm-section-label);
}
.frontmatter-section-data{
	color: var(--fm-section-data);
 	font-size: small;
}

/* 标题Heading阴影 */
span.cm-header.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6,
h1,h2,h3,h4,h5,h6 {
	filter: drop-shadow(0px 3px 3px var(--heading-shadow));
}

/* 定义Callout边框和背景色透明度 */
.callout {
	background-color: rgba(var(--callout-color), var(--callout-background-alpha));
	color: var(--callout-text-color);
}

/* 当前笔记左边框高亮 */
.workspace-tabs.mod-stacked .workspace-tab-header.is-active.mod-active {
    border-left: 1px solid var(--tab-text-color-focused-active-current); 	
}

/* 删除线 */
del, .cm-strikethrough {
	color: var(--text-strike-color);
}

/* 高亮标记 */
span.cm-highlight.cm-highlight, 
.markdown-preview-view mark, 
.callout mark {
  color: var(--highlight-text-color);
  background: linear-gradient(hsla(0,0%,100%,0) 50%, var(--text-highlight-bg) 0);
}

/* 预览模式 Tag 颜色 */
a.tag:hover {
  color: var(--text-normal);
  background-color: var(--interactive-accent);
}

/* 表格头 */
.table-view-table > thead > tr > th {
  font-weight: 400;
  font-size: larger;
  border-bottom: 2px gray solid;
}

/* foot-note 角标 */
.footnote-link {
  font-size: smaller;
}

/* Heading 标题行前面显示级别提示 */
.markdown-reading-view h1:hover::before, div[class="HyperMD-header HyperMD-header-1 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading1-before-margin);
  border:1px solid var(--h1-color);
  content:"1";
  font-size: var(--heading-before-font-size);
  color: var(--h1-color);
  background-color: var(--background-primary);
  z-index: 2;
}
.markdown-reading-view h2:hover::before, div[class="HyperMD-header HyperMD-header-2 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading2-before-margin);
  border:1px solid var(--h2-color);
  content:"2";
  font-size: var(--heading-before-font-size);
  color: var(--h2-color);
  background-color: var(--background-primary);
  z-index: 2;
}
.markdown-reading-view h3:hover::before, div[class="HyperMD-header HyperMD-header-3 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading3-before-margin);
  border:1px solid var(--h3-color);
  content:"3";
  font-size: var(--heading-before-font-size);
  color: var(--h3-color);
  background-color: var(--background-primary);
  z-index: 2;
}
.markdown-reading-view h4:hover::before, div[class="HyperMD-header HyperMD-header-4 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading4-before-margin);
  border:1px solid var(--h4-color);
  content:"4";
  font-size: var(--heading-before-font-size);
  color: var(--h4-color);
  background-color: var(--background-primary);
  z-index: 2;
}
.markdown-reading-view h5:hover::before, div[class="HyperMD-header HyperMD-header-5 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading5-before-margin);
  border:1px solid var(--h5-color);
  content:"5";
  font-size: var(--heading-before-font-size);
  color: var(--h5-color);
  background-color: var(--background-primary);
  z-index: 2;
}
.markdown-reading-view h6:hover::before, div[class="HyperMD-header HyperMD-header-6 cm-line"]:hover::before {
  position: absolute;
  padding: var(--heading-before-padding);
  margin: var(--heading6-before-margin);
  border:1px solid var(--h6-color);
  content:"6";
  font-size: var(--heading-before-font-size);
  color: var(--h6-color);
  background-color: var(--background-primary);
  z-index: 2;
}

/* 美化链接图标 */
/* 参考:https://www.yuque.com/fanmofeng/obsidian/wilqz3 */
/* 取消系统默认的图标 */
:is(.external-link, .markdown-source-view.mod-cm6 .cm-link .cm-underline, .markdown-source-view.mod-cm6 .cm-url .cm-underline){
  background-image: none;
  background-size: 0px;
  padding-right: 0px;
  background-position-y: 0px;
}
/* 外部链接 */
:is(.markdown-preview-view a.external-link, .cm-link:not(.cm-hmd-footnote) .cm-underline)::before {
  content: "";
  display: inline-block;
  transform: translateY(var(--size-2-1));
  width: calc(var(--font-text-size) - var(--size-4-1));
  height: calc(var(--font-text-size) - var(--size-4-1));
  margin-right: var(--size-4-1);
  margin-left: 2px;
  background-color: var(--link-external-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
}
/* 内部连接,未建立文件不显示before,有文件的才显示 */
:not(.markdown-rendered .internal-link.is-unresolved, .cm-hmd-internal-link .is-unresolved .cm-underline):is(.markdown-rendered .internal-link, .cm-hmd-internal-link .cm-underline)::before {
  content: "";
  display: inline-block;
  width: calc(var(--font-text-size) - var(--size-2-1) + 3px);
  height: calc(var(--font-text-size) - var(--size-2-1) + 3px);
  margin-right: var(--size-2-1);
  margin-left: 2px;
  margin-bottom: -2px;
  background-color: var(--link-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=""><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>');
}

/*////////////////////////////////////*/
/*///////////// 插件支持 //////////////*/
/*////////////////////////////////////*/

/* 插件 Image Captions */
.theme-dark .image-captions-figure {
  font-size:smaller;
  color: var(--text-normal);
  margin: 0px 0 0 0;
  padding: 0px 0px;
  text-align: center;
  background: var(--background-primary);
}
.theme-light .image-captions-figure {
  font-size:smaller;
  color: var(--text-normal);
  margin: 0px 0 0 0;
  padding: 0px 0px;
  text-align: center;
  background: var(--background-primary);
}

qaq很好的外观,为啥我这里复制不了代码

我可以呀,是不是用户的成长级别不够?

0312: + .frontmatter-container .frontmatter-section-label {flex-basis: 30%;}
/ 精简了一下Heading标识,固定显示不再隐藏,增加距离设定,如果要隐藏可以设置大一些
+ 增加堆叠时页面宽度设定 tab-stacked-pane-width
/ 增加标签hover状态字体反色算法,a.tag:hover
/ 优化了瀑布灯、一些变量值
0315: - 删除callout-text-color,直接使用callout-color

/*
|  \/  (_)                    
| .  . |___  ___   _ _ __ ___ 
| |\/| | \ \/ / | | | '__/ _ \
| |  | | |>  <| |_| | | |  __/
\_|  |_/_/_/\_\\__,_|_|  \___|

"Mixure" by @kelvinzhao
------------------------------
本人使用的英文字体是 Open Sans,中文字体是仓耳云黑
1. 借鉴了 LYT-Mode 和 Blue Topaz,还有简悦
2. 个人摸索调试,只知道一点皮毛,不保证冲突,不保证质量
3. 还没适配什么插件
4. 随意修改、分发
updated: 2023-3-11


------------------------------
0312: +  .frontmatter-container .frontmatter-section-label {flex-basis: 30%;}
      /  精简了一下Heading标识,固定显示不再隐藏,增加距离设定,如果要隐藏可以设置大一些 
      +  增加堆叠时页面宽度设定 tab-stacked-pane-width
      /  增加标签hover状态字体反色算法,a.tag:hover
      /  优化了瀑布灯、一些变量值
0315: -  删除callout-text-color,直接使用callout-color
*/

/* @settings

name: Mixure
id: Mixure-style
collapsed: false
settings:
	-
		id: background-colors
		title: Background colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: background-primary
		title: Primary background
		description: Background color for the main window
		type: variable-themed-color
		format: hex
		default-light: '#FFFFFF'
		default-dark: '#202020'
	-
		id: background-primary-alt
		title: Primary Alternative background
		description: Alternative background color for main window such as code background
		type: variable-themed-color
		format: hex
		default-light: '#F0F0F0'
		default-dark: '#242424'
	-
		id: background-secondary
		title: Second background
		description: Background color for left sidebar and status bar
		type: variable-themed-color
		format: hex
		default-light: '#F6F6F6'
		default-dark: '#282828'
	-
		id: background-secondary-alt
		title: Second Alternative background
		description: Alternative background color for title bar focused
		type: variable-themed-color
		format: hex
		default-light: '#FCFCFC'
		default-dark: '#353535'
	-
		id: callout-background-alpha
		title: Callout background alpha
		description: Alpha value of callout background color
		type: variable-number-slider
        default: 0.2
        min: 0.1
        max: 1
        step: 0.1
	-
		id: table-header-background
		title: Table Header background color
		type: variable-themed-color
		format: hex
		default-light: '#F6F6F6'
		default-dark: '#353535'
	-
		id: Headings-colors
		title: Headings colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: h1-color
		title: Heading 1 color
		type: variable-themed-color
		format: hex
		default-light: '#964B00'
		default-dark: '#D4DD00'
	-
		id: h2-color
		title: Heading 2 color
		type: variable-themed-color
		format: hex
		default-light: '#A020F0'
		default-dark: '#C983FF'
	-
		id: h3-color
		title: Heading 3 color
		type: variable-themed-color
		format: hex
		default-light: '#8a2be2'
		default-dark: '#00CAF6'
	-
		id: h4-color
		title: Heading 4 color
		type: variable-themed-color
		format: hex
		default-light: '#00FF00'
		default-dark: '#38A886'
	-
		id: h5-color
		title: Heading 5 color
		type: variable-themed-color
		format: hex
		default-light: '#343434'
		default-dark: '#B9C1E0'
	-
		id: h6-color
		title: Heading 6 color
		type: variable-themed-color
		format: hex
		default-light: '#454545'
		default-dark: '#979Db3'
	-
		id: Text-colors
		title: Text colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: text-normal
		title: Normal Text color
		type: variable-themed-color
		format: hex
		default-light: '#606060'
		default-dark: '#C0C0C0'
	-
		id: bold-color
		title: Bold text color
		type: variable-themed-color
		format: hex
		default-light: '#F97930'
		default-dark: '#F8C280'
	-
		id: blockquote-color
		title: Blockquote text color
		type: variable-themed-color
		format: hex
		default-light: '#808080'
		default-dark: '#00FFFF'
	-
		id: code-normal
		title: Code text color
		type: variable-themed-color
		format: hex
		default-light: '#FF4979'
		default-dark: '#F97979'
	-
		id: inline-title-color
		title: Inline Title color
		type: variable-themed-color
		format: hex
		default-light: '#808080'
		default-dark: '#808080'
	-
		id: italic-color
		title: Italic text color
		type: variable-themed-color
		format: hex
		default-light: '#ff1493'
		default-dark: '#AC80FF'
	-
		id: highlight-text-color
		title: Highlight Mark Text color
		type: variable-themed-color
		format: hex
		default-light: '#606060'
		default-dark: '#C0C0C0'
	-
		id: text-highlight-bg
		title: Highlight block color
		description: Highlight block color & search results background color;
		type: variable-themed-color
		format: hex
		default-light: '#509DFA'
		default-dark: '#80761d'
	-
		id: text-strike-color
		title: Strike text color
		type: variable-themed-color
		format: hex
		default-light: '#808080'
		default-dark: '#808080'
	-
		id: fm-section-label
		title: Frontmatter label text color
		type: variable-themed-color
		format: hex
		default-light: '#77A88D'
		default-dark: '#77A88D'
	-
		id: fm-section-data
		title: Frontmatter data text color
		type: variable-themed-color
		format: hex
		default-light: '#777777'
		default-dark: '#777777'
	-
		id: Other-settings
		title: Other settings
		type: heading
		level: 2
		collapsed: true
	-
		id: nav-item-background-active-alpha
		title: Alpha of active nav-item background color
		type: variable-number-slider
		min: 0.1
		max: 1
		step: 0.1
		default: 0.5
	-
		id: file-line-width
		title: File width
		type: variable-number
		format: vh
		default: 80
	-
		id: tab-stacked-pane-width
		title: Stacked Pane width
		type: variable-number
		format: px
		default: 600
	-
		id: tab-text-color-focused-active-current
		title: Current tab border and file name color
		type: variable-themed-color
		format: hex
		default-light: '#FF7668'
		default-dark: '#F7FF79'
	-
		id: background-modifier-border
		title: Divider color
		description: The color of dividers in sidebar
		type: variable-themed-color
		format: hex
		default-light: '#E0E0E0'
		default-dark: '#242424'
	-
		id: graph-unresolved
		title: Graph unresolved color
		description: The color of unresolved file in graph view
		type: variable-themed-color
		format: hex
		default-light: '#FF0000'
		default-dark: '#00FFFF'
	-
		id: hr-color
		title: Hr color
		type: variable-themed-color
		format: hex
		default-light: '#666666'
		default-dark: '#666666'
	-
		id: guide-color
		title: Indentation guide base color
		type: variable-themed-color
		format: rgb-values
		default-light: '#777'
		default-dark: '#FFF'
	-
		id: table-border-color
		title: Table Border color
		type: variable-themed-color
		format: hex
		default-light: '#DDDDDD'
		default-dark: '#808080'
	-
		id: heading-hint-distance
		title: Heading indicator distance;
		description: The distance from Heading and it's indicator, 999 to hide.
		type: variable-number
		format: px
		default: 65
	-
		id: heading-shadow
		title: Headings shadow color
		type: variable-themed-color
		opacity: true
		format: rgb
		default-light: rgba(31,31,31,0.3)
		default-dark: rgba(11,11,11,0.5)
	-
		id: viewheaderpull-color
		title: Light color when previewing
		description: Lights Up! Look at it!
		type: variable-themed-color
		opacity: true
		format: hsl
		default-light: hsla(244, 100%, 30%, 0.5)
		default-dark: hsla(335, 100%, 49%, 0.5)
	-
		id: viewheaderpull-blur
		title: Blur of the Light
		type: variable-number
		format: px
		default: 150
	-
		id: viewheaderpull-length
		title: Length of the Light
		type: variable-number
		format: px
		default: 150
*/

body {
	/* 系统变量 */
	--file-line-width: 							80vh;                        		 /* 排版宽度 */
	--file-margins: 							40px 80px;                          /* 内容主体与边框最小距离 */
	--h1-line-height: 							1.6em;								/* 大纲标题的行高 */
	--h2-line-height: 							1.6em;
	--h3-line-height: 							1.5em;
	--h4-line-height: 							1.4em;
	--h5-line-height: 							1.4em;
	--h6-line-height: 							1.4em;
	--header-height:							40px;								/* app标题栏高度 */
	--line-height-normal:						1.7em;                          	/* 行间距 */
	--link-decoration: 							none;                 				/* 内部链接取消下划线 */
	--link-external-decoration: 				none;        						/* 外部链接取消下划线 */
	--list-marker-color:						var(--interactive-accent);			/* 列表标志的颜色 */
	--nav-item-color-active:					white;								/* 左侧目录树当前项目文字颜色 */
	--tab-stacked-pane-width: 					800px;                      		/* 堆叠时,每个笔记容器的宽度 */
	--tab-stacked-font-size: 					1.1em;   							/* Tab上文件名大小 */

	/* 自定义变量 */
	--callout-background-alpha:					0.1;
	--heading-before-font-size: 				14px;								/* Heading级别提示样式 */
	--heading-before-padding: 					0px 5px 0px 5px;
	--heading-hint-distance:					65px;
	--heading-hint-margin:						0px calc(0px - var(--heading-hint-distance));;
	--nav-item-background-active-alpha:			0.5;
	--nav-item-background-active: 				hsla(var(--interactive-accent-hsl),var(--nav-item-background-active-alpha));	/* 左右侧栏选中状态背景色 */
	--viewheaderpull-blur:						150px;
	--viewheaderpull-length:					150px;
}

.theme-dark {
	/* dark theme */ 
	--background-primary: 						#202020;
	--background-primary-alt: 					#242424;
	--background-secondary: 					#282828;
	--background-secondary-alt:					#353535;
	--blockquote-color:							cyan;
	--bold-color: 								#F8C280;
	--code-normal:								#F97979;
	--tab-text-color-focused-active-current:	#F7FF79;
	--fm-section-label:							#77A88D;
	--fm-section-data:							#777777;
	--graph-node-unresolved:					cyan;
	--h1-color: 								#D4DD00;
	--h2-color: 								#C983FF;
	--h3-color: 								#00CAF6;
	--h4-color: 								#38A886;
	--h5-color: 								#B9C1E0;
	--h6-color: 								#979Db3;
	--heading-shadow:							rgba(11,11,11,0.5);
	--highlight-text-color:						#C0C0C0;
	--hr-color: 								#666666;
	--guide-color:								255,255,255;
	--indentation-guide-color:					rgba(var(--guide-color),0.15);
	--indentation-guide-color-active:			rgba(var(--guide-color),0.5);
	--inline-title-color:						gray;
	--italic-color: 							#AC80FF;
	--text-highlight-bg:						#80761d;
	--text-strike-color:						gray;
	--table-border-color:						gray;
	--table-header-background:					#353535;
	--text-normal:								#C0C0C0;
	--viewheader-boxshadow:						rgba(10,10,10,0.5);
	--background-modifier-border:				#242424;								/* 左右侧栏分割线颜色 */
	--table-header-background-hover: 			var(--table-header-background);			/* 表头背景色hover */
	--viewheaderpull-color:						hsla(335, 100%, 49%, 0.5); 
	
}

.theme-light{
	/* light theme */
	--background-primary:						#FFFFFF;
	--background-primary-alt:					#F0F0F0;
	--background-secondary:						#F6F6F6;
	--background-secondary-alt:					#FCFCFC;
	--blockquote-color:							gray;
	--bold-color: 								#F97930;
	--code-normal:								#FF4979;
	--tab-text-color-focused-active-current:	#FF7668;
	--fm-section-label:							#77A88D;
	--fm-section-data:							#777777;
	--graph-node-unresolved:					red;
	--h1-color: 								brown;
	--h2-color: 								purple;
	--h3-color: 								blueviolet;
	--h4-color: 								green;
	--h5-color: 								#343434;
	--h6-color: 								#454545;
	--heading-shadow:							rgba(31,31,31,0.3);
	--highlight-text-color:						#606060;
	--hr-color:									#666666;
	--guide-color:								125,125,125;
	--indentation-guide-color:					rgba(var(--guide-color),0.15);
	--indentation-guide-color-active:			rgba(var(--guide-color),0.5);
	--inline-title-color:						gray;
	--italic-color: 							deeppink;
	--text-highlight-bg:						#509DFA;
	--text-strike-color:						gray;
	--text-normal:								#606060;
	--table-border-color:						#DDDDDD;
	--table-header-background:					#F6F6F6;
	--viewheader-boxshadow:						rgba(10,10,10,0.2);
	--background-modifier-border:				#E0E0E0;									/* 左右侧栏分割线颜色 */
	--table-header-background-hover: 			var(--table-header-background);				/* 表头背景色hover */
	--viewheaderpull-color:						hsla(244, 100%, 30%, 0.5);
}

/*////////////////////////////////////*/
/*////////////////////////////////////*/
/*////////////////////////////////////*/

/* 笔记顶部header阴影效果 */
/* 编辑模式下:关灯 */
/* 预览模式下:开灯 */
.view-header-title-container:not(.mod-at-end):after {
	background: none;
}
.is-focused .workspace-leaf.mod-active > div[data-mode="source"]
.view-header {	
	box-shadow: 0px -2px 10px 5px var(--viewheader-boxshadow);
}
/* 瀑布灯 */
.is-focused .workspace-leaf.mod-active > div[data-mode="preview"]
.view-header {
 	box-shadow: 0px -2px 10px 5px var(--viewheader-boxshadow), 0px 0px var(--viewheaderpull-blur) var(--viewheaderpull-length) var(--viewheaderpull-color); 
 	/* background-color: var(--viewheaderpull-color); */

}

/* Frontmatter label样式 */
.frontmatter-container {
	font-family: var(--font-monospace);
	line-height: 1.6em;
}
.frontmatter-container .frontmatter-section-label {
	color: var(--fm-section-label);
	flex-basis: 30%;
}
:is(.frontmatter-container .frontmatter-alias, .frontmatter-section-data) {
	color: var(--fm-section-data);
 	font-size: small;
}

/* 标题Heading阴影 */
span.cm-header.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6,
h1,h2,h3,h4,h5,h6 {
	filter: drop-shadow(0px 3px 3px var(--heading-shadow));
}

/* 定义Callout边框和背景色透明度 */
.callout {
	background-color: rgba(var(--callout-color), var(--callout-background-alpha));
	color: rgb(var(--callout-color));
}

/* 当前笔记左边框高亮 */
.workspace-tabs.mod-active.mod-stacked .workspace-tab-header.is-active.mod-active {
	border-left: 2px solid var(--tab-text-color-focused-active-current);
}

/* 删除线 */
del, .cm-strikethrough {
	color: var(--text-strike-color);
}

/* 高亮标记 */
span.cm-highlight.cm-highlight, 
.markdown-preview-view mark, 
.callout mark {
  color: var(--highlight-text-color);
  background: linear-gradient(hsla(0,0%,100%,0) 50%, var(--text-highlight-bg) 0);
}

/* 预览模式 Tag 颜色 */
/* 自动反色计算参考了掘金文章 */
/* https://juejin.cn/post/6874958645952692238#heading-3 */
a.tag:hover {
  background-color: var(--interactive-accent);
  --switch: calc((var(--accent-l) - 50%) * -100);
  color: hsl(0, 0%, var(--switch));
}

/* 表格头 */
.table-view-table > thead > tr > th {
  font-weight: 400;
  font-size: larger;
  border-bottom: 2px gray solid;
}

/* foot-note 角标 */
.footnote-link {
  font-size: smaller;
}

/* Heading 标题行前面显示级别提示 */
:is(h1, .HyperMD-header-1.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H1";
  font-size: var(--heading-before-font-size);
  color: var(--h1-color);
}
:is(h2, .HyperMD-header-2.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H2";
  font-size: var(--heading-before-font-size);
  color: var(--h2-color);
}
:is(h3, .HyperMD-header-3.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H3";
  font-size: var(--heading-before-font-size);
  color: var(--h3-color);
}
:is(h4, .HyperMD-header-4.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H4";
  font-size: var(--heading-before-font-size);
  color: var(--h4-color);
}
:is(h5, .HyperMD-header-5.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H5";
  font-size: var(--heading-before-font-size);
  color: var(--h5-color);
}
:is(h6, .HyperMD-header-6.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H6";
  font-size: var(--heading-before-font-size);
  color: var(--h6-color);
}

/* 美化链接图标 */
/* 参考:https://www.yuque.com/fanmofeng/obsidian/wilqz3 */
/* 取消系统默认的图标 */
:is(.external-link, .markdown-source-view.mod-cm6 .cm-link .cm-underline, .markdown-source-view.mod-cm6 .cm-url .cm-underline){
  background-image: none;
  background-size: 0px;
  padding-right: 0px;
  background-position-y: 0px;
}
/* 外部链接 */
:is(.markdown-preview-view a.external-link, .cm-link:not(.cm-hmd-footnote) .cm-underline)::before {
  content: "";
  display: inline-block;
  transform: translateY(var(--size-2-1));
  width: calc(var(--font-text-size) - var(--size-4-1));
  height: calc(var(--font-text-size) - var(--size-4-1));
  margin-right: var(--size-4-1);
  margin-left: 2px;
  background-color: var(--link-external-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
}
/* 内部连接,未建立文件不显示before,有文件的才显示 */
:not(.markdown-rendered .internal-link.is-unresolved, .cm-hmd-internal-link .is-unresolved .cm-underline):is(.markdown-rendered .internal-link, .cm-hmd-internal-link .cm-underline)::before {
  content: "";
  display: inline-block;
  width: calc(var(--font-text-size) - var(--size-2-1) + 3px);
  height: calc(var(--font-text-size) - var(--size-2-1) + 3px);
  margin-right: var(--size-2-1);
  margin-left: 2px;
  margin-bottom: -2px;
  background-color: var(--link-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=""><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>');
}

/*////////////////////////////////////*/
/*///////////// 插件支持 //////////////*/
/*////////////////////////////////////*/

/* 插件 Image Captions */
.theme-dark .image-captions-figure {
  font-size:smaller;
  color: var(--text-normal);
  margin: 0px 0 0 0;
  padding: 0px 0px;
  text-align: center;
  background: var(--background-primary);
}
.theme-light .image-captions-figure {
  font-size:smaller;
  color: var(--text-normal);
  margin: 0px 0 0 0;
  padding: 0px 0px;
  text-align: center;
  background: var(--background-primary);
}


继续更新一下

/*
|  \/  (_)                    
| .  . |___  ___   _ _ __ ___ 
| |\/| | \ \/ / | | | '__/ _ \
| |  | | |>  <| |_| | | |  __/
\_|  |_/_/_/\_\\__,_|_|  \___|

"Mixure" by @kelvinzhao
------------------------------
本人使用的英文字体是 Open Sans,中文字体是仓耳云黑
1. 借鉴了 LYT-Mode 和 Blue Topaz,还有简悦
2. 个人摸索调试,只知道一点皮毛,不保证冲突,不保证质量
3. 还没适配什么插件
4. 随意修改、分发
updated: 2023-3-30
*/

/* @settings

name: Mixure
id: Mixure-style
collapsed: false
settings:
	-
		id: background-colors
		title: Background colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: background-primary
		title: Primary background
		description: Background color for the main window
		type: variable-themed-color
		format: hex
		default-light: '#FFFFFF'
		default-dark: '#202020'
	-
		id: background-primary-alt
		title: Primary Alternative background
		description: Alternative background color for main window such as code background
		type: variable-themed-color
		format: hex
		default-light: '#F0F0F0'
		default-dark: '#242424'
	-
		id: background-secondary
		title: Second background
		description: Background color for left sidebar and status bar
		type: variable-themed-color
		format: hex
		default-light: '#F6F6F6'
		default-dark: '#282828'
	-
		id: background-secondary-alt
		title: Second Alternative background
		description: Alternative background color for title bar focused
		type: variable-themed-color
		format: hex
		default-light: '#FCFCFC'
		default-dark: '#353535'
	-
		id: callout-background-alpha
		title: Callout background alpha
		description: Alpha value of callout background color
		type: variable-number-slider
        default: 0.2
        min: 0.1
        max: 1
        step: 0.1
	-
		id: table-header-background
		title: Table Header background color
		type: variable-themed-color
		format: hex
		default-light: '#F6F6F6'
		default-dark: '#353535'
	-
		id: Headings-colors
		title: Headings colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: h1-color
		title: Heading 1 color
		type: variable-themed-color
		format: hex
		default-light: '#964B00'
		default-dark: '#D4DD00'
	-
		id: h2-color
		title: Heading 2 color
		type: variable-themed-color
		format: hex
		default-light: '#A020F0'
		default-dark: '#C983FF'
	-
		id: h3-color
		title: Heading 3 color
		type: variable-themed-color
		format: hex
		default-light: '#8a2be2'
		default-dark: '#00CAF6'
	-
		id: h4-color
		title: Heading 4 color
		type: variable-themed-color
		format: hex
		default-light: '#00FF00'
		default-dark: '#38A886'
	-
		id: h5-color
		title: Heading 5 color
		type: variable-themed-color
		format: hex
		default-light: '#343434'
		default-dark: '#B9C1E0'
	-
		id: h6-color
		title: Heading 6 color
		type: variable-themed-color
		format: hex
		default-light: '#454545'
		default-dark: '#979Db3'
	-
		id: Text-colors
		title: Text colors settings
		type: heading
		level: 2
		collapsed: true
	-
		id: text-normal
		title: Normal Text color
		type: variable-themed-color
		format: hex
		default-light: '#606060'
		default-dark: '#C0C0C0'
	-
		id: bold-color
		title: Bold text color
		type: variable-themed-color
		format: hex
		default-light: '#F97930'
		default-dark: '#F8C280'
	-
		id: blockquote-color
		title: Blockquote text and left border color
		type: variable-themed-color
		format: hex
		default-light: '#00FFFF'
		default-dark: '#00FFFF'
	-
		id: code-normal
		title: Code text color
		type: variable-themed-color
		format: hex
		default-light: '#FF4979'
		default-dark: '#F97979'
	-
		id: inline-title-color
		title: Inline Title color
		type: variable-themed-color
		format: hex
		default-light: '#808080'
		default-dark: '#808080'
	-
		id: italic-color
		title: Italic text color
		type: variable-themed-color
		format: hex
		default-light: '#ff1493'
		default-dark: '#AC80FF'
	-
		id: text-highlight-bg
		title: Search result background color
		type: variable-themed-color
		format: hex
		default-light: '#509DFA'
		default-dark: '#80761d'
	-
		id: highlight-base-color
		title: Highlight base color
		description: Highlight block color & search results background color;
		type: variable-themed-color
		format: hsl-split
		default-light: '#509DFA'
		default-dark: '#80761D'
	-
		id: text-strike-color
		title: Strike text color
		type: variable-themed-color
		format: hex
		default-light: '#808080'
		default-dark: '#808080'
	-
		id: fm-section-label
		title: Frontmatter label text color
		type: variable-themed-color
		format: hex
		default-light: '#77A88D'
		default-dark: '#77A88D'
	-
		id: fm-section-data
		title: Frontmatter data text color
		type: variable-themed-color
		format: hex
		default-light: '#777777'
		default-dark: '#777777'
	-
		id: Other-settings
		title: Other settings
		type: heading
		level: 2
		collapsed: true
	-
		id: nav-item-background-active-alpha
		title: Alpha of active nav-item background color
		type: variable-number-slider
		min: 0.1
		max: 1
		step: 0.1
		default: 0.5
	-
		id: file-line-width
		title: File width
		type: variable-number
		format: vh
		default: 80
	-
		id: tab-stacked-pane-width
		title: Stacked Pane width
		type: variable-number
		format: px
		default: 600
	-
		id: tab-text-color-focused-active-current
		title: Current tab border and file name color
		type: variable-themed-color
		format: hex
		default-light: '#FF7668'
		default-dark: '#F7FF79'
	-
		id: background-modifier-border
		title: Divider color
		description: The color of dividers in sidebar
		type: variable-themed-color
		format: hex
		default-light: '#E0E0E0'
		default-dark: '#242424'
	-
		id: graph-unresolved
		title: Graph unresolved color
		description: The color of unresolved file in graph view
		type: variable-themed-color
		format: hex
		default-light: '#FF0000'
		default-dark: '#00FFFF'
	-
		id: hr-color
		title: Hr color
		type: variable-themed-color
		format: hex
		default-light: '#666666'
		default-dark: '#666666'
	-
		id: guide-color
		title: Indentation guide base color
		type: variable-themed-color
		format: rgb-values
		default-light: '#777'
		default-dark: '#FFF'
	-
		id: table-border-color
		title: Table Border color
		type: variable-themed-color
		format: hex
		default-light: '#DDDDDD'
		default-dark: '#808080'
	-
		id: heading-hint-distance
		title: Heading indicator distance;
		description: The distance from Heading and it's indicator, 999 to hide.
		type: variable-number
		format: px
		default: 65
	-
		id: heading-shadow
		title: Headings shadow color
		type: variable-themed-color
		opacity: true
		format: rgb
		default-light: rgba(31,31,31,0.3)
		default-dark: rgba(11,11,11,0.5)
	-
		id: viewheaderpull-color
		title: Light color when previewing
		description: Lights Up! Look at it!
		type: variable-themed-color
		opacity: true
		format: hsl
		default-light: hsla(244, 100%, 30%, 0.5)
		default-dark: hsla(335, 100%, 49%, 0.5)
	-
		id: viewheaderpull-blur
		title: Blur of the Light
		type: variable-number
		format: px
		default: 50
	-
		id: viewheaderpull-length
		title: Length of the Light
		type: variable-number
		format: px
		default: 10
*/

body {
	/* 系统变量 */
	--file-line-width: 							80vh;                        		 /* 排版宽度 */
	--file-margins: 							40px 80px;                          /* 内容主体与边框最小距离 */
	--h1-line-height: 							1.6em;								/* 大纲标题的行高 */
	--h2-line-height: 							1.6em;
	--h3-line-height: 							1.5em;
	--h4-line-height: 							1.4em;
	--h5-line-height: 							1.4em;
	--h6-line-height: 							1.4em;
	--header-height:							40px;								/* app标题栏高度 */
	--line-height-normal:						1.7em;                          	/* 行间距 */
	--link-decoration: 							none;                 				/* 内部链接取消下划线 */
	--link-external-decoration: 				none;        						/* 外部链接取消下划线 */
	--list-marker-color:						var(--interactive-accent);			/* 列表标志的颜色 */
	--nav-item-color-active:					white;								/* 左侧目录树当前项目文字颜色 */
	--tab-stacked-pane-width: 					800px;                      		/* 堆叠时,每个笔记容器的宽度 */
	--tab-stacked-font-size: 					1.1em;   							/* Tab上文件名大小 */

	/* 自定义变量 */
	--callout-background-alpha:					0.1;
	--heading-before-font-size: 				14px;								/* Heading级别提示样式 */
	--heading-before-padding: 					0px 5px 0px 5px;
	--heading-hint-distance:					65px;
	--heading-hint-margin:						0px calc(0px - var(--heading-hint-distance));;
	--nav-item-background-active-alpha:			0.5;
	--nav-item-background-active: 				hsla(var(--interactive-accent-hsl),var(--nav-item-background-active-alpha));	/* 左右侧栏选中状态背景色 */
	--viewheaderpull-blur:						50px;
	--viewheaderpull-length:					10px;
}

.theme-dark {
	/* dark theme */ 
	--background-primary: 						#202020;
	--background-primary-alt: 					#242424;
	--background-secondary: 					#282828;
	--background-secondary-alt:					#353535;
	--blockquote-color:							cyan;
	--blockquote-border-color:					var(--blockquote-color);
	--bold-color: 								#F8C280;
	--code-normal:								#F97979;
	--tab-text-color-focused-active-current:	#F7FF79;
	--fm-section-label:							#77A88D;
	--fm-section-data:							#777777;
	--graph-node-unresolved:					cyan;
	--h1-color: 								#D4DD00;
	--h2-color: 								#C983FF;
	--h3-color: 								#00CAF6;
	--h4-color: 								#38A886;
	--h5-color: 								#B9C1E0;
	--h6-color: 								#979Db3;
	--heading-shadow:							rgba(11,11,11,0.5);
	--hr-color: 								#666666;
	--guide-color:								255,255,255;
	--indentation-guide-color:					rgba(var(--guide-color),0.15);
	--indentation-guide-color-active:			rgba(var(--guide-color),0.5);
	--inline-title-color:						gray;
	--italic-color: 							#AC80FF;
	--text-highlight-bg:						#80761d;
	--highlight-base-color-h:					54;
	--highlight-base-color-s:					63%;
	--highlight-base-color-l:					31%;
	--text-strike-color:						gray;
	--table-border-color:						gray;
	--table-header-background:					#353535;
	--text-normal:								#C0C0C0;
	--viewheader-boxshadow:						rgba(10,10,10,0.5);
	--background-modifier-border:				#242424;								/* 左右侧栏分割线颜色 */
	--table-header-background-hover: 			var(--table-header-background);			/* 表头背景色hover */
	--viewheaderpull-color:						hsla(335, 100%, 49%, 0.5); 
	
}

.theme-light{
	/* light theme */
	--background-primary:						#FFFFFF;
	--background-primary-alt:					#F0F0F0;
	--background-secondary:						#F6F6F6;
	--background-secondary-alt:					#FCFCFC;
	--blockquote-color:							cyan;
	--blockquote-border-color:					var(--blockquote-color);
	--bold-color: 								#F97930;
	--code-normal:								#FF4979;
	--tab-text-color-focused-active-current:	#FF7668;
	--fm-section-label:							#77A88D;
	--fm-section-data:							#777777;
	--graph-node-unresolved:					red;
	--h1-color: 								brown;
	--h2-color: 								purple;
	--h3-color: 								blueviolet;
	--h4-color: 								green;
	--h5-color: 								#343434;
	--h6-color: 								#454545;
	--heading-shadow:							rgba(31,31,31,0.3);
	--hr-color:									#666666;
	--guide-color:								125,125,125;
	--indentation-guide-color:					rgba(var(--guide-color),0.15);
	--indentation-guide-color-active:			rgba(var(--guide-color),0.5);
	--inline-title-color:						gray;
	--italic-color: 							deeppink;
	--text-highlight-bg:						#509DFA;
	--highlight-base-color-h:					213;
	--highlight-base-color-s:					94%;
	--highlight-base-color-l:					65%;
	--text-strike-color:						gray;
	--text-normal:								#606060;
	--table-border-color:						#DDDDDD;
	--table-header-background:					#F6F6F6;
	--viewheader-boxshadow:						rgba(10,10,10,0.2);
	--background-modifier-border:				#E0E0E0;									/* 左右侧栏分割线颜色 */
	--table-header-background-hover: 			var(--table-header-background);				/* 表头背景色hover */
	--viewheaderpull-color:						hsla(244, 100%, 30%, 0.5);
}

/*////////////////////////////////////*/
/*////////////////////////////////////*/
/*////////////////////////////////////*/

:is(.workspace-tabs.mod-top.mod-top-left-space .nav-header) {
	text-align: center;
}
:is(.workspace-tabs.mod-top.mod-top-left-space .nav-header)::before{
	content: "☆ Welcome aboard ☆";
	position: relative;
	display: block;
	padding: 5px;
	margin: 5px;
	color: var(--interactive-accent);
	
}

/* 侧栏搜索结果 */
.tree-item-inner {
    color: var(--interactive-accent);
}

/* 笔记内inline-query结果 */
.internal-query {
    margin: 0;
    border: none;
}

/* 笔记顶部header阴影效果 */
/* 编辑模式下:关灯 */
/* 预览模式下:开灯 */
.view-header-title-container:not(.mod-at-end):after {
	background: none;
}
.is-focused .workspace-leaf.mod-active > div[data-mode="source"]
.view-header {	
	box-shadow: 0px -2px 10px 5px var(--viewheader-boxshadow);
}
/* 瀑布灯 */
.is-focused .workspace-leaf.mod-active > div[data-mode="preview"]
.view-header {
 	box-shadow: 0px -2px 10px 5px var(--viewheader-boxshadow), 0px 0px var(--viewheaderpull-blur) var(--viewheaderpull-length) var(--viewheaderpull-color); 
 	/* background-color: var(--viewheaderpull-color); */

}

/* Frontmatter label样式 */
.frontmatter-container {
	font-family: var(--font-monospace);
	line-height: 1.6em;
}
.frontmatter-container .frontmatter-section-label {
	color: var(--fm-section-label);
	flex-basis: 30%;
}
:is(.frontmatter-container .frontmatter-alias, .frontmatter-section-data) {
	color: var(--fm-section-data);
 	font-size: small;
}

/* 标题Heading阴影 */
span.cm-header.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6,
h1,h2,h3,h4,h5,h6 {
	filter: drop-shadow(0px 3px 3px var(--heading-shadow));
}

/* 定义Callout边框和背景色透明度 */
.callout {
	background-color: rgba(var(--callout-color), var(--callout-background-alpha));
	color: rgb(var(--callout-color));
}

/* 当前笔记左边框高亮 */
.workspace-tabs.mod-active.mod-stacked .workspace-tab-header.is-active.mod-active {
	border-left: 2px solid var(--tab-text-color-focused-active-current);
}

/* 删除线 */
del, .cm-strikethrough {
	color: var(--text-strike-color);
}

/* 高亮标记 */
span.cm-highlight.cm-highlight, 
.markdown-preview-view mark, 
.callout mark {
  --hlbasecolor: hsl(var(--highlight-base-color-h),var(--highlight-base-color-s),var(--highlight-base-color-l));
  --hlbasecolora1: hsla(var(--highlight-base-color-h),var(--highlight-base-color-s),var(--highlight-base-color-l), 0.1);
  --hlbasecolora2: hsla(var(--highlight-base-color-h),var(--highlight-base-color-s),var(--highlight-base-color-l), 0.3);
  color: var(--hlbasecolor);
  /* background: linear-gradient(hsla(0,0%,100%,0) 50%, hsla(var(--highlight-base-color-h),var(--highlight-base-color-s),var(--highlight-base-color-l), 0.1) 0); */
  background: var(--hlbasecolora1); 
  border-bottom: 1px solid var(--hlbasecolora2);
}

/* 预览模式 Tag 颜色 */
/* 自动反色计算参考了掘金文章 */
/* https://juejin.cn/post/6874958645952692238#heading-3 */
a.tag:hover {
  background-color: var(--interactive-accent);
  --contrastThreshold: 60%;
  --switch: calc((var(--accent-l) - var(--contrastThreshold)) * -100);
  color: hsl(0, 0%, var(--switch));
}

/* 表格头 */
.table-view-table > thead > tr > th {
  font-weight: 400;
  font-size: larger;
  border-bottom: 2px gray solid;
}

/* foot-note 角标 */
.footnote-link {
  font-size: smaller;
}

/* Heading 标题行前面显示级别提示 */

:is(.markdown-reading-view h1, .HyperMD-header-1.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H1";
  font-size: var(--heading-before-font-size);
  color: var(--h1-color);
}
:is(.markdown-reading-view h2, .HyperMD-header-2.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H2";
  font-size: var(--heading-before-font-size);
  color: var(--h2-color);
}
:is(.markdown-reading-view h3, .HyperMD-header-3.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H3";
  font-size: var(--heading-before-font-size);
  color: var(--h3-color);
}
:is(.markdown-reading-view h4, .HyperMD-header-4.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H4";
  font-size: var(--heading-before-font-size);
  color: var(--h4-color);
}
:is(.markdown-reading-view h5, .HyperMD-header-5.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H5";
  font-size: var(--heading-before-font-size);
  color: var(--h5-color);
}
:is(.markdown-reading-view h6, .HyperMD-header-6.cm-line)::before {
  position: absolute;
  margin: var(--heading-hint-margin);
  content:"H6";
  font-size: var(--heading-before-font-size);
  color: var(--h6-color);
}

/* 美化链接图标 */
/* 参考:https://www.yuque.com/fanmofeng/obsidian/wilqz3 */
/* 取消系统默认的图标 */
:is(.external-link, .markdown-source-view.mod-cm6 .cm-link .cm-underline, .markdown-source-view.mod-cm6 .cm-url .cm-underline){
  background-image: none;
  background-size: 0px;
  padding-right: 0px;
  background-position-y: 0px;
}
/* 外部链接 */
:is(.markdown-preview-view a.external-link, .cm-link:not(.cm-hmd-footnote) .cm-underline)::before {
  content: "";
  display: inline-block;
  transform: translateY(var(--size-2-1));
  width: calc(var(--font-text-size) - var(--size-4-1));
  height: calc(var(--font-text-size) - var(--size-4-1));
  margin-right: var(--size-4-1);
  margin-left: 2px;
  background-color: var(--link-external-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
}
/* 内部连接,未建立文件不显示before,有文件的才显示 */
/* mermaid 中的链接不显示before */

:not(.markdown-rendered .internal-link.is-unresolved, .cm-hmd-internal-link .is-unresolved .cm-underline, g[class="node default internal-link"] a[class="internal-link"]):is(.markdown-rendered .internal-link, .cm-hmd-internal-link .cm-underline)::before {
  content: "";
  display: inline-block;
  width: calc(var(--font-text-size) - var(--size-2-1) + 3px);
  height: calc(var(--font-text-size) - var(--size-2-1) + 3px);
  margin-right: var(--size-2-1);
  margin-left: 2px;
  margin-bottom: -2px;
  background-color: var(--link-color);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=""><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>');
}

/*////////////////////////////////////*/
/*///////////// 插件支持 //////////////*/
/*////////////////////////////////////*/

/* 插件 Image Captions */
figcaption[class="image-captions-caption"]{
  font-size: smaller;
  color: var(--text-normal);
  padding: 0px 0px;
  text-align: center;
}

/* Obsidian Memos */
.theme-dark .dialog-wrapper.showup,
.theme-light .dialog-wrapper.showup {
    background-color: rgba(35, 35, 35, 0.9);
}
.theme-dark .dialog-wrapper.memo-card-dialog > .dialog-container > .memo-card-container > .header-container > .btns-container > .btn,
.theme-light .dialog-wrapper.memo-card-dialog > .dialog-container > .memo-card-container > .header-container > .btns-container > .btn {
    background-color: transparent;
    padding: 4px;
    margin-right: 5px;
1 个赞

非常好的主题,感觉比主题市场里的都要好用 :+1:

作者您好,我是新来的用户,请问,怎么把主题替换啊