# JupyterLab Themes (CSS/JS)

**URL:** <https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799>\
**Category:** extensions\
**Tags:** how-to\
**Created:** [February 3, 2021, 7:58pm UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799 "2021-02-03T19:58:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![avikravi](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/avikravi/32/3659_2.png) [@avikravi](https://discourse.jupyter.org/u/avikravi)\
**Post date:** [February 3, 2021, 7:58pm UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/1 "2021-02-03T19:58:43Z")

</div>

I’ve created a custom JupyerLab theme.  
I would like to hide my JavaScript code.  
I have been able to hide my CSS.

Any tips to doing this? Thanks.

---

<div class="post-metadata">

**Author:** ![lodka](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/lodka/32/3479_2.png) [@lodka](https://discourse.jupyter.org/u/lodka)\
**Post date:** [February 3, 2021, 8:09pm UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/2 "2021-02-03T20:09:42Z")

</div>

Can you please define the word “hide”?

---

<div class="post-metadata">

**Author:** ![avikravi](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/avikravi/32/3659_2.png) [@avikravi](https://discourse.jupyter.org/u/avikravi)\
**Post date:** [February 3, 2021, 9:31pm UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/3 "2021-02-03T21:31:46Z")

</div>

![Screen Shot 2021-02-03 at 3.29.34 PM](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/4/47ed22d148f0c6d9cb59424722bcbf4311802c7b.png)

This is my Javascript code. I’m having to put it at the top of the notebook for the notebook to utilize this code.

I would like to “hide” it in a JupyterLab theme development, so that when a user joins they don’t have to see/run the JavaScript at the top of the notebook for it to work.

Thanks in advance @lodka

---

<div class="post-metadata">

**Author:** ![lodka](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/lodka/32/3479_2.png) [@lodka](https://discourse.jupyter.org/u/lodka)\
**Post date:** [February 4, 2021, 8:14am UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/4 "2021-02-04T08:14:17Z")

</div>

The best way to implement a theme is to make a theme extension and [publish it to npm](https://jupyterlab.readthedocs.io/en/stable/extension/extension_tutorial.html#publishing-your-extension). Such as this one [GitHub - oriolmirosa/jupyterlab\_materialdarker: The Material Darker theme for JupyterLab](https://github.com/oriolmirosa/jupyterlab_materialdarker). In that way, all js and css code will be hidden and you can switch between themes easily via Settings → Jupyterlab Theme.  
I’m not sure that there is any other way to hide js code.

---

<div class="post-metadata">

**Author:** ![avikravi](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/avikravi/32/3659_2.png) [@avikravi](https://discourse.jupyter.org/u/avikravi)\
**Post date:** [February 4, 2021, 6:51pm UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/5 "2021-02-04T18:51:47Z")

</div>

@lodka than you for the info will take a look

We are creating a theme and publishing to pip  
It just becomes a pure python package.

But I might look to that theme to see if it has some custom JS.

The ability to create pip installable extensions only started with JL 3.0 which was just released, hence a lack of docs.

---

<div class="post-metadata">

**Author:** ![bollwyvl](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/bollwyvl/32/904_2.png) [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)\
**Post date:** [February 5, 2021, 1:36am UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/6 "2021-02-05T01:36:54Z")

</div>

Right. And the quickest road to a theme package is the [theme-cookiecutter](https://github.com/jupyterlab/theme-cookiecutter), though having a good gander at the [official docs](https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html#extension-developer-guide) is always a good idea!

With Lab 3 federated modules, there are a few [pointy bits around fonts](https://github.com/jupyterlab/theme-cookiecutter/issues/20), but it pretty much works, and you’ve got the [webpackConfig](https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html#webpackconfig) escape hatch if you really get into.

Here’s [a new theme i made this week](https://github.com/gt-coar/jupyterlab-gt-coar-theme) for reference… it was hand-made, not using the cookiecutter, but was informed by some of the stuff the cookiecutter does for lab3. It also shows a relatively light-weight way to make it use the theme by default. One relatively neat thing it does (currently in PR) is stack up a light and dark theme in the same CSS, reusing a common set of upstream design variables. Not recommended for the faint of heart!

---

<div class="post-metadata">

**Author:** ![avikravi](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/avikravi/32/3659_2.png) [@avikravi](https://discourse.jupyter.org/u/avikravi)\
**Post date:** [February 5, 2021, 4:00am UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/7 "2021-02-05T04:00:57Z")

</div>

@bollwyvl awesome thanks. will look into this

Ya im using cookiecutter which is helping me with the CSS. but there really isnt documentation for JS.  
If you have more documentation about this please send!!!  
Thanks.

---

<div class="post-metadata">

**Author:** ![avikravi](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/avikravi/32/3659_2.png) [@avikravi](https://discourse.jupyter.org/u/avikravi)\
**Post date:** [February 5, 2021, 4:06am UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/8 "2021-02-05T04:06:26Z")

</div>

@bollwyvl cookie cutter was GREAT by the way for css … again if you have anything specific to JS and how to implement that would be awesome.

thanks.

---

<div class="post-metadata">

**Author:** ![bollwyvl](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/bollwyvl/32/904_2.png) [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)\
**Post date:** [February 5, 2021, 4:44am UTC](https://discourse.jupyter.org/t/jupyterlab-themes-css-js/7799/9 "2021-02-05T04:44:46Z")

</div>

> anything specific to JS

That would be the official docs linked above.

> how to implement

We still dont’ really know what you’re trying to do. Your best bet is to do a thorough read-through of the extension developer guide, do one of the tutorials, then start looking into other repos (like the [extension-examples](https://github.com/jupyterlab/extension-examples) that are _like_ what you want, and then steal all of that (with attribution, of course).