yeebc / jupyterlab-neon-theme

A flat, 80's neon inspired theme for JupyterLab.

Jupyterlab Neon Theme

A flat, 80's neon inspired theme for JupyterLab.

This theme is hightly inspired by artworks of 80's Neon, Synthwave and Cyberpunk. It is optimized for long-term use but colorful and cooool.

Big update

There is a big update for the color scheme since version 3.0.0. If you are old users and don't like the new style, please find the archive here. However, unfortunately it would not be maintained anymore.

Bonuses

1. Search tool * Neon billboard

2. Collapser * Neon light

3. Scrollbar * FM-84's "Atlas" (only compatible with webKit browsers)

4. Presentation mode (Top menu --> View --> Presention mode)

Customize

You may don't like the default background or the transparent UI, so codes concerning these controversial designs are separately put into custom.css and detailly commented for you to customize.

After you edited css files, please follow instructions in the Development installation to reinstall.

1. Transparent left/top bar

PLease follow the comments to ajust the transparency.

2. Background

Two gradient backgrounds, 'Neon Night' and 'Neon Sunset', are provided. The default style is 'Neon Night' and you can uncomment codes to employ 'Neon Sunset' style.

To use an image as background, uncomment the corresponding part of codes, and change the url to the path of your image.

3. Fonts

To change fonts of editor and neon, firstly, add your font files to fonts directory and update fonts.css to register them. Then follow my comments to employ your registered fonts.

Compatibility

To support gradient scrollbars showed in screenshots, webKit browsers like chrome are required. Otherwise, please activate the Theme Scrollbars in the Top menu --> Settings --> JupyterLab Theme for dark scrollbars (except Edge). This color scheme is primarily designed for python and ipynb, so there may be issues in other situations. If any problem you find, please report it to me in the Github and I'll try to fix it as soon as possible.

Prerequisites

• JupyterLab >= 3.0.0

This theme is an extension of Jupyterlab. In order to install JupyterLab extensions, you need to have Node.js installed and enable the Extension Manager which is disabled by default. More information can be found in the Official User Guide.

conda install -c conda-forge nodejs

Package installation

• Using GUI

You can use the extension manager to find and install this theme for JupyterLab. Please check Official User Guide for detailed instructions.

• Using the command

jupyter labextension install @yeebc/jupyterlab_neon_theme

Development installation

For a development install (requires npm version 4 or later), clone this github repo and do the following in the repository directory:

npm install
jupyter labextension link .

To rebuild the package and the JupyterLab app:

npm run build
jupyter lab build

Contributing

I welcome any contribution to this theme. You can get more imfomation about the project structure of JupyterLab theme extensions from Official Document.

Thanks

You may also like SynthWave '84, my favorite VS Code theme, with similar style and it is more compatible with HTML & CSS, JS.

And Welcome to 1984.

jupyterlab-neon-theme's Issues

Jupyter lab saying this extension does not support >=3.0

Tried running the install and got the following response:

Am I just doing something wrong? (New to jupyter lab)

Theme is applied to JupyterLab's UI even when it is not the selected theme

I have a different theme selected at the moment, however jupyterlab_neon_theme is still styling UI elements

Python 3.9.6
Node v16.5.0

More explicit guide for installation

Hello, your theme is great !

I have a suggestion concerning the installation guide in the readme. Maybe you can mention that it is installable also from the "extensions" left pane bar in jupyterlab, which is very convenient.

Besides, the node.js/npm installation part is a little bit confusing, since installing node.js installs automatically npm (from what I've understand).

Maybe we could replace the installation code by :

pip install nodejs
jupyter labextension install @yeebc/jupyterlab_neon_theme

or with conda

conda install -c conda-forge nodejs
jupyter labextension install @yeebc/jupyterlab_neon_theme

And mention, with a screenshot, the fact that you can install it from left pane.

Kind regards, thanks again for the awesome theme ! 💯

Syntax coloring for Python scripts does not comply with the Neon-themed notebooks

I like Neon Theme for notebooks, and my eyes have gotten used to it. Refactoring a notebook and moving functions to Python scripts, I see a different syntax coloring in scripts, though.

This is important for people who often use Python scripts along with notebooks.

Breaks other themes

When installed this theme affects other themes (incl. default Light and Dark theme) and loading screen. I assume it overrides something globally.

Error on building

Jupyterlab Version 2.2.8

Run: !jupyter labextension install @yeebc/jupyterlab_neon_theme

"@yeebc/jupyterlab_neon_theme changed from file:../extensions/yeebc-jupyterlab_neon_theme-2.0.0.tgz to file:../extensions/yeebc-jupyterlab_neon_theme-2.0.1.tgz"

Theme does not support latest version of Jupyter Lab

ValueError: The extension "@yeebc/jupyterlab_neon_theme" does not yet support the current version of JupyterLab.


Conflicting Dependencies:
JupyterLab              Extension      Package
>=3.0.3 <3.1.0          >=2.0.0 <3.0.0 @jupyterlab/application
>=3.0.2 <3.1.0          >=2.0.0 <3.0.0 @jupyterlab/apputils

My jupyter lab version is 3.0.5

Awesome theme !!!!

Wow!! What a cool theme! I just had to give praise for this super cool theme..

• Thanks..

feel free to delete this issue...

Issues with JLab 3

if you hit jupyterlab/theme-cookiecutter#20 check out timkpaine/jupyterlab_miami_nights#7 for a potential fix, basically I Webpack the styles and inline the fonts

Last line of cell gets hidden

The lower part of last line of cell gets hidden for some reason. Kindly look into it. Attaching screenshot.

Vim-Keybindings Cursor is always a Bar

When using the vim-keybindings plugin, from @axlair/jupyterlab_vim, usually when you're in normal mode (while editing a cell), the cursor is supposed to be a box (like in a normal terminal) highlighting the character you're on. But when using this theme, it turns it into a bar, and I have no idea whether I'm in normal mode or in insert mode

Can you guys make this theme for VS Code?

Enable Neon Dreams

I've implemented Neon Dreams glow, is this something you'd want as part of this library or should I make a separate theme?