Skip to content

React to system light/dark theme#292

Open
plp13 wants to merge 1 commit intovarkor:masterfrom
plp13:master
Open

React to system light/dark theme#292
plp13 wants to merge 1 commit intovarkor:masterfrom
plp13:master

Conversation

@plp13
Copy link

@plp13 plp13 commented Oct 2, 2025

It would be good if quiver could adapt to the user's chosen color theme (light/dark). I've made some modifications to main.css and ui.mjs to do just that.

Here's the result:

quiver-react-to-system-theme.mp4

@varkor
Copy link
Owner

varkor commented Feb 14, 2026

Sorry, I've been very busy and haven't had time to review pull requests. I appreciate the desire for a dark mode. However, I think it will take more work to make it look nice. For instance, black vertices and edges on a dark background are hard to see. I'm not quite sure what to do about this: the default could be to draw the vertices and edges as a light grey instead, but this should not be reflected in the TeX output, which might be confusing. I think a good solution for this problem needs to be found before I would be happy to merge such a pull request.

MAXIMUM_CELL_LEVEL: 4,
/// The width of the dashed grid lines.
GRID_BORDER_WIDTH: 2,
GRID_BORDER_WIDTH: 1,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reason for this change?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @varkor,

Of course I realise that a mostly black diagram would be difficult to see against a dark background. This is actually the reason I changed the grid width down to 1px: a thick white grid against a dark background would pop out too much, and the diagram would be lost.

I'm not sure if changing the default colour for vertices and edges when in dark mode is a good idea. Like you said, it would be confusing. What if we instead make the background a bit lighter, and the grid lines a bit darker? Would that be acceptable to you?

@plp13
Copy link
Author

plp13 commented Feb 17, 2026

Setting --theme-background: hsla(0, 0%, 38%); and const BORDER_COLOUR = "grey"; results in this:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants