codemirror/lint
1
0
Fork 0
Code Pull requests Activity

Improve colors for dark themes #18

Merged
arildm merged 1 commit from fix-dark into main 2026-02-13 08:17:36 +01:00
Conversation 1 Commits 1 Files changed 1 +7
arildm commented 2026-02-12 17:34:06 +01:00 (Migrated from github.com)
Copy link

This adds dark-scoped CSS rules for the background colors of the diagnostic range and the selected panel item.

Before After
cm-lint-colors-1 cm-lint-colors-2

For the screenshots and local testing, I modified demo/index.html to add:

<div style="display: flex; width: 40em; gap: 1em;">
    <div id="left"></div>
    <div id="right"></div>
</div>

and changed demo.ts to:

import { EditorView, basicSetup } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { linter } from "@codemirror/lint";
import { oneDark } from "@codemirror/theme-one-dark";

function createEditor(id: string, dark = false) {
  return new EditorView({
    doc: 'console.log("Hello world")',
    extensions: [
      basicSetup,
      javascript(),
      linter((view) => [
        { message: "first", from: 0, to: 2, severity: "error" },
        { message: "second", from: 4, to: 6, severity: "error" }
      ], {
        autoPanel: true,
      }),
      dark ? oneDark : [],
    ],
    parent: document.getElementById(id)!,
  });
}

createEditor('left', false);
createEditor('right', true);
This adds dark-scoped CSS rules for the background colors of the diagnostic range and the selected panel item. | Before | After | |---|---| | <img width="487" height="316" alt="cm-lint-colors-1" src="https://github.com/user-attachments/assets/231f6beb-21de-443b-880c-e92f8f66bb25" /> | <img width="487" height="316" alt="cm-lint-colors-2" src="https://github.com/user-attachments/assets/f44a7d3c-6742-42af-8c6b-2dc1c75e0398" /> | For the screenshots and local testing, I modified `demo/index.html` to add: ```html <div style="display: flex; width: 40em; gap: 1em;"> <div id="left"></div> <div id="right"></div> </div> ``` and changed `demo.ts` to: ```ts import { EditorView, basicSetup } from "codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { linter } from "@codemirror/lint"; import { oneDark } from "@codemirror/theme-one-dark"; function createEditor(id: string, dark = false) { return new EditorView({ doc: 'console.log("Hello world")', extensions: [ basicSetup, javascript(), linter((view) => [ { message: "first", from: 0, to: 2, severity: "error" }, { message: "second", from: 4, to: 6, severity: "error" } ], { autoPanel: true, }), dark ? oneDark : [], ], parent: document.getElementById(id)!, }); } createEditor('left', false); createEditor('right', true); ```
marijnh commented 2026-02-13 08:17:50 +01:00 (Migrated from github.com)
Copy link

Thanks! Those are indeed a big improvement.

Thanks! Those are indeed a big improvement.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
codemirror/lint!18
No description provided.