diff --git a/.github/release.md b/.github/release.md index 8ee5252..6de1786 100644 --- a/.github/release.md +++ b/.github/release.md @@ -2,12 +2,17 @@ #### 更符合 GitHub 风格 -- 差异对比折叠行文本颜色同步 -- 差异对比行号位置同步 -- 差异对比按钮和折叠行高度同步 +- 代码差异对比折叠行文本颜色同步 +- 代码差异对比行号位置同步 +- 代码差异对比按钮和折叠行高度同步 - Actions 日志页面标题颜色同步 - Actions 日志页面设置菜单背景色同步 - 菜单背景色同步当前最新颜色 +- Markdown 背景色同步 +- 补充 Markdown 代码块背景色 +- 弹窗阴影颜色同步 +- 仓库项目页面列背景色同步 +- Issue/PR 表情背景色同步 ## 🎈 Perf @@ -15,4 +20,4 @@ ## 🐞 Fix -- 修复差异对比分列视图下颜色丢失 +- 修复代码差异对比分列视图下颜色丢失 diff --git a/src/core/color.ts b/src/core/color.ts index 82fa107..555c06b 100644 --- a/src/core/color.ts +++ b/src/core/color.ts @@ -7,11 +7,11 @@ import type { Theme } from "./theme"; interface ColorTheme { /** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */ isDarkTheme: boolean; - /** 主色调 */ + /** 主色调(强调色) */ primary: string; /** 主色调的对比色, 一般用于 `color` 属性, primary 用于 `background-color` */ primaryContrast: string; - /** 副色调 */ + /** 副色调(边框色) */ secondary: string; /** 红色 */ red: string; diff --git a/src/types/color/other.ts b/src/types/color/other.ts index e09f039..bd62285 100644 --- a/src/types/color/other.ts +++ b/src/types/color/other.ts @@ -67,52 +67,83 @@ export const other = { menu: null, /** 卡片背景色, 但是找不到元素, 可能是个人 README */ card: null, + /** Markdown 颜色 */ markup: { + /** 隔行背景色 */ tableRow: "color-markup-table-row", code: { + /** 代码块背景色 */ block: null, + /** 代码行背景色 */ inline: null, }, }, + /** 普通按钮的背景色 (basic 非 primary) */ button: null, + /** 代码页面背景色 */ codeBg: "color-code-bg", + /** 弹窗阴影 */ shadow: { self: null, + /** css 没有使用 */ opaque: null, }, + /** 弹窗按钮行的背景色 */ secondaryBg: "color-secondary-bg", + /** 代码差异对比折叠行按钮背景色 */ expandButton: "color-expand-button", + /** 不知道 */ placeholderText: "color-placeholder-text", + /** 不知道, css 没有 */ editorLineHighlight: "color-editor-line-highlight", + /** 仓库项目页面列的背景色 */ projectColumnBg: "color-project-column-bg", + /** caret-color 属性 */ caret: null, + /** Issue 表情按钮 */ reaction: { + /** css 里没用 */ bg: null, + /** 悬停时颜色 */ hoverBg: "color-reaction-hover-bg", + /** 点击后颜色 */ activeBg: "color-reaction-active-bg", }, + /** 不知道是干啥的 */ tooltip: { text: null, bg: null, }, + /** 顶部导航栏(用户导航栏) */ nav: { + /** 背景色 */ bg: null, + /** 悬停时背景色 */ hoverBg: "color-nav-hover-bg", + /** color 颜色 */ text: null, }, + /** 顶部二级导航栏背景色(仓库导航栏等) */ secondaryNavBg: "color-secondary-nav-bg", - /** 标签 */ + /** 普通标签 */ label: { text: null, bg: null, hoverBg: "color-label-hover-bg", + /** css 没用 */ activeBg: "color-label-active-bg", }, + /** 不知道. 似乎和最后一次 review 相关的边框色 */ accent: null, + /** 不知道. 似乎和最后一次 review 相关的背景色 */ smallAccent: "color-small-accent", + /** 不知道啥玩意, 跟文件预览内容行颜色有关系 */ highlight: { - bg: null, + /** 在行号前追加的伪元素颜色 */ fg: null, + /** 背景色 */ + bg: null, }, + /** 不知道啥玩意 dimmer 的背景色 */ overlayBackdrop: "color-overlay-backdrop", }; diff --git a/src/types/index.ts b/src/types/index.ts index 54c82fc..34d55f0 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,9 +1,9 @@ import type { MapLeafNodes } from "src/core/types"; import * as color from "./color"; -/** 主色调 */ +/** 主色调(强调色) */ export type Primary = MapLeafNodes; -/** 副色调 */ +/** 副色调(边框色) */ export type Secondary = MapLeafNodes; /** 基础颜色 */ export type Named = MapLeafNodes; diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index 2613468..609830e 100644 --- a/themes/dark.css.tsx +++ b/themes/dark.css.tsx @@ -51,6 +51,9 @@ const github = { default: "#0d1117", inset: "#010409", muted: "#151b23", + neutral: { + muted: "#656c7633", + } }, borderColor: { default: "#3d444d", @@ -60,14 +63,19 @@ const github = { bgColor: { active: "#2a313c", hover: "#262c36", + rest: "#212830", }, transparent: { bgColor: { - selected: "#656c761a", + active: "#656c7640", hover: "#656c7633", + selected: "#656c761a", }, }, }, + shadow: { + floating: "#01040966" + } }; const console: Console = { @@ -160,62 +168,62 @@ const other: Other = { opaque: themeVars.color.box.header, }, active: github.control.transparent.bgColor.selected, - menu: themeVars.color.body, // 此菜单项涉及太多, 不仅仅是下拉菜单, 默认使用 body 颜色 + menu: github.bgColor.inset, card: themeVars.color.body, markup: { - tableRow: "#ffffff06", + tableRow: github.bgColor.muted, code: { - block: "#ffffff16", - inline: "#ffffff26", + block: github.bgColor.muted, + inline: github.bgColor.neutral.muted, }, }, - button: "#212830", - codeBg: "#0d1117", + button: github.control.bgColor.rest, + codeBg: "unset", shadow: { - self: "#00000060", - opaque: "#00000080", + self: github.shadow.floating, + opaque: themeVars.color.shadow.self, }, - secondaryBg: "#ffffff26", + secondaryBg: "unset", expandButton: github.diffBlob.hunkNum.bgColor.rest, - placeholderText: "#8a8e99", + placeholderText: themeVars.color.text.light.num3, editorLineHighlight: themeVars.color.primary.light.num5, - projectColumnBg: themeVars.color.secondary.light.num2, - caret: themeVars.color.text.self, + projectColumnBg: github.bgColor.inset, + caret: themeVars.color.text.dark, reaction: { - bg: "#ffffff12", - hoverBg: themeVars.color.primary.light.num4, - activeBg: themeVars.color.primary.light.num5, + bg: "initial", + hoverBg: github.bgColor.accent.muted, + activeBg: github.bgColor.accent.muted, }, tooltip: { - text: "#fff", - bg: "#000000f0", + text: github.fgColor.default, + bg: github.bgColor.default, }, nav: { bg: github.bgColor.inset, - hoverBg: themeVars.color.hover.self, + hoverBg: github.control.transparent.bgColor.hover, text: themeVars.color.text.self, }, secondaryNavBg: themeVars.color.nav.bg, label: { - text: "#fff", - bg: "#7c84974b", - hoverBg: "#7c8497a0", - activeBg: "#7c8497", + text: themeVars.color.text.self, + bg: github.bgColor.neutral.muted, + hoverBg: github.control.transparent.bgColor.active, + activeBg: themeVars.color.label.hoverBg, }, accent: themeVars.color.primary.light.num1, smallAccent: themeVars.color.primary.light.num5, highlight: { - bg: "#87651e", - fg: "#352c1c", + fg: github.fgColor.attention, + bg: github.bgColor.attention.muted, }, - overlayBackdrop: "#080808c0", + overlayBackdrop: themeVars.color.body, }; export default defineTheme({ isDarkTheme, primary: github.fgColor.accent, primaryContrast: github.fgColor.default, - secondary: "#3d444d", + secondary: github.borderColor.default, red: github.fgColor.danger, orange: github.fgColor.severe, yellow: github.fgColor.attention,