Dark Theme support

[jancr]

Summary

when I use a dark theme from https://github.com/dunovank/jupyter-themes everything looks awesome except for the active cell because jupyter-vim changes the cells background to yellow/pinkish depending on mode, which makes my wite text very hard to read

Environment

Not relavant, this is a CSS issue

Behavior

Assumes white background and changes to a mild shade of yellow/pink

Expected

Change color from black to darkblue/darkgray

Actual

Changes background from black to pink/yellow

Step by step procedure

install dependencies

pip3 install jupyter_contrib_nbextensions
pip3 install --upgrade jupyterthemes

mkdir -p $(jupyter --data-dir)/nbextensions
cd $(jupyter --data-dir)/nbextensions
git clone https://github.com/lambdalisue/jupyter-vim-binding vim_binding
chmod -R go-w vim_binding

enable theme

jupyter nbextension enable vim_binding/vim_binding
jt -t onedork

start server

ipython3 notebook

then activate a cell

What you have done to solve the issue

changed vim_bindings.css as follows

/* Jupyter cell is in normal mode when code mirror */
.edit_mode .cell.selected .CodeMirror-focused.cm-fat-cursor {
  /* background-color: #F5F6EB; */
  background-color: rgba(220, 220, 150, 0.04); 
}
/* Jupyter cell is in insert mode when code mirror */
.edit_mode .cell.selected .CodeMirror-focused:not(.cm-fat-cursor) {
  /* background-color: #F6EBF1; */
  background-color: rgba(220, 150, 220, 0.04); 
}

This gives almost the normal effect when using white color scheme, but creates a much smaller perturbation with dark color schemes. There are probably better solutions, but I am no CSS wizard!, alternatively one could implement a flag ala

--theme [dark/light/none]

and then symlink to a corresponding CSS file

Remarks

[LoLei]

:+1: Worked for me

[Joedang]

Help for future people:
I had to use hex colors.
rgba(220, 150, 220, 0.04) did not work for me.
I had to do #000. (This is also a different color.)

[Jerror]

dunovank added a "-vim" option to jupyterthemes for compatibility with this plugin which makes the appropriate change to vim_bindings.css on theme install (see https://github.com/dunovank/jupyter-themes/issues/41). Instead of jt -t onedork try jt -t onedork -vim. Works great for me!

[lambdalisue]

Cool. Thanks for the note. I close this 👍