Changer le thème dans Jupyter Notebook?

205

J'aime les thèmes sombres. Cependant, le thème par défaut des blocs-notes Jupyter est léger et je ne trouve pas l'option pour changer le thème / la couleur d'arrière-plan. Comment cela se fait-il?

Moby Khan
la source
3
en utilisant conda: anaconda.org/conda-forge/jupyterthemes
Bigby

Réponses:

287

C'est facile à faire en utilisant le jupyter-themespackage de Kyle Dunovan. Vous pourrez peut-être l'installer en utilisant conda. Sinon, vous devrez utiliser pip.

Installez-le avec conda:

conda install jupyterthemes

ou pip

pip install jupyterthemes

Puis changez de thème avec

jt -t chesterish

Pour charger le thème chesterish ou tout autre. Enfin, rechargez la page. La documentation et le code source sont ici: https://github.com/dunovank/jupyter-themes

Aaron
la source
29
Remarque - J'ai dû redémarrer le serveur jupyter pour que cela fonctionne.
Amir F
9
Pour la première fois, vous devrez peut- être redémarrer le jupyter notebookpour que cela fonctionne, mais la prochaine fois, changez simplement jt -t <themes>le terminal et rechargez les pages du cahier. Il se comporte quelque chose comme ça pour moi.
iNet
10
jupyterthemesn'est pas sur conda ni sur conda-forge, le seul moyen de l'installer est par le biais pipuniquement
Mohammad Hizzani
13
J'ai réussi avec conda après avoir ajouté le canal conda-forge conda config --add channels conda-forge
Ernest
11
Si jupyterthemesest sur conda-forge, la réponse devrait soit dire que conda install jupyterthemes -c conda-forgec'est nécessaire, soit renoncer à conseiller d'installer avec conda.
mmagnuski
92

Suivez ces étapes:-

pip installez les thèmes.

pip install jupyterthemes

Ensuite, choisissez les thèmes parmi les suivants et définissez-les à l'aide de la commande suivante, Une fois que vous avez installé avec succès, beaucoup d'entre nous ont pensé que nous devions redémarrer le serveur jupyter, il suffit de rafraîchir la page. Définissez le thème par.

jt -t <theme-name>

Liste des noms de thèmes

  • onedork
  • grade3
  • océans16
  • chesterish
  • monokai
  • solarisé
  • solarisé
Sahil Nagpal
la source
1
énuméré deux choses: 1. Discripency contre le démarrage du serveur jupyter. 2. Thème conjonctions / nom
Sahil Nagpal
7
Cela ne justifie pas vraiment une nouvelle réponse. Juste une modification mineure à celle existante.
Jean-François Corbett
5
Il existe également une extension chrome pour cela . Il fait essentiellement la même chose mais sans interaction avec le terminal.
iNet
2
quel est le nom du thème classique? Si je veux revenir et revenir à l'original classique?
ZelelB
3
Par souci d'exhaustivité, autres que les thèmes listés, ces 2 sont également disponibles: gruvboxd, gruvboxl à partir de janvier 2019
subtleseeker
51

Après avoir changé le thème, il s'est comporté étrangement. La taille de la police était petite, je ne peux pas voir la barre d'outils et je n'ai vraiment pas aimé le nouveau look.

Pour ceux qui souhaitent restaurer le thème d'origine, vous pouvez le faire comme suit:

jt -r

Vous devez redémarrer Jupyter la première fois que vous le faites et une actualisation ultérieure suffit pour activer le nouveau thème.

ou directement depuis l'intérieur du notebook

!jt -r
Natheer Alabsi
la source
4
Félicitations pour la façon de restaurer le thème original
Briford Wylie
28

Vous pouvez le faire directement à partir d'un bloc-notes ouvert:

!pip install jupyterthemes
!jt -t chesterish
Amir F
la source
ne devez-vous pas redémarrer le serveur jupyter pour que cela prenne effet?
drevicko
Certes, vous devrez redémarrer le noyau si je me souviens bien
Amir F
20

Au lieu d'installer une bibliothèque dans Jupyter, je vous recommanderais d'utiliser l'extension 'Dark Reader' - https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh dans Chrome (vous pouvez trouver l'extension 'Dark Reader' dans d'autres navigateurs, par exemple Firefox). Vous pouvez jouer avec; filtrez les URL pour lesquelles vous souhaitez avoir un thème sombre, ou même comment définir le thème sombre pour vous-même. Voici quelques exemples:

