lab/note/随手记/仿onelight主题.md

感觉还是不如typora好使啊,以后买个正版吧

/**
 * MarkText One Light Dark 主题 (仿 Typora onelight-dark：https://github.com/caolib/typora-onelight-theme)
 *
 * 使用方法:
 *   在 MarkText 中打开 设置 → 主题 → 自定义 CSS，
 *   将本文件全部内容粘贴进去，保存即可。
 *
 * 配色来源: Typora onelight-dark theme by caolib
 * 兼容: MarkText v0.19.x (旧引擎) / v0.20+ (新引擎)
 */

/* ====================================================================
 * CSS 变量 — 使用 camelCase 命名 (旧引擎 v0.19.x 兼容)
 * ==================================================================== */
:root {
  /* —— 编辑器核心 —— */
  --themeColor: #5c99f3;
  --themeColor90: rgba(92, 153, 243, 0.9);
  --themeColor80: rgba(92, 153, 243, 0.8);
  --themeColor70: rgba(92, 153, 243, 0.7);
  --themeColor60: rgba(92, 153, 243, 0.6);
  --themeColor50: rgba(92, 153, 243, 0.5);
  --themeColor40: rgba(92, 153, 243, 0.4);
  --themeColor30: rgba(92, 153, 243, 0.3);
  --themeColor20: rgba(92, 153, 243, 0.2);
  --themeColor10: rgba(92, 153, 243, 0.1);
  --highlightThemeColor: #e94ab9;

  --highlightColor: #ffffff10;
  --selectionColor: #3266d0;
  --editorColor: #c3c3c3;
  --editorColor80: #c3c3c3;
  --editorColor60: rgba(195, 195, 195, 0.6);
  --editorColor50: rgba(195, 195, 195, 0.5);
  --editorColor40: rgba(195, 195, 195, 0.4);
  --editorColor30: rgba(195, 195, 195, 0.3);
  --editorColor10: rgba(195, 195, 195, 0.1);
  --editorColor04: rgba(195, 195, 195, 0.04);
  --editorBgColor: #1f1f1e;
  --editorAreaWidth: 900px;
  --deleteColor: #ff6b6b;
  --iconColor: rgba(195, 195, 195, 0.56);
  --codeBgColor: #282c34;
  --codeBlockBgColor: #282c34;
  --footnoteBgColor: rgba(51, 51, 51, 0.5);
  --inputBgColor: #3d404e;
  --focusColor: #5c99f3;

  /* —— 按钮 —— */
  --buttonFontColor: #c3c3c3;
  --buttonBgColor: #333333;
  --buttonBorder: 1px solid #353a45;
  --buttonShadow: none;
  --buttonFontColorHover: #ffffff;
  --buttonBgColorHover: #414855;
  --buttonBorderHover: var(--buttonBorder);
  --buttonFontColorActive: var(--buttonFontColor);
  --buttonBgColorActive: #2a2d35;
  --buttonBorderActive: var(--buttonBorder);
  --buttonFocusBorder: 1px solid #5c99f3;
  --buttonFocusShadow: 0 0 0 1px rgba(92, 153, 243, 0.3);

  --buttonPrimaryFontColor: #ffffff;
  --buttonPrimaryBgColor: #5c99f3;
  --buttonPrimaryBorder: 1px solid #4a8ad9;
  --buttonPrimaryShadow: none;
  --buttonPrimaryFontColorHover: var(--buttonPrimaryFontColor);
  --buttonPrimaryBgColorHover: #4a8ad9;
  --buttonPrimaryBorderHover: var(--buttonPrimaryBorder);
  --buttonPrimaryFontColorActive: var(--buttonPrimaryFontColor);
  --buttonPrimaryBgColorActive: #3d7bc4;
  --buttonPrimaryBorderActive: var(--buttonPrimaryBorder);
  --buttonPrimaryFocusBorder: none;
  --buttonPrimaryFocusShadow: inset 0 0 0 1px rgba(24, 26, 31, 0.5), 0 0 0 1px #5c99f3;

  /* —— Markdown 元素 —— */
  --headingColor: #c3c3c3;
  --h1Color: #c3c3c3;
  --h2Color: #c3c3c3;
  --h3Color: #c3c3c3;
  --h4Color: #ffffff;
  --h5Color: #c3c3c3;
  --h6Color: #c3c3c3;
  --blockquoteTextColor: rgba(195, 195, 195, 0.8);
  --blockquoteBorderColor: #5c99f3;
  --hrColor: #5c99f3;
  --linkColor: #e94ab9;
  --strongColor: #5c99f3;
  --emColor: #e94ab9;
  --listMarkerColor: #5c99f3;
  --tableBorderColor: #393e49;

  /* —— 侧边栏 —— */
  --sideBarColor: #c3c3c3;
  --sideBarIconColor: var(--iconColor);
  --sideBarTitleColor: #c3c3c3;
  --sideBarTextColor: #7a7a7a;
  --sideBarBgColor: #1f1f1e;
  --sideBarItemHoverBgColor: #333333;
  --itemBgColor: #333333;

  /* —— 浮动层 —— */
  --floatFontColor: #c3c3c3;
  --floatBgColor: #353a45;
  --floatHoverColor: #414855;
  --floatBorderColor: #353a45;
  --floatShadow: rgba(0, 0, 0, 0.3);
  --maskColor: rgba(0, 0, 0, 0.7);
}

