一、前言

最近在用 Zotero 做筆記的時候感覺筆記的主題實在是太丑了，所以就打算換一個主題。然后我找到了一個網(wǎng)站，Zotero筆記css，里面也有一些主題，但是我都不太滿意。我的 Typora 用的主題是 drake-juejin 。所以我就把這個網(wǎng)站上的一個主題的代碼下載下來進(jìn)行修改，成品代碼我放在本文的最后面。

注意事項：

1. 本人沒學(xué)過前端，代碼是靠 AI 生成的，所以如果代碼有什么問題的話我估計也解決不了??
2. 表格那一塊很奇怪，就是不設(shè)置單元格的背景顏色的時候內(nèi)部邊框是可以顯示出來的，但是設(shè)置了單元格的背景顏色之后，內(nèi)部邊框就顯示不出來了，我搞了好久才弄出來單元格的左右邊框，但是上下邊框依然不顯示，但是我設(shè)置的單元格背景顏色是奇偶行交替的顏色，也能用，所以我就不再管了。

二、成品效果圖

三、設(shè)置筆記主題的方法

第一步： 設(shè)置 -> 高級 -> 設(shè)置編譯器

第二步：點擊接受風(fēng)險并繼續(xù)

第三步：在搜索框中輸入 note.css , 點擊編輯按鈕

第四步：把 css 代碼直接復(fù)制到輸入框中，點擊確認(rèn)，主題就生效了

四、主題代碼

/* 1. 全局字體大小設(shè)置（作用于整個文檔） */
html {
  font-size: 32px !important; /* 根元素字體大小，作為全局基準(zhǔn) */
}

body {
  font-size: 1rem !important; /* 繼承根元素字體大小（1rem = html的font-size） */
  /*font-family: Arial, sans-serif !important;*/ /* 可選：設(shè)置全局字體族 */
}

/* 1. 最高優(yōu)先級全局字體設(shè)置（覆蓋所有元素） */
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: 16px !important; /* 強(qiáng)制所有元素默認(rèn)16px */
  /*font-family: inherit !important;*/ /* 統(tǒng)一字體族 */
}

/*超鏈接*/

a,
a:visited {
  /* 普通狀態(tài)和訪問過的鏈接 */
  color: #135ce0;
  /* 基準(zhǔn)藍(lán)色 */
  text-decoration: underline;
  /* 下劃線 */
}

a:hover,
a:focus {
  /* 鼠標(biāo)懸停和聚焦?fàn)顟B(tài) */
  color: rgba(19, 92, 224, 0.8);
  /* 更深的藍(lán)色（基于基準(zhǔn)色調(diào)整） */
}

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;  /* 基準(zhǔn)藍(lán)色的淺色調(diào)邊框 */
  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;
}

/* 標(biāo)題樣式 */
.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;
}
/* 列表設(shè)計 */
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. 基礎(chǔ)表格設(shè)置（核心優(yōu)化：邊框合并+精確計算） */
.primary-editor .tableWrapper table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border: #135ce0 2px solid !important; /* 外層邊框兜底 */
}

/* 2. 清除默認(rèn)樣式（更徹底的重置） */
.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. 全局單元格基礎(chǔ)樣式（優(yōu)化內(nèi)邊距和定位） */
.primary-editor .tableWrapper table td {
 text-align: center !important;
 vertical-align: middle !important;
  padding: 10px 12px !important; /* 增加內(nèi)邊距，避免內(nèi)容貼邊框 */
  position: relative !important;
  min-width: 20% !important; /* 確保列寬均勻 */
}

/* 4. 列間邊框（偽元素優(yōu)化版） */
.primary-editor .tableWrapper table td::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important; /* 調(diào)整位置至單元格右側(cè)邊緣 */
  height: 100% !important;
  width: 2px !important;
  background-color: #135ce0 !important;
  z-index: 1 !important;
  transform: translateX(0) !important; /* 消除定位偏移 */
}


