xfy
3c10f72444
现象：编辑器「有行号的上半部分」与「空白下半部分」背景色不一致。
根因：CodeMirror core 的 base theme 给 `.cm-editor`（&）只设了
position: relative + display: flex，没有 height。编辑器默认只占
内容高度（几行 ≈ 60px），不填满父容器。容器 div 设了 min-height:
280px，但 .cm-editor 不会自动撑到 280px——剩余空间透出容器的
paper-entry(mantle #e6e9ef) 背景，与 .cm-editor 的 base(#eff1f5)
形成「上半 base / 下半 mantle」的上下色差。
修复：themes.ts 的覆盖里加 `& { height: 100% }`，让 .cm-editor
撑满父容器。配合容器已有的 min-height: 280px，编辑器完整填充，
背景统一为 base 色，上下割裂消失。
34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
// @catppuccin/codemirror 提供现成的 Catppuccin 主题 Extension，
|
||
// 与项目 themes/ 下的 Catppuccin Latte/Mocha .tmTheme 视觉一致。
|
||
import { catppuccinLatte, catppuccinMocha } from '@catppuccin/codemirror';
|
||
import { EditorView } from '@codemirror/view';
|
||
import type { Extension } from '@codemirror/state';
|
||
|
||
export type ThemeName = 'light' | 'dark';
|
||
|
||
/**
|
||
* 覆盖 CodeMirror core 内置 base theme 的两处问题：
|
||
*
|
||
* 1. `.cm-gutters` 默认背景：core 的 `&light .cm-gutters`（`#f5f5f5`）/ `&dark`
|
||
* （`#333338`）特异性高于 catppuccin 的 `.cm-gutters`，catppuccin 的 base 背景被
|
||
* 压制，行号列与代码区背景不一致。用 `!important` 强制透明，继承 editor base 色。
|
||
*
|
||
* 2. `.cm-editor` 默认不撑满父容器：core 的 `&` 没设 height，编辑器只占内容高度，
|
||
* 容器剩余空间透出父元素背景，造成「有行号的上半部分」与「空白下半部分」色差。
|
||
* 用 `& { height: 100% }` 让编辑器填满容器。
|
||
*/
|
||
const gutterBackgroundOverride: Extension = EditorView.theme({
|
||
'&': {
|
||
height: '100%',
|
||
},
|
||
'.cm-gutters': {
|
||
backgroundColor: 'transparent !important',
|
||
},
|
||
});
|
||
|
||
/** 根据主题名返回对应的 CodeMirror 主题 Extension。 */
|
||
export function themeExtension(name: ThemeName): Extension {
|
||
const catppuccin = name === 'light' ? catppuccinLatte : catppuccinMocha;
|
||
return [catppuccin, gutterBackgroundOverride];
|
||
}
|