主题分享区

[caol64]

分享你的自定义主题、也可以是typora主题。形式可以是提交pr、项目链接、或者直接贴出css。

采纳的主题会在该页面展示以供大家下载。

[zw-95]

参考 markdown在线编辑器 墨黑、姹紫、嫩青、红绯、兰青、山吹、全栈蓝(优化代码和表格样式）(点击颜色查看预览图)，字体使用个人偏好字体。

theme.zip

[caol64]

good job!

[caol64]

感谢 @zw-95 带来的多个自定义主题，也感谢主题原作者。

• mdnice姹紫
• mdnice墨黑
• mdnice嫩青
• mdnice红绯
• mdnice兰青
• mdnice山吹
• mdnice全栈蓝

[caol64]

markdown在线编辑器 全栈蓝主题。

https://gist.github.com/caol64/a2d1d9d766824982c34fb3dc33e24cfd

[caol64]

@sumruler 提供的思源笔记主题

https://gist.github.com/caol64/d05dd66d0af5dad8856521a0f0965dd8

预览

[sumruler]

也不能说是思源笔记主题，只是用了思源笔记写味主题的标题后缀，可以看我制作的typora主题github.com/sumruler/typora-theme-phycat

[caol64]

这个物理猫主题很漂亮，我想整合进文颜作为内置主题。@sumruler

[sumruler]

这个物理猫主题很漂亮，我想整合进文颜作为内置主题。@sumruler

可以的

[geyingguo]

有没有支持代码块Mac风格的主题？

[caol64]

以后会加上

[jkshhh]

点击查看CSS代码，漫画风格的视觉元素（黑框、硬阴影、高亮色）

:root {
  /* 保留你提供的字体栈 */
  --sans-serif-font: -apple-system, BlinkMacSystemFont, "Comic Sans MS", "Chalkboard SE", Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  --monospace-font: ui-monospace, SFMono-Regular, "Courier New", monospace;
  
  /* 漫画风格配色变量 */
  --comic-bg: #fdfdfd;          /* 背景纸色 */
  --comic-border: 2px solid #000; /* 漫画描边 */
  --comic-shadow: 4px 4px 0px #000; /* 硬阴影 */
  --accent-yellow: #ffec3d;     /* 强调色：旁白/高亮 */
  --accent-blue: #d6e4ff;       /* 强调色：引用/气泡 */
  --accent-dark: #222;          /* 代码块背景 */
  --text-main: #000;
}

#wenyan {
  font-family: var(--sans-serif-font);
  font-size: 16px;
  color: var(--text-main);
  background-color: var(--comic-bg);
  padding: 20px;
  line-height: 1.7;
}

#wenyan * {
  box-sizing: border-box;
}

/* --- 标题系统：漫画标题框风格 --- */
#wenyan h1 {
  margin: 1.5em 0 1.2em;
  padding: 15px;
  font-weight: 900;
  text-align: center;
  background: #fff;
  border: var(--comic-border);
  box-shadow: var(--comic-shadow);
  transform: rotate(-1deg); /* 微微倾斜，增加动感 */
  text-transform: uppercase;
}

#wenyan h2 {
  font-weight: bold;
  font-size: 1.4em;
  margin: 1.5em 0 1em;
  padding: 5px 10px;
  border-left: 8px solid #000;
  border-bottom: 2px solid #000;
  background: linear-gradient(90deg, #fff0 0%, #fff0 100%);
  display: block;
}

#wenyan h3 {
  font-weight: bold;
  margin: 1.2em 0 0.8em;
  text-decoration: underline wavy var(--accent-yellow); 
}

/* --- 正文与强调 --- */
#wenyan p {
  margin: 1em 0;
  word-spacing: 2px;
}

#wenyan p strong {
  background: #000;
  color: #fff;
  padding: 0 4px;
  border-radius: 2px;
}

/* --- 列表 --- */
#wenyan ul, #wenyan ol {
  padding-left: 2em;
}
#wenyan li {
  margin: 8px 0;
}

/* --- 图片：分镜卡片感 --- */
#wenyan img {
  display: block;
  max-width: 100%;
  margin: 20px auto;
  border: var(--comic-border);
  box-shadow: var(--comic-shadow);
  background: #fff;
  padding: 5px; /* 图片留白 */
}

/* --- 引用：对话气泡风格 --- */
#wenyan blockquote {
  margin: 20px 10px;
  padding: 15px 20px;
  background-color: var(--accent-blue);
  border: var(--comic-border);
  border-radius: 15px; /* 圆角气泡 */
  position: relative;
  color: #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
/* 气泡的小尾巴装饰 (可选，如果不兼容可删去) */
#wenyan blockquote::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 30px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #000 transparent;
  display: block;
  width: 0;
}
#wenyan blockquote::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 33px;
  border-width: 7px 7px 0;
  border-style: solid;
  border-color: var(--accent-blue) transparent;
  display: block;
  width: 0;
  z-index: 1;
}

/* --- 代码块：复古终端风格 --- */
#wenyan pre {
  margin: 20px 0;
  background: var(--accent-dark);
  border: var(--comic-border);
  border-radius: 4px;
  box-shadow: var(--comic-shadow);
  position: relative;
  padding-top: 30px; /* 给顶部按钮留空 */
}
/* 模拟终端窗口的三个小点 */
#wenyan pre::before {
  content: "•••"; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background: #333;
  color: #fff;
  font-size: 20px;
  line-height: 15px;
  padding-left: 10px;
  letter-spacing: 2px;
  border-bottom: 1px solid #555;
}

#wenyan pre code {
  color: #0f0; /* 黑客绿 */
  font-family: var(--monospace-font);
  font-size: 14px;
  padding: 10px 15px;
  line-height: 1.5;
  display: block;
  overflow-x: auto;
}

/* --- 行内代码 --- */
#wenyan p code {
  font-family: var(--monospace-font);
  background: var(--accent-red, #ffccc7); /* 浅红底 */
  border: 1px solid #000;
  padding: 2px 5px;
  margin: 0 3px;
  border-radius: 3px;
  font-size: 0.9em;
  color: #000;
}

/* --- 表格 --- */
#wenyan table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  border: var(--comic-border);
}
#wenyan table th {
  background: #000;
  color: #fff;
  padding: 10px;
  border: 1px solid #fff;
}
#wenyan table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}
#wenyan table tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* --- 分割线 --- */
#wenyan hr {
  border: 0;
  height: 3px;
  background: #000;
  margin: 40px 0;
}
/

[caol64]

感谢

[caol64]

https://wenyan.yuzhi.tech/web

可以在线调试新主题了。顺便问一下，你这个主题有名字吗？

[app29]

感谢

漫画分镜风格

[Moonofweisheng]

vibecoding 了 2 个主题。一个是复刻的掘金 lilsnake 主题，一个是手绘贴纸风主题。

[caol64]

给你和AI点赞