/* 修復(fù)最后一列多余邊框 */
.primary-editor .tableWrapper table td:last-child::after {
  display: none !important;
}
/* 第一列左側(cè)邊框（補充最左邊緣） */
.primary-editor .tableWrapper table td:first-child {
  border-left: #135ce0 3px solid !important;
}

/* 5. 第一行樣式（強(qiáng)化邊框?qū)哟危?*/
.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; /* 表頭背景稍深，區(qū)分奇偶行 */
}
/* 第一行偽元素強(qiáng)化（避免被覆蓋） */
.primary-editor .tableWrapper table tr:first-child td::after {
  background-color: #135ce0 !important;
  width: 2px !important;
}

/* 6. 內(nèi)容行上下邊框（優(yōu)化粗細(xì)過渡） */
.primary-editor .tableWrapper table tr:not(:first-child) td {
  border-top: #135ce0 3px solid !important;
  border-bottom: #135ce0 3px solid !important;
}
/* 修復(fù)行邊框與列邊框銜接 */
.primary-editor .tableWrapper table tr:not(:first-child) td::after {
  top: 1px !important; /* 避開頂部1px行邊框 */
  height: calc(100% - 2px) !important; /* 避開上下行邊框 */
}

/* 7. 最后一行邊框強(qiáng)化（與表頭呼應(yīng)） */
.primary-editor .tableWrapper table tr:last-child td {
  border-bottom: #135ce0 3px solid !important;
}
/* 最后一行偽元素高度調(diào)整 */
.primary-editor .tableWrapper table tr:last-child td::after {
  height: calc(100% - 1px) !important; /* 適配底部3px邊框 */
}

/* 8. 奇偶行背景（優(yōu)化對比度，避免掩蓋邊框） */
.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; /* 稍深一點的淺藍(lán)色，增強(qiáng)與邊框?qū)Ρ?*/
}

/* 9. 懸停效果（優(yōu)化邊框反饋） */
.primary-editor .tableWrapper table tr td:hover {
  background-color: #e6f0ff !important;
}
.primary-editor .tableWrapper table tr td:hover::after {
  background-color: #0a4ba0 !important; /* 懸停時列邊框加深 */
}


/*添加了一個淺灰色的方格網(wǎng)格背景*/
/* 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); /* 設(shè)定滾動條滑塊和軌道顏色 */
  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); /* 設(shè)定滾動條滑塊和軌道顏色 */
}

/*字體設(shè)置*/
/*#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;
}*/

/*代碼塊設(shè)置*/

pre, pre code {
  background-color: #2b2b2b!important;     /* 對應(yīng) var(--code-block-bg-color) */
  color: #f8f8f2!important;               /* 對應(yīng) 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);
}

/*行間代碼塊設(shè)置*/

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; /* 淡紫色邊框增強(qiáng)質(zhì)感 */
}

/* 全局修改 Zotero 筆記中水平分隔線的顏色 */
hr {
  /* 基礎(chǔ)樣式：修改顏色為藍(lán)色 */
  border-color: #135ce0 !important;
  
  /* 可選：調(diào)整粗細(xì)和樣式 */
  border-top-width: 2px !important; /* 線條粗細(xì) */
  border-style: solid !important;   /* 線條樣式（實線/虛線等） */
  
  /* 可選：增加上下間距 */
  margin: 16px 0 !important;
}

/* 全局修改 Zotero 筆記中高亮文本的樣式 */
mark {
  /* 修改背景色（高亮色） */
  background-color: #ffeb3b !important; /* 黃色，可替換為其他顏色值 */
  
  /* 修改文字顏色（可選） */
  color: #333333 !important; /* 深色文字，與背景形成對比 */
  
  /* 可選：去除默認(rèn)邊框或調(diào)整樣式 */
  border: none !important;
  padding: 0 2px !important; /* 文字與背景的內(nèi)邊距 */
}