主题召集

[YangFong]

我们最近新加入了一个功能：主题。也就是样式预设，使用者可以通过选择，快速切换一套方案。

当前，除了以往的「经典」主题之外，我们已加入了一套「优雅」主题，它的样式风格，能够吸引不少人的眼光。

现在，我们公开召集主题样式，使用者们可以分享自己的主题，对于其中有特色的主题，我们会将其作为一套预设方案，提供给所有人选择，如：

[YangFong]

可以直接在该 issue 下留言分享，将「自定义CSS」中的内容发出，比如我这套「红红火火」：

/*
  按Ctrl/Command+F可格式化
*/
/* 一级标题样式 */
h1 {
  color: red;
}
/* 二级标题样式 */
h2 {
 color: red; 
}
/* 三级标题样式 */
h3 {
  color: red;
}
/* 四级标题样式 */
h4 {
  color: red;
}
/* 图片样式 */
image {
}
/* 引用样式 */
blockquote {
}
/* 引用段落样式 */
blockquote_p {
}
/* 段落样式 */
p {
}
/* 分割线样式 */
hr {
}
/* 行内代码样式 */
codespan {
}
/* 粗体样式 */
strong {
}
/* 链接样式 */
link {
}
/* 微信链接样式 */
wx_link {
}
/* 有序列表样式 */
ol {
}
/* 无序列表样式 */
ul {
}
/* 列表项样式 */
li {
}
/* 代码块样式 */
code {
}

[mybolide]

似乎有点问题，code代码在pre里，pre标签的样式无法覆盖，是否可以添加对pre样式修改的支持

[YangFong]

@mybolide 这是一个疏漏，我已进行了调整，可见 #403

[DigitalNomad-Chat]

为什么我刚通过 docker run -d -p 8080:80 doocs/md:latest 部署的项目版本，没有主题这个功能呢？

[yanglbme]

@DigitalNomad-Chat 镜像已更新，可以重新拉一下

[YangFong]

@DigitalNomad-Chat Docker 版本不是最新版本。在上一个版本之后，更新较多，当前还未稳定下来，所以当前没有去更新 Docker。

[pod2gR]

默认的“优雅”主题挺好用，但是二级标题有点太扎眼了，我的自定义方案稍微改了下：

h2 {
color: var(--md-primary-color);
background: transparent !important;
box-shadow: none !important;
}

[okooo5km]

自用主题 Simple （简洁）

/**
 * 按 Alt/Option + Shift + F 可格式化
 * 如需使用主题色，请使用 var(--md-primary-color) 代替颜色值
 * 如：color: var(--md-primary-color);
 *
 * 召集令：如果你有好看的主题样式，欢迎分享，让更多人能够使用到你的主题。
 * 提交区：https://github.com/doocs/md/discussions/426
 */
