在官方给的主题上做了一些改动,符合我自己的审美,修改了内容宽度、代码颜色、标题样式、引用块颜色等等,在代码中也有一定的注释说明,希望能给找一个好看的主题的同学提供帮助。
[资源链接]https://download.csdn.net/download/qq_43002625/87938049
使用方式:将压缩包解压后【全部】复制到主题文件夹:C:\Users***\AppData\Roaming\Typora\themes
先放一下整体效果:
代码效果:
表格效果:
相关代码:
-
引用:
#write blockquote, .markdown-section blockquote { padding: 0.75rem 0.75rem; /*边框粗细*/ border-left: 4px solid #CCC; /*左竖条颜色*/ background: rgba(245, 245, 245, 0.5); color: rgba(34, 34, 34, 0.75); border-radius: 0 0.5em 0.5em 0;/*边框转角半径大小*/ transition: 1s; }
-
一级标题居中:
#write h1 *, .markdown-section h1 *{ text-align: center; }
-
文本宽度:自适应缩放至屏幕80%
#write, .markdown-section { max-width: 80%; padding-left: 2em; padding-right: 2em;
-
标题下方分割线:solid实线,dotted点线
#write h3 *, .markdown-section h3 * { border-bottom: 1px solid rgb(129, 143, 206); font-size: 1.5rem; }
-
代码颜色:在typora-docsify\codeblock.css中修改
:root { --code-background: #282a36; --code-current-line: #44475a; --code-section: #44475a; --code-foreground: #f8f8f2; --code-comment: #cfbc0c; --code-cyan: #8be9fd; --code-green: #50fa7b; --code-orange: #ffb86c; --code-pink: #ff79c6; --code-purple: #bd93f9; --code-red: #ff5555; --code-yellow: #f1fa8c; --code-math: #151320; } /** code highlight */ .cm-s-inner .cm-variable {/* 入参定义,亮绿色 */ color: var(--code-green) } .cm-s-inner .cm-operator {/* +=等操作符,粉色*/ color: var(--code-pink) } .cm-s-inner .cm-property { color: var(--code-foreground); } .cm-s-inner .cm-keyword {/* if、return等关键字粉色*/ color: var(--code-pink); } .cm-s-inner .cm-tag { color: var(--code-pink); } .cm-s-inner .cm-attribute { color: var(--code-green); } .CodeMirror div.CodeMirror-cursor { border-left: 1px solid var(--code-foreground); z-index: 3; } .cm-s-inner .cm-string, .cm-s-inner .cm-string-2 { color: var(--code-yellow); } .cm-s-inner .cm-comment, .cm-s-inner.cm-comment { /*注释绿色*/ color: var(--code-comment); } .cm-s-inner .cm-header, .cm-s-inner.cm-header, .cm-s-inner .cm-def, .cm-s-inner.cm-def { /* 函数定义,黄色 */ color: var(--code-yellow); } .cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: #57ac57; } .cm-s-inner .cm-hr { color: #d8d5d5; } .cm-s-inner .cm-link { color: #d3d3ef; } .cm-s-inner .cm-negative { color: #d95050; } .cm-s-inner .cm-positive { color: #50e650; } .cm-s-inner .cm-meta{/* 头文件、宏定义一整行 绿色*/ color: var(--code-green); } .cm-s-inner .cm-qualifier { color: var(--code-green); } .cm-s-inner .cm-builtin { color: var(--code-green); } .cm-s-inner .cm-bracket { color: var(--code-foreground); } .cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: var(--code-cyan);/* 原子 true、false 蓝绿色*/ } .cm-s-inner .cm-number { color: var(--code-purple);/*数字,紫色*/ } .cm-s-inner .cm-variable { color: var(--code-foreground); } .cm-s-inner .cm-variable-2 { color: var(--code-foreground); } .cm-s-inner .cm-variable-3 {/*返回值、变量类型,int、void等,蓝绿色*/ color: var(--code-cyan); font-style: italic; } .CodeMirror-selectedtext, .CodeMirror-selected { background: var(--code-current-line); color: #fff !important; text-shadow: none; }
改了挺久的,待更新。