diff --git a/assets/sass/abstracts/_mixins.scss b/assets/sass/abstracts/_mixins.scss
index 3905aaa..e8515f0 100644
--- a/assets/sass/abstracts/_mixins.scss
+++ b/assets/sass/abstracts/_mixins.scss
@@ -205,3 +205,8 @@
   -ms-transform-origin: $origin;
   transform-origin: $origin;
 }
+
+@mixin clippy() {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
+<path style="stroke:none;fill-rule:nonzero;fill:rgb(100,100,100);fill-opacity:1;" d="M 4 2 C 2.894531 2 2 2.894531 2 4 L 2 17 C 2 17.550781 2.449219 18 3 18 C 3.550781 18 4 17.550781 4 17 L 4 4 L 17 4 C 17.550781 4 18 3.550781 18 3 C 18 2.449219 17.550781 2 17 2 Z M 8 6 C 6.894531 6 6 6.894531 6 8 L 6 20 C 6 21.105469 6.894531 22 8 22 L 20 22 C 21.105469 22 22 21.105469 22 20 L 22 8 C 22 6.894531 21.105469 6 20 6 Z M 8 8 L 20 8 L 20 20 L 8 20 Z M 8 8 "/></svg>');
+}
\ No newline at end of file
diff --git a/assets/sass/components/_switch.scss b/assets/sass/components/_switch.scss
index 3ea8ca9..5880f38 100644
--- a/assets/sass/components/_switch.scss
+++ b/assets/sass/components/_switch.scss
@@ -3,7 +3,7 @@
   display: inline-block;
   width: 28px;
   height: 14px;
-  margin-bottom: 0.6rem;
+  margin-top: 0.7rem;
   margin-left: 1rem;
 }
 
diff --git a/assets/sass/components/_toc.scss b/assets/sass/components/_toc.scss
index fd41dd0..bae449d 100644
--- a/assets/sass/components/_toc.scss
+++ b/assets/sass/components/_toc.scss
@@ -2,7 +2,7 @@
   width: 100%;
   max-width: 250px;
   position: fixed;
-  top: 6.5rem;
+  top: 7rem;
   font-size: 0.85rem;
   padding-left: 0.5rem;
   z-index: z('toc');
@@ -14,6 +14,7 @@
   &__flexbox {
     @include flexbox();
     @include align-items(center);
+    position: fixed;
   }
 
   &__title {
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 15e7608..2eb3854 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -121,6 +121,9 @@ $gtt_background_color: {{ $scr.Get "gtt_background_color" }};
 $gtt_hover_color: {{ $scr.Get "gtt_hover_color" }};
 $gtt_hover_background_color: {{ $scr.Get "gtt_hover_background_color" }};
 $whoami_border_color: {{ $scr.Get "whoami_border_color" }};
+$switch_background_color: {{ $scr.Get "switch_background_color" }};
+$switch_button_color: {{ $scr.Get "switch_button_color" }};
+$switch_active_color: {{ $scr.Get "switch_active_color" }};
 
 @import 'abstracts/variables';
 @import 'abstracts/mixins';
diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss
index c9ef285..3e2ffd8 100644
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@@ -116,7 +116,7 @@
     }
 
     .copy-to-clipboard {
-      background-image: url(images/clippy.svg);
+      @include clippy();
       background-position: 50% 50%;
       background-size: 16px 16px;
       background-repeat: no-repeat;
@@ -133,7 +133,7 @@
       @include transition(all, 0.2s, ease);
     }
     .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
+      @include translateY(-0.05rem);
     }
     pre .copy-to-clipboard {
       position: absolute;
@@ -143,7 +143,7 @@
       @include transition(all, 0.2s, ease);
     }
     pre .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