/* 顶层容器样式 */
container {
  text-align: left;
  line-height: 1.75;
}
/* 一级标题样式 */
h1 {
  display: table;
  padding: 0.5em 1em;
  border-bottom: 2px solid var(--md-primary-color);
  margin: 2em auto 1em;
  color: hsl(var(--foreground));
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.05);
}
/* 二级标题样式 */
h2 {
  display: table;
  padding: 0.3em 1.2em;
  margin: 4em auto 2em;
  color: #fff;
  background: var(--md-primary-color);
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  border-radius: 8px 24px 8px 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
/* 三级标题样式 */
h3 {
  padding-left: 12px;
  font-size: 1.2em;
  border-radius: 6px;
  line-height: 2.4em;
  border-left: 4px solid var(--md-primary-color);
  border-right: 1px solid color-mix(in srgb, var(--md-primary-color) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--md-primary-color) 10%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--md-primary-color) 10%, transparent);
  background: color-mix(in srgb, var(--md-primary-color) 8%, transparent);
  color: var(--md-primary-color);
  margin: 2em 8px 0.75em 0;
  font-weight: bold;
}
/* 四级标题样式 */
h4 {
  margin: 2em 8px 0.5em;
  color: var(--md-primary-color);
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 6px;
}
/* 五级标题样式 */
h5 {
  margin: 1.5em 8px 0.5em;
  color: var(--md-primary-color);
  font-size: 1em;
  font-weight: bold;
  border-radius: 6px;
}
/* 六级标题样式 */
h6 {
  margin: 1.5em 8px 0.5em;
  font-size: 1em;
  color: var(--md-primary-color);
  border-radius: 6px;
}
/* 图片样式 */
image {
  display: block;
  width: 100% !important;
  margin: 0.1em auto 0.5em;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
/* 引用样式 */
blockquote {
  font-style: italic;
  padding: 1em 1em 1em 2em;
  border-left: 4px solid var(--md-primary-color);
  border-radius: 6px;
  color: rgba(0,0,0,0.6);
  background: var(--blockquote-background);
  margin-bottom: 1em;
  border-bottom: 0.2px solid rgba(0, 0, 0, 0.04);
  border-top: 0.2px solid rgba(0, 0, 0, 0.04);
  border-right: 0.2px solid rgba(0, 0, 0, 0.04);
}
/* 引用段落样式 */
blockquote_p {
  display: block;
  font-size: 1em;
  letter-spacing: 0.1em;
  color: hsl(var(--foreground));
}
/* GFM note 样式 */
blockquote_note {
  font-style: italic;
}
/* GFM tip 样式 */
blockquote_tip {
  font-style: italic;
}
/* GFM important 样式 */
blockquote_important {
  font-style: italic;
}
/* GFM warning 样式 */
blockquote_warning {
  font-style: italic;
}
/* GFM caution 样式 */
blockquote_caution {
  font-style: italic;
}
/* GFM 通用标题 */
blockquote_title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
}
/* GFM note 标题 */
blockquote_title_note {
  color: #478be6;
}
/* GFM tip 标题 */
blockquote_title_tip {
  color: #57ab5a;
}
/* GFM important 标题 */
blockquote_title_important {
  color: #986ee2;
}
/* GFM warning 标题 */
blockquote_title_warning {
  color: #c69026;
}
/* GFM caution 标题 */
blockquote_title_caution {
  color: #e5534b;
}
/* GFM note 段落样式 */
blockquote_p_note {
}
/* GFM tip 段落样式 */
blockquote_p_tip {
}
/* GFM important 段落样式 */
blockquote_p_important {
}
/* GFM warning 段落样式 */
blockquote_p_warning {
}
/* GFM caution 段落样式 */
blockquote_p_caution {
}
/* 段落样式 */
p {
  margin: 1.5em 8px;
  letter-spacing: 0.1em;
  color: hsl(var(--foreground));
  text-align: justify;
}
/* 分割线样式 */
hr {
  height: 1px;
  border: none;
  margin: 2em 0;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
}
/* 行内代码样式 */
codespan {
  font-size: 90%;
  color: #d14;
  background: rgba(27,31,35,.05);
  padding: 3px 5px;
  border-radius: 4px;
}
/* 粗体样式 */
strong {
  color: var(--md-primary-color);
  font-weight: bold;
  font-size: inherit;
}
/* 链接样式 */
link {
  color: #576b95;
}
/* 微信链接样式 */
wx_link {
  color: #576b95;
  text-decoration: none;
}
/* 有序列表样式 */
ol {
  padding-left: 1.5em;
  margin-left: 0;
  color: hsl(var(--foreground));
}
/* 无序列表样式 */
ul {
  list-style: none;
  padding-left: 1.5em;
  margin-left: 0;
  color: hsl(var(--foreground));
}
/* 列表项样式 */
li {
  text-indent: -1em;
  display: block;
  margin: 0.5em 8px;
  color: hsl(var(--foreground));
}
/* 代码块样式 */
code {
  margin: 0;
  white-space: pre-wrap;
  font-family: 'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace;
}
/* 代码块外层样式 */
code_pre {
  font-size: 14px;
  overflow-x: auto;
  border-radius: 8px;
  padding: 1em;
  line-height: 1.5;
  margin: 10px 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

[YangFong]

很有特色，我准备进行微调之后，将其作为内置主题存在，你看如何

[okooo5km]

好的呢😉

[chen-bingzhi]

学习了

[YiDingg]

在 @okooo5km 代码的基础上，修改了部分间距与字号，使排版更紧凑，观感有一定提升，主题颜色为 rgba(107, 97, 235, 1)。

PC 端预览：

手机端预览：

/*自定义样式，实时生效*/

/*自定义样式，实时生效*/

/* 全局属性
 * 页边距 padding:10px;
 * 全文字体 font-family:ptima-Regular;
 * 英文换行 word-break:break-all;
 */
#nice {
  font-family:PingFangSC-Light;
}

