主题召集 #426

YangFong · 2024-08-29T06:13:50Z

YangFong
Aug 29, 2024
Maintainer

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

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

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

Aug 29, 2024

可以直接在该 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 {
}

View full answer

YangFong · 2024-08-29T06:14:22Z

YangFong
Aug 29, 2024
Maintainer Author

可以直接在该 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 {
}

0 replies

mybolide · 2024-09-12T10:36:58Z

mybolide
Sep 12, 2024

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

0 replies

YangFong · 2024-09-14T00:57:52Z

YangFong
Sep 14, 2024
Maintainer Author

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

0 replies

DigitalNomad-Chat · 2024-12-05T03:19:59Z

DigitalNomad-Chat
Dec 5, 2024

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

1 reply

yanglbme Dec 9, 2024
Maintainer

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

YangFong · 2024-12-05T03:25:04Z

YangFong
Dec 5, 2024
Maintainer Author

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

0 replies

pod2gR · 2024-12-25T01:55:39Z

pod2gR
Dec 25, 2024

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

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

0 replies

okooo5km · 2025-02-26T03:52:28Z

okooo5km
Feb 26, 2025

自用主题 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);
}

2 replies

YangFong Feb 26, 2025
Maintainer Author

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

okooo5km Feb 26, 2025

好的呢😉

YiDingg · 2025-02-27T12:40:48Z

YiDingg
Feb 27, 2025

在 @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 {
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

主题召集 #426

{{title}}

Replies: 8 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

主题召集 #426

YangFong Aug 29, 2024 Maintainer

Replies: 8 comments · 3 replies

YangFong Aug 29, 2024 Maintainer Author

mybolide Sep 12, 2024

YangFong Sep 14, 2024 Maintainer Author

DigitalNomad-Chat Dec 5, 2024

yanglbme Dec 9, 2024 Maintainer

YangFong Dec 5, 2024 Maintainer Author

pod2gR Dec 25, 2024

okooo5km Feb 26, 2025

YangFong Feb 26, 2025 Maintainer Author

okooo5km Feb 26, 2025

YiDingg Feb 27, 2025

YangFong
Aug 29, 2024
Maintainer

Replies: 8 comments 3 replies

YangFong
Aug 29, 2024
Maintainer Author

mybolide
Sep 12, 2024

YangFong
Sep 14, 2024
Maintainer Author

DigitalNomad-Chat
Dec 5, 2024

yanglbme Dec 9, 2024
Maintainer

YangFong
Dec 5, 2024
Maintainer Author

pod2gR
Dec 25, 2024

okooo5km
Feb 26, 2025

YangFong Feb 26, 2025
Maintainer Author

YiDingg
Feb 27, 2025