Jupyter Notebookのテーマを変更しますか?


回答:


282

これはjupyter-themes、Kyle Dunovanによるパッケージを使用して簡単に実行できます。を使用してインストールできる場合がありますconda。それ以外の場合は、を使用する必要がありますpip

condaでインストールします。

conda install jupyterthemes

またはピップ

pip install jupyterthemes

次に、テーマを変更します

jt -t chesterish

チェスター風のテーマまたはその他をロードします。最後に、ページをリロードします。ドキュメントとソースコードはこちら:https : //github.com/dunovank/jupyter-themes


29
注-これを機能させるには、jupyterサーバーを再起動する必要がありました。
アミールF

9
これを機能させるには、初めてを再起動する必要があるかもしれませんjupyter notebook、次回は、単にjt -t <themes>ターミナルを変更してノートブックのページをリロードするだけです。それは私にはこのような動作をします。
iNet

10
jupyterthemescondaにどちらconda鍛造ではありませんが、それをインストールする唯一の方法は、経由でpipのみ
ムハンマド・Hizzani

13
conda-forgeチャネルを追加した後、私はcondaで成功しました conda config --add channels conda-forge
Ernest

11
jupyterthemesがconda-forgeにある場合、答えは、それconda install jupyterthemes -c conda-forgeが必要であるか、condaでのインストールを勧めるのをやめるかです。
mmagnuski 2018

90

次の手順を実行します:-

テーマをpipインストールします。

pip install jupyterthemes

次に、以下からテーマを選択し、次のコマンドを使用してそれらを設定します。インストールに成功したら、多くの人がjupyterサーバーを再起動する必要があると考え、ページを更新します。テーマを設定します。

jt -t <theme-name>

テーマ名一覧

  • Onedork
  • grade3
  • 海16
  • チェスター
  • ものかい
  • ソラリゼーション
  • ソラリゼーション

1
2つのことをリストしました。1. jupyterサーバーの起動に対する不一致。2.テーマの接続詞/名前
Sahil Nagpal、2018年

7
これは本当に新しい答えを保証するものではありません。既存のものを少し編集するだけです。
ジャン=フランソワ・コルベット

5
このためのchrome拡張もあります。基本的に同じことを行いますが、端末との対話はありません。
iNet

2
クラシックテーマの名前は何ですか?元に戻して元のクラシックに戻すにはどうすればよいですか?
ZelelB

3
完全を期すために、リストされたテーマ以外に、次の2つも使用できます:gruvboxd、gruvboxl 2019
現在

49

テーマを変更した後、奇妙な動作をしました。フォントサイズが小さく、ツールバーが表示されないため、新しいデザインが気に入らなかった。

元のテーマを復元したい場合は、次のように実行できます。

jt -r

Jupyterは最初に再起動する必要があり、後で更新するだけで新しいテーマを有効にできます。

または直接ノートブックの内側から

!jt -r

4
元のテーマを復元する方法の
称賛

28

これは、開いているノートブックから直接実行できます。

!pip install jupyterthemes
!jt -t chesterish

これを有効にするためにjupyterサーバーを再起動する必要はありませんか?
drevicko

確かに、私が正しく思い出した場合は、カーネルを再起動する必要があります
Amir F

20

代わりにJupyter内部のライブラリをインストールするので、私はあなたが「ダークリーダー」EXTENSION-使用をお勧めしますhttps://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieehあなたは見つけることができます(「ダークリーダー」の拡張子をChromeでのFirefoxなどの他のブラウザ)。あなたはそれで遊ぶことができます。ダークテーマを設定するURLをフィルタリングするか、ダークテーマを自分で定義する方法を選択します。以下に例をいくつか示します。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

お役に立てば幸いです。ベールーズ


私は通常、これが提供する暗いテーマを必要とし、さらに、クリックするだけで作成しているドキュメントの実際のビジュアルを簡単に確認できるため、これが最良のアプローチだと思います。(公開時に重要)
M. Doosti Lakhani

ええ...それはすべてうまくいっていますが、Dark Readerはjupyterノートブックが単語を着色する必要があることを知りません。構文の色分けがないため、このオプションは使用できません。
darlove

。@darloveは、私の知る限りはそれで働いていると、そこに(例えばA構文、コード全体で同じ色を持っている「forループ」が「着色構文」はある
Behrouz Beheshti

あなたのことは知りませんが、Dark Readerは私の構文をうまく強調しています。また、この拡張機能は命の恩人です...最終的にはスタックオーバーフローを暗くすることさえできるものです!
is-math-related-to-science

1
ただし、問題が1つあります。マウスを使用していくつかの文字を選択しようとすると、選択範囲が黒い背景に表示されません。
kaushalpranav

7

Judaterthemesパッケージをcondaで直接インストールするには、次のコマンドを使用します。

conda install -c conda-forge jupyterthemes

次に、他の人が指摘したように、テーマを jt -t <theme-name>


6

Jupyterのフォントサイズと内部および外部の背景色のシンプルでグローバルな変更(この変更はすべてのノートブックに影響します)。

Windowsでは、次のコマンドを実行してconfigディレクトリを見つけます。 jupyter --config-dir

Linuxでは ~/.jupyter

このディレクトリにサブフォルダをcustom 作成し、ファイルcustom.cssを作成して貼り付けます。

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

最後に-Jupyterを再起動します。結果:

暗い背景


元に戻す方法は?
加納

1
作成したファイル(custom.css)を削除し、Jupyterを再起動します。
rafal chlopek

動作しますが、ブラウザのキャッシュをクリアする必要があります。
加納あみの

5

次の手順に従ってください。

  1. pip install jupyterthemesまたはpip install --upgrade jupyterthemesテーマの最新バージョンにアップグレードします。
  2. その後、あなたが持っているすべてのテーマを一覧表示します:jt -l
  3. jt-t <themename>例えばその後jt -t solarizedl

4
conda install jupyterthemes

Windowsでは私にはうまくいきませんでした。私はアナコンダを使用しています。

だが、

pip install jupyterthemes

アナコンダプロンプトで働いた。


7
あなたがcondaのための右のコレクションを指定する必要があります:conda install -c conda-forge jupyterthemes
フィリップ・ローランドJarnhus

1

私の完全なソリューション:

1)ChromeでDark Readerを入手してください。Jupyterのダークテーマだけでなく、希望するすべてのWebサイトにも適用できます(さまざまなフィルターでプレイできます。私はダイナミックを使用しています)。

2)凡例と軸が見えるように、これらのコード行をノートブックに貼り付けます。

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

ディスココーディングの夜の準備が整いました。


1

ダークモードのみ:-

スタイリングにRalewayフォントを使用しました

C:\ユーザー\ユーザー名\ .jupyter \カスタム\のcustom.cssファイル

特定のスタイルを追加します。これは特に、jupyterノートブックのダークモード用です...

これは現在のcustom.cssファイルである必要があります:-

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

追加するコンテンツが始まります

.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;
}

Jupyter Notebookのダークモード

Jupyter Notebookのダークモード

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.