/* 段落，下方未标注标签参数均同此处
 * 上边距 margin-top:5px;
 * 下边距 margin-bottom:5px;
 * 行高 line-height:26px;
 * 词间距 word-spacing:3px;
 * 字间距 letter-spacing:3px;
 * 对齐 text-align:left;
 * 颜色 color:#ffffff;
 * 字体大小 font-size:5px;
 * 首行缩进 text-indent:2em;
 */
#nice p {
  margin:0px 0px;
  line-height:1.5;
  letter-spacing:0.2em;
  font-size: 12px;
  word-spacing:0.1em;
}

/* 一级标题 */
#nice h1 {
  border-bottom: 2px solid #0e88eb;
  font-size: 1em;
  text-align: center;
}

/* 一级标题内容 */
#nice h1 .content {
  font-size: 1em;
  display:inline-block;
  font-weight: bold;
  //background: #0e88eb;
  color:#ffffff;
  color: #0e88eb;
  padding:3px 10px 1px;
  border-top-right-radius:3px;
  border-top-left-radius:3px;
  margin-right:3px;
}

/* 一级标题修饰 请参考有实例的主题 */
#nice h1:after {
}
 
/* 二级标题 */
#nice h2 {
  text-align:left;
  margin:20px 10px 0px 0px;
}

/* 二级标题内容 */
#nice h2 .content {
  font-family:STHeitiSC-Light;
  font-size: 14px;
  color:#0e88eb;
  font-weight:bolder;
  display:inline-block;
  padding-left:10px;
  border-left:5px solid #0e88eb;
}

/* 二级标题修饰 请参考有实例的主题 */
#nice h2:after {
}

/* 三级标题 */
#nice h3 {
    font-size: 18px;
     color: #0e88eb;
}

/* 三级标题内容 */
#nice h3 .content {
  font-size: 13px;
  color: #0e88eb;
}

/* 三级标题修饰 请参考有实例的主题 */
#nice h3:after {
}

/* 无序列表整体样式
 * list-style-type: square|circle|disc;
 */
#nice ul {
}

/* 有序列表整体样式
 * list-style-type: upper-roman|lower-greek|lower-alpha;
 */
#nice ol {
}

/* 列表内容，不要设置li
 */
#nice li section {
  font-size: 11px;
}

/* 引用
 * 左边缘颜色 border-left-color:black;
 * 背景色 background:gray;
 */
#nice blockquote {
  font-style:normal;
  border-left:none;
  padding:10px;
  position:relative;
  line-height:1.8;
  border-radius:0px 0px 10px 10px;
  color: #0e88eb;
  background:#fff;
  box-shadow:#84A1A8 0px 10px 15px;
}
#nice blockquote:before {
 % content:"★  ";
  display:inline;
  color: #0e88eb;
  font-size:1.2em;
  font-family:Arial,serif;
  line-height:0em;
  font-weight:700;
}