/* ====================================================================
 * 全局背景 — 统一为 Typora onelight-dark 底色 #1f1f1e
 * ==================================================================== */
html, body {
  background-color: #1f1f1e;
}
.editor-wrapper {
  background-color: #1f1f1e;
}
.editor-component {
  background-color: #1f1f1e;
}
#ag-editor-id {
  background-color: #1f1f1e;
}

/* ====================================================================
 * 滚动条
 * ==================================================================== */
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
  background: var(--editorBgColor);
}
::-webkit-scrollbar:vertical { width: 8px; }
::-webkit-scrollbar:vertical:hover { width: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(134, 134, 134, 0.27);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* ====================================================================
 * 弹窗 (Element UI)
 * ==================================================================== */
.v-modal { background: #08090a !important; opacity: 0.65 !important; }
.el-dialog,
.el-dialog.ag-dialog-table {
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid #353a45 !important;
  background: #2a2a29 !important;
}
.el-button:focus { color: var(--buttonFontColor); }
.el-button--primary:focus {
  color: var(--buttonPrimaryFontColor);
  background: var(--buttonPrimaryBgColor);
}

/* ====================================================================
 * 标题栏 / 浮动菜单
 * ==================================================================== */
.title-bar .frameless-titlebar-button > div > svg { fill: #c3c3c3; }
.title-bar .frameless-titlebar-minimize:hover,
.title-bar .frameless-titlebar-toggle:hover {
  background-color: rgba(195, 195, 195, 0.05) !important;
}
.input-wrapper {
  border-radius: 5px !important;
  border: 1px solid #353a45 !important;
  background: #2a2a29 !important;
}
.ag-front-menu,
.ag-float-wrapper {
  box-shadow: 0 4px 8px 0 var(--floatShadow) !important;
}

/* ====================================================================
 * 侧边栏
 * ==================================================================== */
.side-bar { border-right: 1px solid #333333 !important; }
.left-column ul > li > svg { fill: rgba(195, 195, 195, 0.6) !important; }
.left-column ul > li:hover > svg { fill: #ffffff !important; }
.left-column ul > li.active > svg { fill: #5c99f3 !important; }

/* ====================================================================
 * 标签栏
 * ==================================================================== */
.editor-tabs {
  box-shadow: none !important;
  background: var(--editorBgColor) !important;
}
.editor-tabs:after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #333333;
  bottom: 0; left: 0; right: 0; z-index: 1;
}
.editor-tabs ul.tabs-container:after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #333333;
  bottom: 0; left: 0; right: 0; z-index: 2;
}
.tabs-container > li,
.tabs-container > li.active { background: var(--editorBgColor) !important; }
.tabs-container > li.active {
  border: 1px solid #333333;
  border-bottom: none;
}
.tabs-container > li.active:after {
  top: 0 !important; right: auto !important;
  width: 2px !important; height: auto !important;
  background: #5c99f3 !important;
}
.tabs-container svg.close-icon #unsaved-circle-icon { fill: #5c99f3; }

/* ====================================================================
 * 编辑器内容区 (v0.19.x 旧引擎: 容器是 #ag-editor-id)
 * ==================================================================== */

/* ---- 标题 ---- */
#ag-editor-id h1 {
  text-align: center;
  padding-bottom: 0.3em;
}
#ag-editor-id h2 {
  border-bottom: 2px solid var(--themeColor);
}
#ag-editor-id h3 {
  border-left: 4px solid var(--themeColor);
  padding-left: 8px;
}
#ag-editor-id h4 {
  color: #ffffff !important;
  background: var(--themeColor);
  border-radius: 5px;
  width: fit-content;
  padding: 2px 12px;
}

