various themes' activeLine selections not visible

1

I’ve been looking around for themes, and I’ve noticed that many themes have the issue I described here:

2

Opaque line backgrounds never worked. Those themes seem to just be broken and need to be changed.

3

This is a problem with themes from other packages too, like from @uiw scope on npm.

Did they perhaps inherit something from porting from CM 5? Wondering why they seem to be oblivious to the fact their themes are broken (and these are like the only CM 6 themes that I can find, so if they’re all broken, pretty much then there are no CM 6 themes)

4

@vadim are you Vadim Demedes who maintains thememirror?

5

@jaywcjlove hello! You are the maintainer of @uiw codemirror themes. Can we see about getting the themes fixed? :point_up_2:

@marijn what’s the solution? All .activeLine background colors need to have transparency (alpha less than 1, maybe around 0.4)?

6

Hi, no, it’s not me :grinning:

7

Yes. Generally all backgrounds you use in decorations should be highly transparent, so that layers behind them aren’t hidden.

8

Yes, here’s a practice. I exported the noctisLilac theme, which had a bug where the highlight of the current line overwrote the highlight of the selected line. Fix this by changing the value of lineHighlight to ‘rgba(225,222,243,0.4)’.

export const noctisLilac = createTheme({
	variant: 'light',
	settings: {
		background: '#f2f1f8',
		foreground: '#0c006b',
		caret: '#5c49e9',
		selection: '#d5d1f2',
		gutterBackground: '#f2f1f8',
		gutterForeground: '#0c006b70',
		// lineHighlight: '#e1def3',
        // The following line has been modified
		lineHighlight: 'rgba(225,222,243,0.4)',
	},
...
}