Zotero 笔记主题 —— 仿 drake-juejin
一、前言
最近在用 Zotero 做笔记的时候感觉笔记的主题实在是太丑了，所以就打算换一个主题。然后我找到了一个网站，Zotero笔记css，里面也有一些主题，但是我都不太满意。我的 Typora 用的主题是 drake-juejin 。所以我就把这个网站上的一个主题的代码下载下来进行修改，成品代码我放在本文的最后面。
注意事项：
- 本人没学过前端，代码是靠 AI 生成的，所以如果代码有什么问题的话我估计也解决不了😂
- 表格那一块很奇怪，就是不设置单元格的背景颜色的时候内部边框是可以显示出来的，但是设置了单元格的背景颜色之后，内部边框就显示不出来了，我搞了好久才弄出来单元格的左右边框，但是上下边框依然不显示，但是我设置的单元格背景颜色是奇偶行交替的颜色，也能用，所以我就不再管了。
二、成品效果图
三、设置笔记主题的方法
第一步： 设置 -> 高级 -> 设置编译器
第二步：点击接受风险并继续
第三步：在搜索框中输入 note.css , 点击编辑按钮
第四步：把 css 代码直接复制到输入框中，点击确认，主题就生效了
四、主题代码
/* 1. 全局字体大小设置（作用于整个文档） */
html {
font-size: 32px !important; /* 根元素字体大小，作为全局基准 */
}
body {
font-size: 1rem !important; /* 继承根元素字体大小（1rem = html的font-size） */
/*font-family: Arial, sans-serif !important;*/ /* 可选：设置全局字体族 */
}
/* 1. 最高优先级全局字体设置（覆盖所有元素） */
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
font-size: 16px !important; /* 强制所有元素默认16px */
/*font-family: inherit !important;*/ /* 统一字体族 */
}
/*超链接*/
a,
a:visited {
/* 普通状态和访问过的链接 */
color: #135ce0;
/* 基准蓝色 */
text-decoration: underline;
/* 下划线 */
}
a:hover,
a:focus {
/* 鼠标悬停和聚焦状态 */
color: rgba(19, 92, 224, 0.8);
/* 更深的蓝色（基于基准色调整） */
}
blockquote:hover {
color: #495057;
background: #f8f9fa;
box-shadow: rgb(0 0 0 / 4%) 0px 3px 5px;
position: relative;
margin: 14px 0;
border: 3px solid #135ce0 !important;
transform: translateY(4px);
}
blockquote {
color: #495057;
background: #f8f9fa;
box-shadow: rgb(0 0 0 / 4%) 0px 3px 5px;
margin: 14px 0;
border: 2px solid #96b9f0 !important; /* 基准蓝色的浅色调边框 */
border-radius: 8px;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.46, 0.95);
}
/* 改间距 */
blockquote p {
margin: 10px;
padding-top: 0px;
}
/* 加粗样式 */
strong {
/*background-color: rgba(190, 186, 186, 0.2);*/
color: #135ce0;
font-weight: bold;
font-size: 1.05em;
}
.primary-editor h1 {
font-size: 2em;
color: #135ce0;
font-weight: 700;
text-align: center;
}
/* 标题样式 */
.primary-editor h2 {
font-size: 1.8em;
font-weight: bolder;
color: #135ce0;
}
.primary-editor h3 {
font-size: 1.4em;
color: #135ce0;
}
.primary-editor h4,
.primary-editor h5,
.primary-editor h6 {
font-size: 1em;
color: #135ce0;
}
/* 列表设计 */
ul {
list-style-type: disc;
}
.primary-editor ul li::marker {
color: #96b9f0 ;
}
.primary-editor ul li:not(ul ul li)::marker {
color: #135ce0 ;
font-size: 16px;
}
ul,
ol {
font-weight: bolder;
}
ul ul,
ol ol {
font-weight: normal;
font-size: 14px;
}
ul li:not(ul ul li):not(ul li:first-child) {
border-top: #6893d3 2px solid;
margin-top: 20px;
padding-top: 15px;
}
ul li:not(ul ul li):not(ul li:first-child):hover {
border-top: #0a3d91 4px solid;
transform-style: smooth;
transition-duration: 100ms;
}
/* 1. 基础表格设置（核心优化：边框合并+精确计算） */
.primary-editor .tableWrapper table {
border-collapse: collapse !important;
border-spacing: 0 !important;
width: 100% !important;
border: #135ce0 2px solid !important; /* 外层边框兜底 */
}
/* 2. 清除默认样式（更彻底的重置） */
.primary-editor .tableWrapper table tr,
.primary-editor .tableWrapper table td {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important; /* 清除可能的阴影干扰 */
}
/* 3. 全局单元格基础样式（优化内边距和定位） */
.primary-editor .tableWrapper table td {
text-align: center !important;
vertical-align: middle !important;
padding: 10px 12px !important; /* 增加内边距，避免内容贴边框 */
position: relative !important;
min-width: 20% !important; /* 确保列宽均匀 */
}
/* 4. 列间边框（伪元素优化版） */
.primary-editor .tableWrapper table td::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
right: 0 !important; /* 调整位置至单元格右侧边缘 */
height: 100% !important;
width: 2px !important;
background-color: #135ce0 !important;
z-index: 1 !important;
transform: translateX(0) !important; /* 消除定位偏移 */
}
/* 修复最后一列多余边框 */
.primary-editor .tableWrapper table td:last-child::after {
display: none !important;
}
/* 第一列左侧边框（补充最左边缘） */
.primary-editor .tableWrapper table td:first-child {
border-left: #135ce0 3px solid !important;
}
/* 5. 第一行样式（强化边框层次） */
.primary-editor .tableWrapper table tr:first-child td {
text-align: center !important;
font-weight: bolder !important;
color: #135ce0 !important;
vertical-align: middle !important;
border-top: #135ce0 3px solid !important;
border-bottom: #135ce0 3px solid !important;
background-color: #f0f7ff !important; /* 表头背景稍深，区分奇偶行 */
}
/* 第一行伪元素强化（避免被覆盖） */
.primary-editor .tableWrapper table tr:first-child td::after {
background-color: #135ce0 !important;
width: 2px !important;
}
/* 6. 内容行上下边框（优化粗细过渡） */
.primary-editor .tableWrapper table tr:not(:first-child) td {
border-top: #135ce0 3px solid !important;
border-bottom: #135ce0 3px solid !important;
}
/* 修复行边框与列边框衔接 */
.primary-editor .tableWrapper table tr:not(:first-child) td::after {
top: 1px !important; /* 避开顶部1px行边框 */
height: calc(100% - 2px) !important; /* 避开上下行边框 */
}
/* 7. 最后一行边框强化（与表头呼应） */
.primary-editor .tableWrapper table tr:last-child td {
border-bottom: #135ce0 3px solid !important;
}
/* 最后一行伪元素高度调整 */
.primary-editor .tableWrapper table tr:last-child td::after {
height: calc(100% - 1px) !important; /* 适配底部3px边框 */
}
/* 8. 奇偶行背景（优化对比度，避免掩盖边框） */
.primary-editor .tableWrapper table tr:nth-child(even) td {
background-color: #ffffff !important;
}
.primary-editor .tableWrapper table tr:nth-child(odd) td {
background-color: #f5f9ff !important; /* 稍深一点的浅蓝色，增强与边框对比 */
}
/* 9. 悬停效果（优化边框反馈） */
.primary-editor .tableWrapper table tr td:hover {
background-color: #e6f0ff !important;
}
.primary-editor .tableWrapper table tr td:hover::after {
background-color: #0a4ba0 !important; /* 悬停时列边框加深 */
}
/*添加了一个浅灰色的方格网格背景*/
/* From Uiverse.io by kennyotsu-monochromia */
#editor-container .editor .editor-core {
width: 100%;
height: 100%;
--color: #E1E1E1;
background-color: #F3F3F3;
background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
background-size: 55px 55px;
}
#editor-container
> div
> div.editor-core
> div.ProseMirror.primary-editor
math-inline
> span.math-render
> span
> span.katex-html {
scrollbar-width: thin;
scrollbar-color: rgba(19, 92, 224, 0.7) rgba(232, 235, 229, 0.4); /* 设定滚动条滑块和轨道颜色 */
color: #451717;
font-family: "Times New Roman", serif;
background-color: #f0f0f0;
display: inline-block;
overflow-x: auto;
white-space: nowrap;
max-width: 90vw;
padding: 20px 15px;
}
#editor-container > div > div.editor-core{
scrollbar-width: thin;
scrollbar-color: rgba(19, 92, 224, 0.7) rgba(232, 235, 229, 0.4); /* 设定滚动条滑块和轨道颜色 */
}
/*字体设置*/
/*#editor-container > div > div.editor-core > div.ProseMirror.primary-editor {
font-family: 'HYZhengYuan', serif;
}
#editor-container > div > div.editor-core > div.ProseMirror.primary-editor *:lang(en) {
font-family: 'Iosevka Curly', serif;
}*/
/*代码块设置*/
pre, pre code {
background-color: #2b2b2b!important; /* 对应 var(--code-block-bg-color) */
color: #f8f8f2!important; /* 对应 var(--code-block-color) */
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 90%;
padding: 0.5rem;
border-radius: 4px;
overflow-x: auto;
line-height: 1.5;
border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/*行间代码块设置*/
code, tt {
margin: 0 2px;
border-radius: 4px;
color: #5d3fd3!important; /* 更鲜明 */
background-color: #f3e5f5!important;
padding: 2px 4px;
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 90%;
border: 1px solid #e1bee7; /* 淡紫色边框增强质感 */
}
/* 全局修改 Zotero 笔记中水平分隔线的颜色 */
hr {
/* 基础样式：修改颜色为蓝色 */
border-color: #135ce0 !important;
/* 可选：调整粗细和样式 */
border-top-width: 2px !important; /* 线条粗细 */
border-style: solid !important; /* 线条样式（实线/虚线等） */
/* 可选：增加上下间距 */
margin: 16px 0 !important;
}
/* 全局修改 Zotero 笔记中高亮文本的样式 */
mark {
/* 修改背景色（高亮色） */
background-color: #ffeb3b !important; /* 黄色，可替换为其他颜色值 */
/* 修改文字颜色（可选） */
color: #333333 !important; /* 深色文字，与背景形成对比 */
/* 可选：去除默认边框或调整样式 */
border: none !important;
padding: 0 2px !important; /* 文字与背景的内边距 */
}
浙公网安备 33010602011771号