Change the Theme in Jupyter Notebook

Question

I like dark themes  However  the default theme of Jupyter notebooks is light  and I can t find the option to change the theme background-color  How is this done

User · Accepted Answer

This is easy to do using the jupyter-themes package by Kyle Dunovan  You may be able to install it using conda  Otherwise  you will need to use pip  Install it with conda  conda install -c conda-forge jupyterthemes  or pip  pip install jupyterthemes  You can get the list of available themes with  jt -l  So change your theme with  jt -t theme-name  To load a theme  finally  reload the page  The docs and source code are here

User · Answer

To install the Jupyterthemes package directly with conda  use   conda install -c conda-forge jupyterthemes   Then  as others have pointed out  change the theme with jt -t  lt theme-name gt

User · Answer

My complete solution   1  Get Dark Reader on chrome which will not only get you a great Dark Theme for Jupyter but also for every single website you d like  you can play with the different filters  I use Dynamic    2  Paste those lines of code in your notebook so the legends and axes become visible   from jupyterthemes import jtplot jtplot style theme  monokai   context  notebook   ticks True  grid False    You re all set for a disco coding night

User · Answer

conda install jupyterthemes   did not worked for me in Windows  I am using Anaconda   But    pip install jupyterthemes   worked in Anaconda Prompt

User · Answer

You can do this directly from an open notebook    pip install jupyterthemes  jt -t chesterish

User · Answer

Simple  global change of Jupyter font size and inner  amp  outer background colors  this change will affect all notebooks    In Windows  find config directory by running a command  jupyter --config-dir  In Linux it is    jupyter  In this directory create subfolder custom Create file custom css and paste      Change outer background and make the notebook take all available width     container       width  99   important      background   DDC  important           Change inner background  CODE     div input area       background   F4F4E2  important      font-size  16px  important        Change global font size  CODE      CodeMirror       font-size  16px  important          Prevent the edit cell highlight box from getting clipped     important so that it also works when cell is in edit mode    div cell selected       border-left-width  1px  important       Finally - restart Jupyter  Result

User · Answer

Follow these steps Install jupyterthemes with pip  pip install jupyterthemes  Then Choose the themes from the following and set them using the following command  Once you have installed successfully  Many of us thought we need to start the jupyter server again  just refresh the page  Set the theme with the following command  jt -t  lt theme-name gt   Available themes   onedork grade3 oceans16 chesterish monokai solarizedl solarizedd  Screens of the available themes are also available in the Github repository

User · Answer

For Dark Mode Only  -  I have used Raleway Font for styling  To C  User UserName  jupyter custom custom css file  append the given styles  this is specifically for Dark Mode for jupyter notebook     This should be your current custom css file  -     This file contains any manual css for this page that needs to override the global styles      This is only required when different pages style the same element differently  This is just     a hack to deal with our current css styles and no new styling should be added in this file      ipython-main-app       position  relative      jupyter-main-app       position  relative      Content to be append starts now   header-bar       display  none      header-container img       display  none      notebook name       margin-left  0px  important      header-container       padding-left  0px  important    html  body       overflow  hidden      font-family  OpenSans      header       background-color   212121  important      color   fff      padding-top  20px      padding-bottom  50px      navbar-collapse       background-color   212121  important      color   fff      border  none  important     menus       border  none  important      color  white  important      menus  dropdown-toggle       color  white  important      filelink       color  white  important      text-align  centerimportant      padding-left  7px      text-decoration  none  important      navbar-default  navbar-nav gt  open gt a   navbar-default  navbar-nav gt  open gt a hover   navbar-default  navbar-nav gt  open gt a focus       background-color   191919  important      color   eee  important      text-align  left  important      dropdown-menu   dropdown-menu a   dropdown-submenu a       background-color   191919      color   fff  important      dropdown-menu gt li gt a hover   dropdown-menu gt li gt a focus   dropdown-submenu gt a after       background-color   212121      color   fff  important      btn-default       color   fff  important      background-color   212121  important      border  none  important      dropdown       text-align  left  important      form-control select-xs       background-color   191919  important      color   eee  important      border  none      outline  none      modal indicator       display  none      kernel indicator       color   fff      notification trusted   notification notebook       background-color   212121      color   eee  important      border  none      border-bottom  1px solid  eee      logout       background-color   191919      color   eee      maintoolbar-container       padding-top  0px  important      notebook app       background-color   222222       -webkit-scrollbar       display  none      notebook-container       background-color   212121     div cell selected  div cell selected jupyter-soft-selected       border  none  important      cm-keyword       color  orange  important      input area       background-color   212121  important      color  white  important      border  1px solid rgba 255  255  255  0 1   important      cm-def       color   5bc0de  important      cm-variable       color  yellow  important      output subarea output text output result pre   output subarea output text output stream output stdout pre       color  white  important      CodeMirror-line       color  white  important      cm-operator       color  white  important      cm-number       color  lightblue  important      inner cell       border  1px thin  eee      border-radius  50px  important      CodeMirror-lines       border-radius  20px      prompt input prompt       color   5cb85c  important      prompt output prompt       color  lightblue      cm-string       color   6872ac  important      cm-builtin       color   f0ad4e  important      run this cell       color  lightblue  important      input area       border-radius  20px      output png       background-color  white      CodeMirror-cursor       border-left  1 4px solid white      box-flex1 output subarea raw input container       color  white     input raw input       color  black  important     div output area pre       color  white    h1  h2  h3  h4  h5  h6       color  white  important      font-weight  bolder  important      CodeMirror-gutter CodeMirror-linenumber   CodeMirror-gutters       background-color   212121  important      span filename hover       color   191919  important      height  auto  important      site       background-color   191919  important      color  white  important      tabs li active a       background-color   212121  important      color  white  important      tabs li       background-color   191919  important      color  white  important      border-top  1px thin  eee      notebook list header       background-color   212121  important      color  white  important      running  panel-group  panel       background-color   212121  important      color  white  important      accordion panel-heading       background-color   212121  important      running  panel-group  panel  panel-heading       background-color   212121      color  white     item name       color  white  important      cursor  pointer  important      list item hover       background-color   212121  important      item icon icon-fixed-width       color  white  important      texteditor-backdrop       background-color   191919  important      border-top  1px solid  eee      CodeMirror       background-color   212121  important      texteditor-backdrop  texteditor-container  CodeMirror-gutter   texteditor-backdrop  texteditor-container  CodeMirror-gutters       background-color   212121  important      celltoolbar       background-color   212121  important      border  none  important

User · Answer

Instead of installing a library inside Jupyter  I would recommend you use the  Dark Reader  extension in Chrome  you can find  Dark Reader  extension in other browsers  e g  Firefox   You can play with it  filter the URL s  you want to have dark theme  or even how define the Dark theme for yourself  Below are couple of examples    I hope it helps

User · Answer

After I changed the theme it behaved strangely  The font size was small  cannot see the toolbar and I really didn t like the new look   For those who want to restore the original theme  you can do it as follows    jt -r   You need to restart Jupyter the first time you do it and later refresh is enough to enable the new theme   or directly from inside the notebook   jt -r

User · Answer

You Can Follow These Steps    pip install jupyterthemes or pip install --upgrade jupyterthemes to upgrade to latest version of theme  after that to list all the themes you have  jt -l after that jt-t  lt themename gt for example jt -t solarizedl

[themes] Change the Theme in Jupyter Notebook?

Examples related to themes

Examples related to editor

Examples related to jupyter-notebook