Support custom color for toc2 (Table of Contents)

Especially designed for users using jupyter-notebook with a dark theme.
ipython-contrib · Apr 23, 2017 · e651d18 · e651d18
1 parent 9aa792e
commit e651d18
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css b/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css
@@ -6,7 +6,10 @@ This style is used on export, but can be overwritted in the livenotebook
 by selecting a color in the nbextension-configurator*/
 #toc-level0 li > a:hover {  display: block; background-color: #DAA520} 
 
-#toc-level0  a {color: #333333; text-decoration: none;}
+#toc-level0  a {
+  /*color: #333333;*/  /* now specified in js */ 
+  text-decoration: none;
+}
 #navigate_menu li a:hover {background-color: #f1f1f1}
 
 
@@ -28,7 +31,7 @@ padding-left: 20px;
 
 #navigate_menu a {
   list-style-type: none;
-  color: #333333; 
+  /*color: #333333; */  /* now specified in js */
   text-decoration: none;
 }
 
@@ -47,7 +50,7 @@ padding-left: 20px;
   padding: 0px;
   overflow-y: auto;
   font-weight: normal;
-  color: #333333;
+  /*color: #333333;*/  /* now specified in js */
   white-space: nowrap;
   overflow-x: auto;
 } 
@@ -84,7 +87,7 @@ padding-left: 20px;
   border: thin solid rgba(0, 0, 0, 0.38);
   border-radius: 5px;
   padding:10px;
-  background-color: #fff;
+  /*background-color: #fff;*/  /* now specified in js */
   opacity: .8;
   z-index: 100;
   overflow: hidden;
@@ -97,7 +100,7 @@ padding-left: 20px;
     position: fixed !important;
     width: 212px;
     max-width: 28%;
-    background-color: #fff;
+    /*background-color: #fff;*/  /* now specified in js */
     border-style: solid;
     border-color: #eeeeee;
     opacity: .99;
@@ -154,7 +157,7 @@ padding-left: 20px;
 #toc-wrapper .toc-item-num {
     font-style: normal;
     font-family: Georgia, Times New Roman, Times, serif;
-    color: black;
+    /*color: black;*/  /* now specified in js */
 }
 
 /*

diff --git a/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js b/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js
@@ -24,9 +24,14 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
 	           'navigate_menu':true,
              'moveMenuLeft': true,
              'widenNotebook': false,
-             'colors': {'hover_highlight': '#DAA520',
-             'selected_highlight': '#FFD700',
-             'running_highlight': '#FF0000'}
+             'colors': {
+                'hover_highlight': '#DAA520',
+                'selected_highlight': '#FFD700',
+                'running_highlight': '#FF0000',
+                'wrapper_background': '#FFF',
+                'navigate_text': '#333',
+                'navigate_num': '#000',
+              }
 }
 
 //.....................global variables....
@@ -82,7 +87,7 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
         }
       }
       // create highlights style section in document
-      create_additional_css()
+      create_additional_css();
       // call callbacks
       callback && callback();
       st.config_loaded = true;
@@ -140,11 +145,14 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
             "width: auto;\n"+
             "padding-left: 20px; }"
       }          
+      // Using custom colors
+      sheet.innerHTML += ".float-wrapper, .sidebar-wrapper { background-color: " + cfg.colors.wrapper_background + "}";
+      sheet.innerHTML += "#toc-level0 a, #navigate_menu a, .toc { color: " + cfg.colors.navigate_text + "}";
+      sheet.innerHTML += "#toc-wrapper .toc-item-num { color: " + cfg.colors.navigate_num + "}";
       document.body.appendChild(sheet);
   }
 
 
-
   var CodeCell = codecell.CodeCell;
 
   function patch_CodeCell_get_callbacks() {

diff --git a/src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.yaml b/src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.yaml
@@ -39,7 +39,7 @@ Parameters:
 - name: toc2.moveMenuLeft
   description: Move notebook's title and menu on the left instead of being centered -- This provides a better look when the toc/sidebar is present
   input_type: checkbox
-  default: true    
+  default: true      
 - name: toc2.colors.hover_highlight
   input_type: color
   description: Hover color in toc
@@ -52,4 +52,15 @@ Parameters:
   input_type: color
   description: Color of sections with running cells
   default: "#FF0000"  
-
+- name: toc2.colors.wrapper_background
+  input_type: color
+  description: Color of wrapper window background
+  default: "#FFF"
+- name: toc2.colors.navigate_text
+  input_type: color
+  description: Color of navigate text
+  default: "#333"
+- name: toc2.colors.navigate_num
+  input_type: color
+  description: Color of navigate number
+  default: "#000"