refactored the way icons are added to toc

packages/toc/src/generators/markdowndocgenerator/toolbargenerator.tsx

@@ -32,11 +32,11 @@ export function markdownDocGeneratorToolbar(
           className="toc-toolbar-auto-numbering-button toc-toolbar-button"
           onClick={event => toggleAutoNumbering()}
         >
-          <img
-            alt="Toggle Auto-Numbering"
+          <div
+            role="text"
+            aria-label="Toggle Auto-Numbering"
             title="Toggle Auto-Numbering"
-            src={require('../../../style/img/autonumbering_selected.svg')}
-            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon"
+            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon-selected"
           />
         </div>
       ) : (
@@ -44,10 +44,10 @@ export function markdownDocGeneratorToolbar(
           className="toc-toolbar-auto-numbering-button toc-toolbar-button"
           onClick={event => toggleAutoNumbering()}
         >
-          <img
-            alt="Toggle Auto-Numbering"
+          <div
+            role="text"
+            aria-label="Toggle Auto-Numbering"
             title="Toggle Auto-Numbering"
-            src={require('../../../style/img/autonumbering_unselected.svg')}
             className="toc-toolbar-auto-numbering-icon toc-toolbar-icon"
           />
         </div>

packages/toc/src/generators/notebookgenerator/itemrenderer.tsx

@@ -77,10 +77,7 @@ export function notebookItemRenderer(
             }}
           >
             <div className="toc-twist-placeholder">placeholder</div>
-            <img
-              className="toc-arrow-img"
-              src={require('../../../style/img/downarrow.svg')}
-            />
+            <div className="toc-downarrow-img toc-arrow-img" />
           </div>
         );
         if (collapsed) {
@@ -93,10 +90,7 @@ export function notebookItemRenderer(
               }}
             >
               <div className="toc-twist-placeholder">placeholder</div>
-              <img
-                className="toc-arrow-img"
-                src={require('../../../style/img/rightarrow.svg')}
-              />
+              <div className="toc-rightarrow-img toc-arrow-img" />
             </div>
           );
         }
@@ -136,10 +130,7 @@ export function notebookItemRenderer(
             }}
           >
             <div className="toc-twist-placeholder">placeholder</div>
-            <img
-              className="toc-arrow-img"
-              src={require('../../../style/img/downarrow.svg')}
-            />
+            <div className="toc-downarrow-img toc-arrow-img" />
           </div>
         );
         if (collapsed) {
@@ -152,10 +143,7 @@ export function notebookItemRenderer(
               }}
             >
               <div className="toc-twist-placeholder">placeholder</div>
-              <img
-                className="toc-arrow-img"
-                src={require('../../../style/img/rightarrow.svg')}
-              />
+              <div className="toc-rightarrow-img toc-arrow-img" />
             </div>
           );
         }

packages/toc/src/generators/notebookgenerator/toolbargenerator.tsx

