Blinking cursor (almost) not viewable in edit boxes since 1.14 #7260

Closed
opened 2025-11-02 07:21:08 -06:00 by GiteaMirror · 6 comments
Owner

Originally created by @42wim on GitHub (Apr 27, 2021).

  • Gitea version (or commit ref): 1.14

Description

I'm using Chrome or Edge with forced dark mode (chrome://flags/#enable-force-dark) with the arc-green theme.

Blinking cursor is almost invisible in 1.14 it's a very faint cursor (1pixel?) it's fine in 1.13.
This only happens in the edit boxes with the editor, the cursor in the title of the issues etc is ok.

Devtools show it's in the CodeMirror-scroll element.

Screenshots

1.14

If you squint you can see it ;-)

image

1.13

image

Originally created by @42wim on GitHub (Apr 27, 2021). - Gitea version (or commit ref): 1.14 ## Description I'm using Chrome or Edge with forced dark mode (`chrome://flags/#enable-force-dark`) with the arc-green theme. Blinking cursor is almost invisible in 1.14 it's a very faint cursor (1pixel?) it's fine in 1.13. This only happens in the edit boxes with the editor, the cursor in the title of the issues etc is ok. Devtools show it's in the `CodeMirror-scroll` element. ## Screenshots ### 1.14 If you squint you can see it ;-) ![image](https://user-images.githubusercontent.com/1810977/116313210-c0289d00-a7ad-11eb-9330-48baf0a819a6.png) ### 1.13 ![image](https://user-images.githubusercontent.com/1810977/116312839-485a7280-a7ad-11eb-9f96-4f1f66262507.png)
GiteaMirror added the topic/ui label 2025-11-02 07:21:08 -06:00
Author
Owner

@silverwind commented on GitHub (Apr 28, 2021):

Must be something in your setup but try this CSS:

.CodeMirror-cursor {
  border-color: var(--color-text) !important;
}
@silverwind commented on GitHub (Apr 28, 2021): Must be something in your setup but try this CSS: ```css .CodeMirror-cursor { border-color: var(--color-text) !important; }
Author
Owner

@42wim commented on GitHub (Apr 28, 2021):

How can I add/try this?

I tried to add it in Styles in chrome dev-tools doesn't work, after I add it, press enter and focus again on the page it disappears in the dev-tools. (modifying other stuff works though).

Also the setup above is from running a fresh install of the gitea/gitea:1.13 and gitea/gitea:1.14 from dockerhub just setting the theme to arc-green. Both running in the same browser just in two different tabs.

This happens only when the chrome://flags/#enable-force-dark is enabled, otherwise it works fine.
image

@42wim commented on GitHub (Apr 28, 2021): How can I add/try this? I tried to add it in Styles in chrome dev-tools doesn't work, after I add it, press enter and focus again on the page it disappears in the dev-tools. (modifying other stuff works though). Also the setup above is from running a fresh install of the `gitea/gitea:1.13` and `gitea/gitea:1.14` from dockerhub just setting the theme to `arc-green`. Both running in the same browser just in two different tabs. This happens only when the `chrome://flags/#enable-force-dark` is enabled, otherwise it works fine. ![image](https://user-images.githubusercontent.com/1810977/116375310-740e4480-a80f-11eb-96b4-2272746f0d30.png)
Author
Owner

@silverwind commented on GitHub (Apr 28, 2021):

In Chrome, you can probably go to the Sources tab, select any css file and paste the code there.

That force dark mode setting can not detect Codemirror's fake cursors (which actually are borders), so that's why it's misbehaving. I'm not sure if our CSS is enough to overrule that mechanism. I'd generally recommend against it as we already implement a dark theme.

BTW this is another issue we would not face with a regular text area, e.g. https://github.com/go-gitea/gitea/issues/10729 / https://github.com/go-gitea/gitea/pull/15394 :)

@silverwind commented on GitHub (Apr 28, 2021): In Chrome, you can probably go to the Sources tab, select any css file and paste the code there. That force dark mode setting can not detect Codemirror's fake cursors (which actually are borders), so that's why it's misbehaving. I'm not sure if our CSS is enough to overrule that mechanism. I'd generally recommend against it as we already implement a dark theme. BTW this is another issue we would not face with a regular text area, e.g. https://github.com/go-gitea/gitea/issues/10729 / https://github.com/go-gitea/gitea/pull/15394 :)
Author
Owner

@42wim commented on GitHub (Apr 28, 2021):

ok, thanks, it worked by pasting it into the theme-arc-green.css in the sources tab, it now shows the same behaviour as in 1.13 :)

Is this something that can be fixed in 1.14 ? or if not do you know which commits changed it so that I can revert it for myself :)

It's not possible with chrome to disable the "forced dark mode" only for one site, it's an all or nothing option :(

@42wim commented on GitHub (Apr 28, 2021): ok, thanks, it worked by pasting it into the `theme-arc-green.css` in the sources tab, it now shows the same behaviour as in 1.13 :) Is this something that can be fixed in 1.14 ? or if not do you know which commits changed it so that I can revert it for myself :) It's not possible with chrome to disable the "forced dark mode" only for one site, it's an all or nothing option :(
Author
Owner

@silverwind commented on GitHub (Apr 28, 2021):

Will file a PR later.

@silverwind commented on GitHub (Apr 28, 2021): Will file a PR later.
Author
Owner

@silverwind commented on GitHub (Apr 28, 2021):

https://github.com/go-gitea/gitea/pull/15651

@silverwind commented on GitHub (Apr 28, 2021): https://github.com/go-gitea/gitea/pull/15651
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/gitea#7260