/* ---- 粗体 / 斜体 ---- */
#ag-editor-id strong { color: var(--strongColor); font-weight: 700; }
#ag-editor-id em     { color: var(--emColor); }

/* ---- 链接 ---- */
#ag-editor-id a {
  color: var(--linkColor);
  font-weight: 700;
  text-decoration: underline;
}

/* ---- 行内代码 ---- */
#ag-editor-id code {
  background-color: var(--codeBlockBgColor);
  color: #eb4c37;
  border-radius: 3px;
  padding: 2px 4px;
}

/* ---- 代码块 ---- */
#ag-editor-id :not(pre) > code[class*='language-'],
#ag-editor-id pre:not(.CodeMirror-line),
#ag-editor-id pre[class*='language-'],
#ag-editor-id pre.ag-paragraph {
  background: var(--codeBlockBgColor) !important;
  border: none !important;
  border-radius: 5px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}

/* ---- 引用块 (四面边框 + 左侧加粗) ---- */
#ag-editor-id blockquote {
  padding: 10px 10px 10px 20px;
  font-size: 0.9em;
  border: 2px solid var(--blockquoteBorderColor);
  border-left: 5px solid var(--blockquoteBorderColor);
  border-radius: 0 5px 5px 0;
  background: transparent;
  overflow: auto;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#ag-editor-id blockquote:hover {
  background: var(--editorBgColor);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* 隐藏引擎默认的 ::before 竖条，改用 border-left */
#ag-editor-id blockquote::before {
  content: none;
}

/* ---- 分割线 ---- */
#ag-editor-id hr {
  height: 2px;
  background-color: var(--hrColor);
}

/* ---- 表格 ---- */
#ag-editor-id table tr th::before,
#ag-editor-id table tr td::before {
  border-color: var(--tableBorderColor);
}

/* ---- 图片 ---- */
#ag-editor-id img {
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* ---- 任务列表复选框 ---- */
#ag-editor-id li.ag-task-list-item {
  list-style-type: none;
  position: relative;
}
#ag-editor-id li.ag-task-list-item > input[type='checkbox'] {
  position: absolute;
  cursor: pointer;
  width: 16px; height: 16px; top: 0.1em;
  margin: 0; left: -24px;
  transform-origin: center;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}
#ag-editor-id li.ag-task-list-item > input[type='checkbox']::before {
  content: '';
  width: 16px; height: 16px;
  box-sizing: border-box;
  display: inline-block;
  border: 2px solid var(--editorColor50);
  border-radius: 2px;
  background-color: var(--editorBgColor);
  position: absolute; top: 0; left: 0;
  transition: all 0.2s ease;
}
#ag-editor-id li.ag-task-list-item > input[type='checkbox']:checked::before {
  border-color: transparent;
  background-color: var(--themeColor);
}
#ag-editor-id li.ag-task-list-item > input[type='checkbox']::after {
  content: '';
  transform: rotate(-45deg) scale(0);
  width: 9px; height: 5px;
  border: 2px solid #fff;
  border-top: none; border-right: none;
  position: absolute; display: inline-block;
  top: 1px; left: 5px;
  transition: all 0.2s ease;
}
#ag-editor-id li.ag-task-list-item > input[type='checkbox']:checked::after {
  transform: rotate(-45deg) scale(1);
}

/* ---- 段落悬停 ---- */
#ag-editor-id p.ag-paragraph {
  padding: 5px;
  margin: 0;
  border-radius: 5px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#ag-editor-id p.ag-paragraph:hover {
  background: #141414;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
}

