How to change cursor color in Jupyterhub->Jupyterlab

JupyterLab
1

Hello,

I have a Jupyterlab running on top of Jupyterhub installation.

I really love how UI colors look like with Dark Theme + Dark Reader on top.

However, the cursor color is being replaced with dark grey, which makes it almost invisible on the default black background.

Is there a way to change the cursor color? If it is set to color other than white, then Dark Reader may ignore it. Also I have a CSS extension that can change the CSS on the fly, but nothing along the lines of

.cm-cursor {
    border-left: 2px solid blue; !important;
}

or changing .cm-cursor to .CodeMirror-cursor or div.CodeMirror-cursor worked.

2

I think you may have more luck with overriding --jp-editor-cursor-color and --jp-code-cursor-width0 CSS variables. I tried setting:

body {
    --jp-editor-cursor-color: red;
    --jp-code-cursor-width0: 5px;
}

in Chrome inspector and this gave me:

Screenshot from 2024-07-13 15-18-38

2 Likes
3

Wow, this has actually worked. Thank you so much!

4

Also, to make cursor stand out even with Dark Reader activated, one can add an entry to its Dev Tools → Inversion Fix Editor, like:

================================

your-jupyter-server-ip

NO INVERT
body
.jp-editor-cursor

================================
1 Like
5

add an entry to its Dev Tools → Inversion Fix Editor

Although this topic is marked as solved, I am posting because I am not sure where to find the ‘Dev Tools’. I want to make the parentheses/brackets/curly brackets matching cursors stand out in a dark theme.

6

I want to make the parentheses/brackets/curly brackets matching cursors stand out in a dark theme.

Does the default theme need changing? If so it might be better to open an issue on JupyterLab GitHub.

Otherwise, for adjusting styling I would recommend using custom.css, see Interface Customization — JupyterLab 4.4.0b0 documentation

1 Like