Merge pull request ipython-contrib#969 from hiiwave/toc2-color

[toc2] Support custom colors for navigation text and window

src/jupyter_contrib_nbextensions/nbextensions/toc2/README.md

@@ -30,9 +30,13 @@ The initial configuration can be given using the IPython-contrib nbextensions fa
 - The numbering of headers (true by default)
 - Moving header title and menus on the left (default: true)
 - Customization of highlighting the title of currently selected/running sections.  
+- Customization of background, fonts, border and highlighting colors in the toc window and navigation menus (as third demo).
 
 The differents states and position of the floating window have reasonable defaults and can be modfied per notebook). 
 
+#### Third demo with dark theme
+![](demo_dark.png) 
+
 ## Export
 It is possible to export (most of) table of contents functionalities to html. The idea is to link a relevant part of the javascript
 extension and the css, and add a small script in the html file. This is done using a template by
@@ -96,5 +100,5 @@ This option requires the IPython kernel and is not present with other kernels.
      - Remove MathJax preview in headers and links -- addresses (issue 14 in latex_envs)[https://github.com/jfbercher/jupyter_latex_envs/issues/14]
      - Added a parameter to enable/disable cell widening (which is useful when sideBar is on) - default is to widen - address #871
      - Updated README to please @KadeG in #871
-
-     
+- @hiiwave, april 2017.
+     - Support customization of background, fonts, border and highlighting colors in the toc window and navigation menus with PR [#969](https://github.com/ipython-contrib/jupyter_contrib_nbextensions/pull/969)

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,9 +100,9 @@ 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;
+    /*border-color: #eeeeee;*/  /* now specified in js */
     opacity: .99;
     overflow: hidden;
 }
@@ -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 */
 }
 
 /*

src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js

@@ -24,9 +24,15 @@ 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': '#FFFFFF',
+                'sidebar_border': '#EEEEEE',
+                'navigate_text': '#333333',
+                'navigate_num': '#000000',
+              }
 }
 
 //.....................global variables....
@@ -82,7 +88,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 +146,15 @@ 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 + "}";
+      sheet.innerHTML += ".sidebar-wrapper { border-color: " + cfg.colors.sidebar_border + "}";
       document.body.appendChild(sheet);
   }
 
 
-
   var CodeCell = codecell.CodeCell;
 
   function patch_CodeCell_get_callbacks() {

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,20 @@ 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: "#FFFFFF"
+- name: toc2.colors.sidebar_border
+  input_type: color
+  description: Color of sidebar border
+  default: "#EEEEEE"
+- name: toc2.colors.navigate_text
+  input_type: color
+  description: Color of navigate text
+  default: "#333333"
+- name: toc2.colors.navigate_num
+  input_type: color
+  description: Color of navigate number
+  default: "#000000"