/* ---- 已完成任务文字 ---- */
#ag-editor-id li.ag-task-list-item > input.ag-checkbox-checked ~ * {
  color: var(--editorColor50);
}

/* ---- 列表标记 ---- */
#ag-editor-id ul > li::marker,
#ag-editor-id ol > li::marker {
  color: var(--listMarkerColor);
}

/* ---- 搜索高亮 ---- */
.ag-highlight {
  background: #ff0 !important;
  color: red !important;
  border-radius: 3px;
  padding: 0 2px;
  height: auto !important;
  line-height: inherit !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---- 表格表头 ---- */
#ag-editor-id table tr th {
  background: var(--editorColor04);
}
#ag-editor-id table tr:first-child td {
  background: var(--editorColor04);
}

/* ---- 脚注 ---- */
#ag-editor-id sup.md-footnote {
  color: var(--strongColor);
  font-weight: 700;
}

/* ---- 前置图标 ---- */
.ag-front-icon {
  fill: var(--editorColor30);
}

/* ====================================================================
 * CodeMirror 源码模式 (v0.19.x 旧引擎)
 * ==================================================================== */
.source-code {
  background: var(--editorBgColor);
}
.source-code .CodeMirror {
  color: var(--editorColor);
  background: transparent;
}
.source-code .CodeMirror-gutters {
  background: transparent;
  border-right-color: #333333;
}
.source-code .CodeMirror-linenumber {
  color: var(--editorColor30);
}
.source-code .CodeMirror-cursor {
  border-left-color: var(--themeColor);
}
.source-code .CodeMirror-activeline-background {
  background: var(--editorColor04);
}
.source-code .CodeMirror-selected {
  background: var(--selectionColor) !important;
}

/* CodeMirror 语法高亮色 — 参考 onelight 配色 */
.cm-s-one-dark .cm-comment  { color: #7f848e; font-style: italic; }
.cm-s-one-dark .cm-keyword  { color: #c678dd; }
.cm-s-one-dark .cm-operator  { color: #56b6c2; }
.cm-s-one-dark .cm-builtin   { color: #e5c07b; }
.cm-s-one-dark .cm-atom      { color: #d19a66; }
.cm-s-one-dark .cm-number    { color: #d19a66; }
.cm-s-one-dark .cm-def       { color: #61afef; }
.cm-s-one-dark .cm-string    { color: #98c379; }
.cm-s-one-dark .cm-string-2  { color: #e06c75; }
.cm-s-one-dark .cm-variable  { color: #e06c75; }
.cm-s-one-dark .cm-variable-2 { color: #e5c07b; }
.cm-s-one-dark .cm-variable-3 { color: #d19a66; }
.cm-s-one-dark .cm-type      { color: #e5c07b; }
.cm-s-one-dark .cm-meta      { color: #e06c75; }
.cm-s-one-dark .cm-attribute { color: #d19a66; }
.cm-s-one-dark .cm-property  { color: #e06c75; }
.cm-s-one-dark .cm-qualifier { color: #e5c07b; }
.cm-s-one-dark .cm-tag       { color: #e06c75; }
.cm-s-one-dark .cm-link      { color: #c678dd; }
.cm-s-one-dark .cm-header    { color: #61afef; }
.cm-s-one-dark .cm-quote     { color: #98c379; }

/* ====================================================================
 * Mermaid/图表 SVG 暗色适配
 * ==================================================================== */
figure[data-role] svg rect[fill='#ffffff']       { fill: var(--editorBgColor); }
figure[data-role] svg rect[stroke='#000000']     { stroke: var(--editorColor); }
figure[data-role] svg text[fill='#000000']       { fill: var(--editorColor); }
figure[data-role] svg path[stroke='#000000']     { stroke: var(--editorColor); }
figure[data-role] svg path[fill='#ffffff']        { fill: var(--editorBgColor); }
figure[data-role] svg path[fill='#000000']        { fill: var(--editorColor); }
figure[data-role] svg use[fill='black']           { fill: var(--editorColor); }
figure[data-role] svg use[fill='#000000']         { fill: var(--editorColor); }