/* 引用文字 */
#nice blockquote p {
  color: #0e88eb;
  font-size:12px;
  display:inline;
}
#nice blockquote:after {
  %content:"”";
  float:right;
  display:inline;
  color:#0e88eb;
  font-size:1.2em;
  line-height:1em;
  font-weight:500;
}

/* 链接 
 * border-bottom: 1px solid #009688;
 */
#nice a {
  color: #0e88eb;
  border-bottom: 0px solid #ff3502;
  font-family:STHeitiSC-Light;
}

/* 加粗 */
#nice strong {
  font-weight: border;
  color: #0e88eb;
}

/* 斜体 */
#nice em {
  color: #555555;
  letter-spacing:0.0em;
}

/* 加粗斜体 */
#nice em strong {
  color: #0e88fa;
  letter-spacing:0.3em;
}

/* 删除线 */
#nice del {
}
 
/* 分隔线
 * 粗细、样式和颜色
 * border-top:1px solid #3e3e3e;
 */
#nice hr {
  height:1px;
  padding:0;
  border:none;
  border-top:medium solidid #333;
  text-align:center;
  background-image:linear-gradient(to right,rgba(248,57,41,0),#0e88eb,rgba(248,57,41,0));
}

/* 图片
 * 宽度 width:80%;
 * 居中 margin:0 auto;
 * 居左 margin:0 0;
 */
#nice img {
  border-radius:0px 0px 5px 5px;
  display:block;
  margin:20px auto;
  width:85%;
  height:100%;
  object-fit:contain;
  box-shadow:#84A1A8 0px 10px 15px;
}

/* 图片描述文字 */
#nice figcaption {
  display:block;
  font-size:12px;
  font-family:PingFangSC-Light;
}

/* 行内代码 */
#nice p code, #nice li code {
  color:/*自定义样式，实时生效*/
}

/* 非微信代码块
 * 代码块不换行 display:-webkit-box !important;
 * 代码块换行 display:block;
 */
#nice pre code {
}

/*
 * 表格内的单元格
 * 字体大小 font-size: 16px;
 * 边框 border: 1px solid #ccc;
 * 内边距 padding: 5px 10px;
 */
#nice table tr th,
#nice table tr td {
  font-size: 15px;
}

/* 脚注文字 */
#nice .footnote-word {
  color: #2d59b3;
}

/* 脚注上标 */
#nice .footnote-ref {
  color: #6a88c5;
}

/* 非微信代码块
 * 代码块不换行 display:-webkit-box !important;
 * 代码块换行 display:block;
 */
#nice pre code {
}

/* 脚注文字 */
#nice .footnote-word {
  color: #0e88eb;
}

/* 脚注上标 */
#nice .footnote-ref {
  color: #0e88eb;
}

/*脚注链接样式*/
#nice .footnote-item em {
  color: #082a71;
  font-size:12px;
}

/* "参考资料"四个字 
 * 内容 content: "参考资料";
 */
#nice .footnotes-sep:before {
}

/* 参考资料编号 */
#nice .footnote-num {
}

/* 参考资料文字 */
#nice .footnote-item p { 
}

/* 参考资料解释 */
#nice .footnote-item p em {
}

/* 行间公式
 * 最大宽度 max-width: 300% !important;
 */
#nice .block-equation svg {
  width:60%;
  height:100%;
}

/* 行内公式
 */
#nice .inline-equation svg {
}

[hello-qu]

开发者你好，我在自定义CSS 中 没有看到 斜体的 CSS自定义em {} 似乎不生效 ？

[YangFong]

开发者你好，我在自定义CSS 中 没有看到 斜体的 CSS自定义em {} 似乎不生效 ？

这确实是个 Bug，当 #654 关闭时，修复便完成了。

[dabing1022]

要是有能够在线直接预览的模块就好了 以ugc的形式用户提交上去 其他人可以直接预览 使用