entrez la description de l'image ici

entrez la description de l'image ici

J'espère que cela aide. Behrouz

Behrouz Beheshti
la source
Je pense que c'est la meilleure approche, car nous voulons généralement un thème sombre qu'il fournit et de plus, il est facile de vérifier le visuel réel du document que nous créons uniquement en un clic. (important au moment de la publication)
M. Doosti Lakhani
Ouais ... c'est bien beau mais le Dark Reader ne sait pas qu'un notebook jupyter doit colorer les mots. Il n'y a pas de coloration de syntaxe, ce qui fait de cette option un non-non.
darlove
@darlove, Pour autant que j'aie travaillé avec, il y a une 'coloration syntaxique' là-bas (par exemple, une syntaxe 'boucle for' a la même couleur dans tout votre code.
Behrouz Beheshti
Je ne sais pas pour vous, mais le lecteur sombre met en évidence ma syntaxe très bien. Cette extension est aussi une bouée de sauvetage ..... enfin quelque chose qui peut même rendre Stack Overflow sombre!
Natalie
1
Il y a cependant un problème. Si vous essayez de sélectionner quelques caractères à l'aide de la souris, la sélection n'est pas visible sur le fond noir.
kaushalpranav
7

Pour installer le package Jupyterthemes directement avec conda, utilisez:

conda install -c conda-forge jupyterthemes

Ensuite, comme d'autres l'ont souligné, changez le thème avec jt -t <theme-name>

en chemin
la source
6

Changement simple et global de la taille de la police Jupyter et des couleurs d'arrière-plan intérieur et extérieur (ce changement affectera tous les blocs-notes).

Sous Windows, recherchez le répertoire de configuration en exécutant une commande: jupyter --config-dir

Sous Linux, c'est ~/.jupyter

Dans ce répertoire, créez un sous-dossier custom Créez un fichier custom.csset collez:

/* 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;
} 

Enfin, redémarrez Jupyter. Résultat:

arrière-plans plus sombres

rafal chlopek
la source
S'il vous plaît, comment l'annuler?
Aminu Kano
1
Supprimez le fichier que vous avez créé (custom.css) et redémarrez Jupyter.
rafal chlopek le
Cela fonctionne, mais je dois effacer le cache de mon navigateur.
Aminu Kano le
5

Vous pouvez suivre ces étapes.

  1. pip install jupyterthemesou pip install --upgrade jupyterthemespour passer à la dernière version du thème.
  2. après cela pour lister tous les thèmes que vous avez:jt -l
  3. après ça jt-t <themename>par exemplejt -t solarizedl
Devesh
la source
4
conda install jupyterthemes

n'a pas fonctionné pour moi dans Windows. J'utilise Anaconda.

Mais,

pip install jupyterthemes

a travaillé dans Anaconda Prompt.

Ceyhun
la source
7
Vous devez spécifier la bonne collection pour conda:conda install -c conda-forge jupyterthemes
Philip Roland Jarnhus
2

Ma solution complète:

1) Obtenez Dark Reader sur chrome qui vous donnera non seulement un excellent thème sombre pour Jupyter, mais aussi pour chaque site Web que vous souhaitez (vous pouvez jouer avec les différents filtres. J'utilise Dynamic).

2) Collez ces lignes de code dans votre cahier pour que les légendes et les axes deviennent visibles:

from jupyterthemes import jtplot
jtplot.style(theme='monokai', context='notebook', ticks=True, grid=False)

Vous êtes prêt pour une soirée de codage disco!

VideoPac
la source
1

Pour le mode sombre uniquement: -

J'ai utilisé la police Raleway pour le style

Vers le fichier C: \ User \ UserName \ .jupyter \ custom \ custom.css

ajoutez les styles donnés, ceci est spécifiquement pour le mode sombre pour le notebook jupyter ...

Cela devrait être votre fichier custom.css actuel: -

/* 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;
}

Le contenu à ajouter commence maintenant

.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>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>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>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu>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;
}

Mode sombre pour le notebook Jupyter

Mode sombre pour le notebook Jupyter

Sarthak Singhal
la source