+      @include translateY(-0.05rem);
     }
 
     blockquote {
diff --git a/assets/sass/themes/_custom.scss b/assets/sass/themes/_custom.scss
index 425b63a..b706385 100644
--- a/assets/sass/themes/_custom.scss
+++ b/assets/sass/themes/_custom.scss
@@ -91,4 +91,7 @@ $custom: (
   gtt-hover-color: $gtt_hover_color,
   gtt-hover-background-color: $gtt_hover_background_color,
   whoami-border-color: $whoami_border_color,
+  switch-background-color: $switch_background_color,
+  switch-button-color: $switch_button_color,
+  switch-active-color: $switch_active_color,
 ) !default;
\ No newline at end of file
diff --git a/assets/sass/themes/_hacker.scss b/assets/sass/themes/_hacker.scss
index 1d6d5d1..7b9b926 100644
--- a/assets/sass/themes/_hacker.scss
+++ b/assets/sass/themes/_hacker.scss
@@ -95,4 +95,7 @@ $hacker: (
     gtt-hover-color: #E3CD26,
     gtt-hover-background-color: lighten(#252526, 5%),
     whoami-border-color: #996287,
+    switch-background-color: #403E41,
+    switch-button-color: #FCFCFA,
+    switch-active-color: #FF6188,
 );
\ No newline at end of file
diff --git a/assets/sass/themes/_light.scss b/assets/sass/themes/_light.scss
index 6fda7a3..c0379ba 100644
--- a/assets/sass/themes/_light.scss
+++ b/assets/sass/themes/_light.scss
@@ -6,7 +6,7 @@ $light: (
     title-color: #607d8b,
     meta-color: #424242,
     body-color: #424242,
-    hr-color: #eeeeee,
+    hr-color: #dbdbdb,
     body-background-color: #fafafa,
     backdrop-background-color: #e0e0e0,
     dropdown-border-color: #bdbdbd,
@@ -92,4 +92,7 @@ $light: (
     gtt-hover-color: #607d8b,
     gtt-hover-background-color: darken(#eeeeee, 10%),
     whoami-border-color: #607d8b,
+    switch-background-color: #bdbdbd,
+    switch-button-color: #FCFCFA,
+    switch-active-color: #FF6188,
 );
\ No newline at end of file
diff --git a/assets/sass/themes/_solarized.scss b/assets/sass/themes/_solarized.scss
index eb7e77a..2354065 100644
--- a/assets/sass/themes/_solarized.scss
+++ b/assets/sass/themes/_solarized.scss
@@ -9,7 +9,7 @@ $solarized: (
     title-color: $primary-color,
     meta-color: lighten($primary-color, 5%),
     body-color: #424242,
-    hr-color: lighten($secondary-color, 25%),
+    hr-color: $primary-color,
     body-background-color: #FDF7E3,
     backdrop-background-color: #DDD6C7,
     dropdown-border-color: $primary-color,
@@ -95,4 +95,7 @@ $solarized: (
     gtt-hover-color: $primary-color,
     gtt-hover-background-color: darken(#EEE8D5, 5%),
     whoami-border-color: $primary-color,
+    switch-background-color: darken(#EEE8D5, 10%),
+    switch-button-color: #FCFCFA,
+    switch-active-color: #FF6188,
 );
\ No newline at end of file
diff --git a/data/skin.toml b/data/skin.toml
index 43d9680..546f76a 100644
--- a/data/skin.toml
+++ b/data/skin.toml
@@ -90,4 +90,7 @@ gtt_color = "inherit"
 gtt_background_color = "inherit"
 gtt_hover_color = "inherit"
 gtt_hover_background_color = "inherit"
-whoami_border_color = "inherit"
\ No newline at end of file
+whoami_border_color = "inherit"
+switch_background_color = "inherit"
+switch_button_color = "inehrit"
+switch_active_color = "inehrit"
\ No newline at end of file
diff --git a/exampleSite/static/css/images/clippy.svg b/exampleSite/static/css/images/clippy.svg
deleted file mode 100644
index 01b1c04..0000000
--- a/exampleSite/static/css/images/clippy.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#9e9e9e" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/functions/parse_theme.html b/layouts/partials/functions/parse_theme.html
index d10232b..5edfc03 100644
--- a/layouts/partials/functions/parse_theme.html
+++ b/layouts/partials/functions/parse_theme.html
@@ -92,4 +92,7 @@
 {{- $scr.Set "gtt_background_color" $skin.gtt_background_color -}}
 {{- $scr.Set "gtt_hover_color" $skin.gtt_hover_color -}}
 {{- $scr.Set "gtt_hover_background_color" $skin.gtt_hover_background_color -}}
-{{- $scr.Set "whoami_border_color" $skin.whoami_border_color -}}
\ No newline at end of file
+{{- $scr.Set "whoami_border_color" $skin.whoami_border_color -}}
+{{- $scr.Set "switch_background_color" $skin.switch_background_color -}}
+{{- $scr.Set "switch_button_color" $skin.switch_button_color -}}
+{{- $scr.Set "switch_active_color" $skin.switch_active_color -}}
diff --git a/layouts/partials/sidebar/sidebar-single.html b/layouts/partials/sidebar/sidebar-single.html
index 0728363..dd96490 100644
--- a/layouts/partials/sidebar/sidebar-single.html
+++ b/layouts/partials/sidebar/sidebar-single.html
@@ -116,9 +116,9 @@
     // toc visibility
     $("#toggle-toc").change(function() {
       if (this.checked) {
-        $('.toc').removeClass('hide');
+        $('.toc').fadeIn(200);        
       } else {
-        $('.toc').removeClass('hide').addClass('hide');
+        $('.toc').fadeOut(200);
       }
     });
   });   
diff --git a/static/css/images/clippy.svg b/static/css/images/clippy.svg
deleted file mode 100644
index 01b1c04..0000000
--- a/static/css/images/clippy.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#9e9e9e" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
\ No newline at end of file
diff --git a/static/images/clippy.svg b/static/images/clippy.svg
index 01b1c04..66845ac 100644
--- a/static/images/clippy.svg
+++ b/static/images/clippy.svg
@@ -1 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#9e9e9e" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
\ No newline at end of file
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24px" height="24px">    <path d="M 4 2 C 2.895 2 2 2.895 2 4 L 2 17 C 2 17.552 2.448 18 3 18 C 3.552 18 4 17.552 4 17 L 4 4 L 17 4 C 17.552 4 18 3.552 18 3 C 18 2.448 17.552 2 17 2 L 4 2 z M 8 6 C 6.895 6 6 6.895 6 8 L 6 20 C 6 21.105 6.895 22 8 22 L 20 22 C 21.105 22 22 21.105 22 20 L 22 8 C 22 6.895 21.105 6 20 6 L 8 6 z M 8 8 L 20 8 L 20 20 L 8 20 L 8 8 z"/></svg>