@@ -136,11 +136,11 @@ export function notebookGeneratorToolbar(
           className="toc-toolbar-code-button toc-toolbar-button"
           onClick={event => this.toggleCode.bind(this)()}
         >
-          <img
-            alt="Toggle Code Cells"
+          <div
+            role="text"
+            aria-label="Toggle Code Cells"
             title="Toggle Code Cells"
-            src={require('../../../style/img/code_selected.svg')}
-            className="toc-toolbar-code-icon toc-toolbar-icon"
+            className="toc-toolbar-code-icon toc-toolbar-icon-selected"
           />
         </div>
       ) : (
@@ -148,17 +148,11 @@ export function notebookGeneratorToolbar(
           className="toc-toolbar-code-button toc-toolbar-button"
           onClick={event => this.toggleCode.bind(this)()}
         >
-          <img
-            alt="Toggle Code Cells"
-            title="Toggle Code Cells"
-            src={require('../../../style/img/code_unselected.svg')}
-            className="toc-toolbar-code-icon toc-toolbar-icon toc-hover--off"
-          />
-          <img
-            alt="Toggle Code Cells"
+          <div
+            role="text"
+            aria-label="Toggle Code Cells"
             title="Toggle Code Cells"
-            src={require('../../../style/img/code_hover.svg')}
-            className="toc-toolbar-code-icon toc-toolbar-icon toc-hover--on"
+            className="toc-toolbar-code-icon toc-toolbar-icon"
           />
         </div>
       );
@@ -168,11 +162,11 @@ export function notebookGeneratorToolbar(
           className="toc-toolbar-markdown-button toc-toolbar-button"
           onClick={event => this.toggleMarkdown.bind(this)()}
         >
-          <img
-            alt="Toggle Code Cells"
-            title="Toggle Code Cells"
-            src={require('../../../style/img/markdown_selected.svg')}
-            className="toc-toolbar-markdown-icon toc-toolbar-icon"
+          <div
+            role="text"
+            aria-label="Toggle Markdown Text Cells"
+            title="Toggle Markdown Text Cells"
+            className="toc-toolbar-markdown-icon toc-toolbar-icon-selected"
           />
         </div>
       ) : (
@@ -180,17 +174,11 @@ export function notebookGeneratorToolbar(
           className="toc-toolbar-markdown-button toc-toolbar-button"
           onClick={event => this.toggleMarkdown.bind(this)()}
         >
-          <img
-            alt="Toggle Markdown Cells"
-            title="Toggle Markdown Cells"
-            src={require('../../../style/img/markdown_unselected.svg')}
-            className="toc-toolbar-markdown-icon toc-toolbar-icon toc-hover--off"
-          />
-          <img
-            alt="Toggle Markdown Cells"
-            title="Toggle Markdown Cells"
-            src={require('../../../style/img/markdown_hover.svg')}
-            className="toc-toolbar-markdown-icon toc-toolbar-icon toc-hover--on"
+          <div
+            role="text"
+            aria-label="Toggle Markdown Text Cells"
+            title="Toggle Markdown Text Cells"
+            className="toc-toolbar-markdown-icon toc-toolbar-icon"
           />
         </div>
       );
@@ -200,11 +188,11 @@ export function notebookGeneratorToolbar(
           className="toc-toolbar-auto-numbering-button toc-toolbar-button"
           onClick={event => this.toggleAutoNumbering()}
         >
-          <img
-            alt="Toggle Auto-Numbering"
+          <div
+            role="text"
+            aria-label="Toggle Auto-Numbering"
             title="Toggle Auto-Numbering"
-            src={require('../../../style/img/autonumbering_selected.svg')}
-            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon"
+            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon-selected"
           />
         </div>
       ) : (
@@ -212,17 +200,11 @@ export function notebookGeneratorToolbar(
           className="toc-toolbar-auto-numbering-button toc-toolbar-button"
           onClick={event => this.toggleAutoNumbering()}
         >
-          <img
-            alt="Toggle Auto-Numbering"
-            title="Toggle Auto-Numbering"
-            src={require('../../../style/img/autonumbering_unselected.svg')}
-            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon toc-hover--off"
-          />
-          <img
-            alt="Toggle Auto-Numbering"
+          <div
+            role="text"
+            aria-label="Toggle Auto-Numbering"
             title="Toggle Auto-Numbering"
-            src={require('../../../style/img/autonumbering_hover.svg')}
-            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon toc-hover--on"
+            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon"
           />
         </div>
       );
@@ -230,17 +212,11 @@ export function notebookGeneratorToolbar(
       let tagDropdown = <div />;
       let tagIcon = (
         <div className="toc-toolbar-button">
-          <img
-            className="toc-hover--off"
-            alt="Show Tags Menu"
-            title="Show Tags Menu"
-            src={require('../../../style/img/tag_unselected.svg')}
-          />
-          <img
-            className="toc-hover--on"
-            alt="Show Tags Menu"
+          <div
+            role="text"
+            aria-label="Show Tags Menu"
             title="Show Tags Menu"
-            src={require('../../../style/img/tag_hover.svg')}
+            className="toc-toolbar-tag-icon toc-toolbar-icon"
           />
         </div>
       );
@@ -257,10 +233,11 @@ export function notebookGeneratorToolbar(
           </div>
         );
         tagIcon = (
-          <img
-            alt="Hide Tags Menu"
+          <div
+            role="text"
+            aria-label="Hide Tags Menu"
             title="Hide Tags Menu"
-            src={require('../../../style/img/tag_selected.svg')}
+            className="toc-toolbar-tag-icon toc-toolbar-icon-selected"
           />
         );
       }
@@ -278,7 +255,6 @@ export function notebookGeneratorToolbar(
               {tagIcon}
             </div>
           </div>
-          <hr className={'toc-toolbar-hr'} />
           {tagDropdown}
         </div>
       );

packages/toc/style/img/autonumbering_darktheme.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.33301 19.8327H4.66634V20.416H3.49967V21.5827H4.66634V22.166H2.33301V23.3327H5.83301V18.666H2.33301V19.8327ZM3.49967 9.33268H4.66634V4.66602H2.33301V5.83268H3.49967V9.33268ZM2.33301 12.8327H4.43301L2.33301 15.2827V16.3327H5.83301V15.166H3.73301L5.83301 12.716V11.666H2.33301V12.8327ZM8.16634 5.83268V8.16602H24.4997V5.83268H8.16634ZM8.16634 22.166H24.4997V19.8327H8.16634V22.166ZM8.16634 15.166H24.4997V12.8327H8.16634V15.166Z" fill="#DCDBDC"/>
+</svg>

packages/toc/style/img/autonumbering_hover.svg

@@ -1,7 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<rect width="28" height="28" rx="2" fill="#F5F5F5"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<path d="M4 19H6V19.5H5V20.5H6V21H4V22H7V18H4V19ZM5 10H6V6H4V7H5V10ZM4 13H5.8L4 15.1V16H7V15H5.2L7 12.9V12H4V13ZM9 7V9H23V7H9ZM9 21H23V19H9V21ZM9 15H23V13H9V15Z" fill="#333333"/>
-</svg>

packages/toc/style/img/autonumbering_selected.svg

@@ -1,6 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<rect width="28" height="28" rx="2" fill="#EBEBEB"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<path d="M4 19H6V19.5H5V20.5H6V21H4V22H7V18H4V19ZM5 10H6V6H4V7H5V10ZM4 13H5.8L4 15.1V16H7V15H5.2L7 12.9V12H4V13ZM9 7V9H23V7H9ZM9 21H23V19H9V21ZM9 15H23V13H9V15Z" fill="#333333"/>
-</svg>

packages/toc/style/img/code_darktheme.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9663 19.3667L5.59967 14L10.9663 8.63333L9.33301 7L2.33301 14L9.33301 21L10.9663 19.3667ZM17.033 19.3667L22.3997 14L17.033 8.63333L18.6663 7L25.6663 14L18.6663 21L17.033 19.3667V19.3667Z" fill="#DCDBDC"/>
+</svg>

packages/toc/style/img/code_hover.svg

@@ -1,6 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<rect width="28" height="28" rx="2" fill="#F5F5F5"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<path d="M11.4 18.6L6.8 14L11.4 9.4L10 8L4 14L10 20L11.4 18.6ZM16.6 18.6L21.2 14L16.6 9.4L18 8L24 14L18 20L16.6 18.6V18.6Z" fill="#333333"/>
-</svg>

packages/toc/style/img/code_selected.svg

@@ -1,6 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<rect width="28" height="28" rx="2" fill="#EBEBEB"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<path d="M11.4 18.6L6.8 14L11.4 9.4L10 8L4 14L10 20L11.4 18.6ZM16.6 18.6L21.2 14L16.6 9.4L18 8L24 14L18 20L16.6 18.6Z" fill="#333333"/>
-</svg>

packages/toc/style/img/downarrow.svg

@@ -1,3 +0,0 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0L5 4.98904L10 0H0Z" transform="translate(0 0.978027)" fill="black"/>
-</svg>

packages/toc/style/img/markdown_darktheme.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.33301 19.8327V8.16602H4.84113L8.64555 12.9318L12.45 8.16602H14.9581V19.8327H12.45V12.398L8.64555 17.1638L4.84113 12.398V19.8327H2.33301ZM21.256 19.8327L16.8457 14.8381H19.3538V8.16602H23.1582V14.8381H25.6663L21.256 19.8327Z" fill="#DCDBDC"/>
+</svg>

packages/toc/style/img/markdown_hover.svg

@@ -1,6 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<rect width="28" height="28" rx="2" fill="#F5F5F5"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<path d="M4 19V9H6.14982L9.41075 13.085L12.6717 9H14.8215V19H12.6717V12.6275L9.41075 16.7124L6.14982 12.6275V19H4ZM20.2197 19L16.4394 14.719H18.5892V9H21.8502V14.719H24L20.2197 19Z" fill="#333333"/>
-</svg>

packages/toc/style/img/markdown_selected.svg

@@ -1,6 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<rect width="28" height="28" rx="2" fill="#EBEBEB"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<path d="M4 19V9H6.14982L9.41075 13.085L12.6717 9H14.8215V19H12.6717V12.6275L9.41075 16.7124L6.14982 12.6275V19H4ZM20.2197 19L16.4394 14.719H18.5892V9H21.8502V14.719H24L20.2197 19Z" fill="#333333"/>
-</svg>

packages/toc/style/img/rightarrow.svg

@@ -1,3 +0,0 @@
-<svg width="5" height="11" viewBox="0 0 5 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 9.97807L5 4.98904L0 0V9.97807Z" transform="translate(0 0.984619)" fill="black"/>
-</svg>

packages/toc/style/img/tag_hover.svg → packages/toc/style/img/tag_darktheme.svg

@@ -1,11 +1,4 @@
 <svg width="43" height="28" viewBox="0 0 43 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="43" height="28" fill="black" fill-opacity="0"/>
-<rect width="43" height="28" fill="black" fill-opacity="0"/>
-<rect width="43" height="28" rx="2" fill="#F5F5F5"/>
-<rect width="20" height="20" fill="black" fill-opacity="0" transform="translate(43 4) rotate(90)"/>
-<path d="M28.8327 12.334L32.9993 16.5007L37.166 12.334H28.8327Z" fill="#333333"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<rect width="15.9622" height="16" fill="black" fill-opacity="0" transform="translate(6 6)"/>
-<rect width="15.9622" height="16" fill="black" fill-opacity="0" transform="translate(6 6)"/>
-<path d="M16.2095 21.6104C15.6873 22.1299 14.8443 22.1299 14.3248 21.6104L6.9829 14.7245C6.5724 14.3394 6.08313 13.6098 6.04786 13.0482C5.95347 11.5288 6.02002 8.61944 6.06621 7.07695C6.08281 6.51477 6.55548 6.04347 7.11804 6.03055C9.08863 5.98473 13.2638 5.93579 13.6518 6.32425L21.7369 13.639C22.256 14.1585 21.7851 15.4724 21.262 15.9946L16.2095 21.6104ZM9.77585 8.265C9.33551 7.82566 8.62351 7.82566 8.1828 8.265C7.74346 8.70571 7.74346 9.41733 8.1828 9.85667C8.62382 10.2964 9.33582 10.2964 9.77585 9.85667C10.2156 9.41733 10.2156 8.70533 9.77585 8.265Z" fill="#333333"/>
+<path d="M28.8327 12.334L32.9993 16.5007L37.166 12.334H28.8327Z" fill="#DCDBDC"/>
+<path d="M16.2095 21.6104C15.6873 22.1299 14.8443 22.1299 14.3248 21.6104L6.9829 14.7245C6.5724 14.3394 6.08313 13.6098 6.04786 13.0482C5.95347 11.5288 6.02002 8.61944 6.06621 7.07695C6.08281 6.51477 6.55548 6.04347 7.11804 6.03055C9.08863 5.98473 13.2638 5.93579 13.6518 6.32425L21.7369 13.639C22.256 14.1585 21.7851 15.4724 21.262 15.9946L16.2095 21.6104ZM9.77585 8.265C9.33551 7.82566 8.62351 7.82566 8.1828 8.265C7.74346 8.70571 7.74346 9.41733 8.1828 9.85667C8.62382 10.2964 9.33582 10.2964 9.77585 9.85667C10.2156 9.41733 10.2156 8.70533 9.77585 8.265Z" fill="#DCDBDC"/>
 </svg>

packages/toc/style/img/tag_selected.svg

@@ -1,10 +0,0 @@
-<svg width="43" height="28" viewBox="0 0 43 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="43" height="28" fill="black" fill-opacity="0"/>
-<rect width="43" height="28" rx="2" fill="#EBEBEB"/>
-<rect width="20" height="20" fill="black" fill-opacity="0" transform="translate(43 4) rotate(90)"/>
-<path d="M28.8332 12.334L32.9998 16.5007L37.1665 12.334H28.8332Z" fill="#333333"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<rect width="15.9622" height="16" fill="black" fill-opacity="0" transform="translate(6 6)"/>
-<rect width="15.9622" height="16" fill="black" fill-opacity="0" transform="translate(6 6)"/>
-<path d="M16.2095 21.6104C15.6873 22.1299 14.8443 22.1299 14.3248 21.6104L6.9829 14.7245C6.5724 14.3394 6.08313 13.6098 6.04786 13.0482C5.95347 11.5288 6.02002 8.61944 6.06621 7.07695C6.08281 6.51477 6.55548 6.04347 7.11804 6.03055C9.08863 5.98473 13.2638 5.93579 13.6518 6.32425L21.7369 13.639C22.256 14.1585 21.7851 15.4724 21.262 15.9946L16.2095 21.6104ZM9.77585 8.265C9.33551 7.82566 8.62351 7.82566 8.1828 8.265C7.74346 8.70571 7.74346 9.41733 8.1828 9.85667C8.62382 10.2964 9.33582 10.2964 9.77585 9.85667C10.2156 9.41733 10.2156 8.70533 9.77585 8.265Z" fill="#333333"/>
-</svg>

packages/toc/style/img/toggle_down.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.000324726 0L5.83366 5.83333L11.667 0L0.000324726 0Z" fill="black"/>
+</svg>

packages/toc/style/img/toggle_down_darktheme.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="6" viewBox="0 0 13 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.803059 0.0820307L6.63639 5.91536L12.4697 0.0820312L0.803059 0.0820307Z" fill="#DCDBDC"/>
+</svg>

packages/toc/style/img/toggle_right.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.719727 11.8327L6.55306 5.99935L0.719727 0.166016V11.8327Z" fill="black"/>
+</svg>

packages/toc/style/img/toggle_right_darktheme.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.719727 11.8327L6.55306 5.99935L0.719727 0.166016V11.8327Z" fill="#DCDBDC"/>
+</svg>

packages/toc/style/index.css

@@ -86,24 +86,72 @@
   background-color: transparent;
 }
 
-.toc-toolbar-icon {
+.toc-toolbar-icon,
+.toc-toolbar-icon-selected {
   float: left;
   padding: 0px;
   margin: 4px;
+  background-repeat: no-repeat;
+  height: 28px;
+  width: 28px;
+  margin: 4px;
+  background-color: none;
+  border-radius: 2px;
 }
 
-.toc-toolbar-button {
-  width: fit-content;
-  float: left;
+[data-theme-light='true'] .toc-toolbar-code-icon {
+  background-image: url('img/code.svg');
+}
+
+[data-theme-light='false'] .toc-toolbar-code-icon {
+  background-image: url('img/code_darktheme.svg');
+}
+
+[data-theme-light='true'] .toc-toolbar-markdown-icon {
+  background-image: url('img/markdown.svg');
+}
+
+[data-theme-light='false'] .toc-toolbar-markdown-icon {
+  background-image: url('img/markdown_darktheme.svg');
+}
+
+[data-theme-light='true'] .toc-toolbar-auto-numbering-icon {
+  background-image: url('img/autonumbering.svg');
+}
+
+[data-theme-light='false'] .toc-toolbar-auto-numbering-icon {
+  background-image: url('img/autonumbering_darktheme.svg');
+}
+
+.toc-toolbar-tag-icon {
+  width: 43px;
+  float: right;
+  margin: 4px;
+  margin-right: 9px;
+}
+
+[data-theme-light='true'] .toc-toolbar-tag-icon {
+  background-image: url('img/tag.svg');
+}
+
+[data-theme-light='false'] .toc-toolbar-tag-icon {
+  background-image: url('img/tag_darktheme.svg');
 }
 
-.toc-toolbar-button .toc-hover--on,
-.toc-toolbar-button:hover .toc-hover--off {
-  display: none;
+[data-theme-light='true'] .toc-toolbar-icon:hover {
+  background-color: var(--jp-input-background);
 }
 
-.toc-toolbar-button:hover .toc-hover--on {
-  display: inline;
+[data-theme-light='false'] .toc-toolbar-icon:hover {
+  background-color: #3a3a3a;
+}
+
+[data-theme-light='true'] .toc-toolbar-icon-selected {
+  background-color: var(--jp-layout-color2);
+}
+
+[data-theme-light='false'] .toc-toolbar-icon-selected {
+  background-color: #565656;
 }
 
 .toc-code-cell-prompt {
@@ -134,6 +182,9 @@
   padding: 3px;
   margin: 0px;
   user-select: none;
+  padding-top: 0px;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+  height: 33px;
 }
 
 .toc-code-cell-div {
@@ -160,6 +211,33 @@
   bottom: 0;
   margin: auto;
   position: absolute;
+  background-repeat: no-repeat;
+}
+
+.toc-downarrow-img {
+  width: 12px;
+  height: 6px;
+}
+
+[data-theme-light='true'] .toc-downarrow-img {
+  background-image: url('img/toggle_down.svg');
+}
+
+[data-theme-light='false'] .toc-downarrow-img {
+  background-image: url('img/toggle_down_darktheme.svg');
+}
+
+.toc-rightarrow-img {
+  width: 7px;
+  height: 12px;
+}
+
+[data-theme-light='true'] .toc-rightarrow-img {
+  background-image: url('img/toggle_right.svg');
+}
+
+[data-theme-light='false'] .toc-rightarrow-img {
+  background-image: url('img/toggle_right_darktheme.svg');
 }
 
 .toc-twist-placeholder {
@@ -201,12 +279,6 @@
   white-space: pre-wrap;
 }
 
-.toc-tag-dropdown-button {
-  float: right;
-  margin: 4px;
-  margin-right: 9px;
-}
-
 .toc-tag-dropdown {
   position: relative;
   width: 100%;
@@ -220,16 +292,6 @@
   padding-left: 0px;
 }
 
-.toc-toolbar-hr {
-  width: 100%;
-  background-color: var(--jp-layout-color2);
-  padding-bottom: 0px;
-  margin-bottom: 0px;
-  height: 1px;
-  border: 0px;
-  /* border-width: 0px; */
-}
-
 .toc-clear-button {
   font-size: 12px;
   color: var(--jp-ui-font-color1);
@@ -289,6 +351,14 @@
   width: 100%;
 }
 
+.jp-TableOfContents-content code {
+  font-size: inherit;
+}
+
+.toc-cell-item {
+  padding-left: 24px;
+}
+
 /* styles for tags */
 
 .toc-tag-label {
@@ -336,11 +406,3 @@
   padding-left: 9px;
   padding-top: 6px;
 }
-
-.jp-TableOfContents-content code {
-  font-size: inherit;
-}
-
-.toc-cell-item {
-  padding-left: 24px;
-}