onelight-dark.css

@import "onelight.css";
@import './onelight/style/editor.css';
@import './onelight/style/code.css';
@import './onelight/style/font.css';
@import './onelight/style/mermaid.css';
@import './onelight/style/kbd/kbd-dark.css';
@import './onelight/style/plugin/copilot-dark.css';
@import './onelight/style/icon.css';

/* 关于下面的设置，因为深色主题导入了浅色主题，所以修改深色主题时最好将浅色主题的配置设成一样 */

/* 表格样式 依次为 1.无边框 2.方形有边框 */
/* @import './onelight/style/table/table.css'; */
@import './onelight/style/table/table-square.css';

/* 标题样式 依次为 1.原样式 2.彩色样式 */
@import './onelight/style/title/title.css';
/* @import './onelight/style/title/title-colorful-dark.css'; */

/* 列表样式 依次为 1.圆形序号 2.普通 */
/* @import './onelight/style/list/list.css'; */
@import './onelight/style/list/list-simple.css';

/* 引用块，警告框样式 依次为 1.原样式 2.默认*/
/* @import './onelight/style/blockquote/blockquote.css'; */
@import './onelight/style/blockquote/blockquote2.css';



:root {
    --bg-color: #1f1f1e;
    --text-color: #c3c3c3;
    --primary-btn-text-color: var(--text-color);
    --rawblock-edit-panel-bd: var(--code-bg-color);
    --active-file-bg-color: #333333;
    --window-border: 1px solid var(--active-file-bg-color);
    --active-file-text-color: inherit;
    --active-file-border-color: var(--main-red);
    --side-bar-bg-color: var(--bg-color);
    --item-hover-bg-color: rgb(from var(--bg-color) r g b / 0.8);
    --item-hover-text-color: var(--main-red);
    --side-bar-menu-active-tint: var(--main-green);
    --outline-color: #7a7a7a;
    --tb-border-color: #393e49;
    /* ---------------->> 暗化比例 <<---------------- */
    --darken-ratio: 95%;
    /* ---------------->> 主题色 <<---------------- */
    --theme-color-original: #166ff3;
    --main-red-original: #ff6b6b;
    --main-green-original: #2ed573;
    --main-purple-original: #c94ae9;
    --main-yellow-original: #f9b03d;
    --theme-color: color-mix(in srgb, var(--theme-color-original) var(--darken-ratio), black);
    --main-red: color-mix(in srgb, var(--main-red-original) var(--darken-ratio), black);
    --main-green: color-mix(in srgb, var(--main-green-original) var(--darken-ratio), black);
    --main-purple: color-mix(in srgb, var(--main-purple-original) var(--darken-ratio), black);
    --main-yellow: color-mix(in srgb, var(--main-yellow-original) var(--darken-ratio), black);
    --light-color: #6e6e6e;
    --theme-light-color: #353a45;
    --border-color: var(--theme-color);
    --border: solid 0.5px var(--theme-color)94;
    --code-bg-color: #282c34;
    --code-bg-color-light: #3d404e;
    --code-bg-color-active: #414855;
    /* ---------------->> 悬浮 <<---------------- */
    --item-bg-color-red: rgb(from var(--main-red) r g b / 0.22);
    --item-bg-color-blue: rgb(from var(--theme-color) r g b / 0.26);
    /* ---------------->> 阴影 <<---------------- */
    --box-shadow: 0px 4px 4px rgba(0, 0, 0, .3);
    --brightness: brightness(0.8);
    /* ---------------->> 过渡 <<---------------- */
    --transition: box-shadow 0.3s ease, transform 0.3s ease;
    --bg-transition: background-color 0.5s ease;
    /* ---------------->> 圆角 <<---------------- */
    --radius-xsmall: 5px;
    --radius-small: 10px;
    --radius-large: 15px;
    --radius-xlarge: 20px;
    /* ---------------->> 云母 <<---------------- */
    --mica-bg: rgba(30, 30, 30, 0.75);
    --mica-blur: blur(12px) saturate(1.1);
    --mica-border: 1px solid rgba(100, 100, 100, 0.15);
    --mica-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(100, 100, 100, 0.1);
    --mica-transition: background-color 0.5s ease, box-shadow 0.5s ease;

    /* ---------------->> Mermaid 图表，详情见 https://support.typoraio.cn/Diagram-Options/ <<---------------- */
    /* 主题，可切换为 "default" "base" "dark" "forest" "neutral" "night" */
    --mermaid-theme: dark;
    /* 字体 */
    --mermaid-font-family: var(--main-font-family), "trebuchet ms", verdana, arial, sans-serif;
    /* 时序图编号 or "off", see https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers*/
    --mermaid-sequence-numbers: on;
    /* 线条风格 可切换为 "linear","basis","natural","step" */
    --mermaid-flowchart-curve: linear;
    /* 甘特图左侧边距 */
    --mermaid--gantt-left-padding: 75;
    /* 时序图主题 simple：普通 hand：手绘风格 */
    --sequence-theme: hand;
}

/* 目录 */
p.md-toc-content {
    background: #292929;
}

/* 代码块文本 */
pre.CodeMirror-line>span {
    color: var(--text-color);
}

/* 引用块 */
#write blockquote {
    border: solid 2px var(--theme-color);
    border-left: 5px solid var(--border-color);
    border-left-color: var(--border-color) !important;
    background: unset;
}

#write blockquote:hover {
    transition: var(--bg-transition);
    background: var(--bg-color);
    box-shadow: var(--box-shadow-large);
}

/* 一体化菜单选项 */
.megamenu-menu-list li a {
    color: var(--text-color) !important;
}

/* 菜单按钮 */
.dropdown-menu,
.menu-item-container a.menu-style-btn {
    background-color: var(--mica-bg) !important;
}


/* 一体化菜单背景 */
.megamenu-content,
.megamenu-opened header {
    background: var(--bg-color);
}

/* 一体化菜单标题 */
.megamenu-menu-header {
    background: var(--bg-color);
}

/* 最近使用文件列表 */
#recent-file-panel tbody tr:nth-child(2n-1) {
    background-color: unset;
}

/* 最近使用文件操作按钮 */
#recent-file-panel-action-btn {
    background-color: unset;
}


/* 有序列表序号 */
#write .ol>.li:before,
#write ol>li:before {
    color: white;
}

/* 源码切换按钮 */
.typora-sourceview-on #toggle-sourceview-btn {
    background: transparent;
}


/* Github风格警告框 */
.md-alert-tip {
    --border-color: color-mix(in srgb, var(--alert-theme-color) var(--darken-ratio), black);
}

.md-alert-note {
    --border-color: color-mix(in srgb, var(--alert-theme-color) var(--darken-ratio), black);
}

.md-alert-important {
    --border-color: color-mix(in srgb, var(--alert-theme-color) var(--darken-ratio), black);
}

.md-alert-caution {
    --border-color: color-mix(in srgb, var(--alert-theme-color) var(--darken-ratio), black);
}

.md-alert-warning {
    --border-color: color-mix(in srgb, var(--alert-theme-color) var(--darken-ratio), black);
}

.cm-s-inner .cm-comment {
    color: #cdcdcd;
}


/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(134 134 134 / 27%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}