css分享: goodnotes同款点线纸笔记背景

经验分享
1

效果如下：

image
image1909×1277 96.7 KB

代码如下，可以自行更改颜色细节

/* from blue-topaz */
.theme-dark {
  --bg-color-notebook: #2a2825;
  --grid-notebook-line-color-1: #2a2825;
  --grid-notebook-line-color-2: #2a2825;
  --dotted-notebook-dot-color: #c7c7c71f;
}
.theme-light {
  --bg-color-notebook: #faf9deaf;
  --grid-notebook-line-color-1: #b5f3a600;
  --grid-notebook-line-color-2: #b5f3a600;
  --dotted-notebook-dot-color: #c9cfc880;
}

/* notebook background */
.markdown-reading-view .markdown-rendered, .markdown-source-view.mod-cm6 .cm-scroller {
  background: var(--bg-color-notebook);
  background-image:
  radial-gradient(var(--dotted-notebook-dot-color) 1px, transparent 0),
  linear-gradient(90deg, var(--grid-notebook-line-color-2) 1px,transparent 0),
  linear-gradient(var(--grid-notebook-line-color-1) 1px, transparent 0),
  linear-gradient(90deg,var(--grid-notebook-line-color-1) 1px, transparent 0);
  background-size: 15px 15px, 75px 75px, 15px 15px, 15px 15px;
}
.markdown-reading-view .markdown-rendered, .markdown-source-view.mod-cm6 .cm-scroller {
  background-attachment: local !important;
}
2 个赞
2

好背景，:kr:了，一直想加个背景，没找到合适黑暗模式的