diff --git a/gulpfile.js b/gulpfile.js
index da0ba5ae8..5e98c07e1 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -770,7 +770,6 @@ function buildComponents(defines, dir) {
     "web/images/annotation-*.svg",
     "web/images/loading-icon.gif",
     "web/images/shadow.png",
-    "web/images/texture.png",
   ];
 
   return merge([
diff --git a/web/images/findbarButton-next-dark.svg b/web/images/findbarButton-next-dark.svg
new file mode 100644
index 000000000..80df70bc1
--- /dev/null
+++ b/web/images/findbarButton-next-dark.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8
+9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path></svg>
\ No newline at end of file
diff --git a/web/images/findbarButton-next.png b/web/images/findbarButton-next.png
deleted file mode 100644
index de1d0fc90..000000000
Binary files a/web/images/findbarButton-next.png and /dev/null differ
diff --git a/web/images/findbarButton-next.svg b/web/images/findbarButton-next.svg
new file mode 100644
index 000000000..a81eb0296
--- /dev/null
+++ b/web/images/findbarButton-next.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path></svg>
\ No newline at end of file
diff --git a/web/images/findbarButton-next@2x.png b/web/images/findbarButton-next@2x.png
deleted file mode 100644
index 0250307c0..000000000
Binary files a/web/images/findbarButton-next@2x.png and /dev/null differ
diff --git a/web/images/findbarButton-previous-dark.svg b/web/images/findbarButton-previous-dark.svg
new file mode 100644
index 000000000..d304a9b8c
--- /dev/null
+++ b/web/images/findbarButton-previous-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M13 11a1 1 0 0 1-.707-.293L8 6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5A1 1 0 0 1 13 11z"></path></svg>
\ No newline at end of file
diff --git a/web/images/findbarButton-previous.png b/web/images/findbarButton-previous.png
deleted file mode 100644
index bef02743f..000000000
Binary files a/web/images/findbarButton-previous.png and /dev/null differ
diff --git a/web/images/findbarButton-previous.svg b/web/images/findbarButton-previous.svg
new file mode 100644
index 000000000..5fd703225
--- /dev/null
+++ b/web/images/findbarButton-previous.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M13 11a1 1 0 0 1-.707-.293L8 6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5A1 1 0 0 1 13 11z"></path></svg>
\ No newline at end of file
diff --git a/web/images/findbarButton-previous@2x.png b/web/images/findbarButton-previous@2x.png
deleted file mode 100644
index 1da6dc949..000000000
Binary files a/web/images/findbarButton-previous@2x.png and /dev/null differ
diff --git a/web/images/loading-dark.svg b/web/images/loading-dark.svg
new file mode 100644
index 000000000..fa5269b1a
--- /dev/null
+++ b/web/images/loading-dark.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)" style="animation:spinLoadingIcon 1s steps(12,end)
+infinite"><style>@keyframes
+spinLoadingIcon{to{transform:rotate(360deg)}}</style><path
+d="M7 3V1s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z"/><path d="M4.63
+4.1l-1-1.73S3.13 1.5 4 1c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37
+1.37c-.87.57-1.37-.37-1.37-.37z" fill-opacity=".93"/><path
+d="M3.1 6.37l-1.73-1S.5 4.87 1 4c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37
+1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".86"/><path d="M3
+9H1S0 9 0 8s1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".79"/><path d="M4.1 11.37l-1.73 1S1.5 12.87 1
+12c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z"
+fill-opacity=".72"/><path d="M3.63 13.56l1-1.73s.5-.87
+1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z"
+fill-opacity=".65"/><path d="M7 15v-2s0-1 1-1 1 1 1 1v2s0 1-1
+1-1-1-1-1z" fill-opacity=".58"/><path d="M10.63
+14.56l-1-1.73s-.5-.87.37-1.37c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37
+1.37c-.87.5-1.37-.37-1.37-.37z" fill-opacity=".51"/><path
+d="M13.56 12.37l-1.73-1s-.87-.5-.37-1.37c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37
+1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".44"/><path d="M15
+9h-2s-1 0-1-1 1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".37"/><path d="M14.56 5.37l-1.73
+1s-.87.5-1.37-.37c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37
+1.37z" fill-opacity=".3"/><path d="M9.64 3.1l.98-1.66s.5-.874
+1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z"
+fill-opacity=".23"/></svg>
\ No newline at end of file
diff --git a/web/images/loading-small.png b/web/images/loading-small.png
deleted file mode 100644
index 8831a8058..000000000
Binary files a/web/images/loading-small.png and /dev/null differ
diff --git a/web/images/loading-small@2x.png b/web/images/loading-small@2x.png
deleted file mode 100644
index b25b4452a..000000000
Binary files a/web/images/loading-small@2x.png and /dev/null differ
diff --git a/web/images/loading.svg b/web/images/loading.svg
new file mode 100644
index 000000000..0a15ff688
--- /dev/null
+++ b/web/images/loading.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" style="animation:spinLoadingIcon 1s steps(12,end) infinite"><style>@keyframes spinLoadingIcon{to{transform:rotate(360deg)}}</style><path d="M7 3V1s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z"/><path d="M4.63 4.1l-1-1.73S3.13 1.5 4 1c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37 1.37c-.87.57-1.37-.37-1.37-.37z" fill-opacity=".93"/><path d="M3.1 6.37l-1.73-1S.5 4.87 1 4c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37 1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".86"/><path d="M3 9H1S0 9 0 8s1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".79"/><path d="M4.1 11.37l-1.73 1S1.5 12.87 1 12c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z" fill-opacity=".72"/><path d="M3.63 13.56l1-1.73s.5-.87 1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z" fill-opacity=".65"/><path d="M7 15v-2s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z" fill-opacity=".58"/><path d="M10.63 14.56l-1-1.73s-.5-.87.37-1.37c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37 1.37c-.87.5-1.37-.37-1.37-.37z" fill-opacity=".51"/><path d="M13.56 12.37l-1.73-1s-.87-.5-.37-1.37c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37 1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".44"/><path d="M15 9h-2s-1 0-1-1 1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".37"/><path d="M14.56 5.37l-1.73 1s-.87.5-1.37-.37c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z" fill-opacity=".3"/><path d="M9.64 3.1l.98-1.66s.5-.874 1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z" fill-opacity=".23"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-documentProperties-dark.svg b/web/images/secondaryToolbarButton-documentProperties-dark.svg
new file mode 100644
index 000000000..306e628d7
--- /dev/null
+++ b/web/images/secondaryToolbarButton-documentProperties-dark.svg
@@ -0,0 +1,16 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16
+16"
+fill="rgba(255,255,255,1)">
+<path 
+   d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8zM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6z">
+</path>
+<path 
+   d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z">
+</path>
+<circle
+   cx="8" cy="5" r="1.188">
+</circle>
+</svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-documentProperties.png b/web/images/secondaryToolbarButton-documentProperties.png
deleted file mode 100644
index 40925e25a..000000000
Binary files a/web/images/secondaryToolbarButton-documentProperties.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-documentProperties.svg b/web/images/secondaryToolbarButton-documentProperties.svg
new file mode 100644
index 000000000..6bd55cda7
--- /dev/null
+++ b/web/images/secondaryToolbarButton-documentProperties.svg
@@ -0,0 +1,15 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16
+16">
+<path 
+   d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8zM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6z">
+</path>
+<path 
+   d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z">
+</path>
+<circle
+   cx="8" cy="5" r="1.188">
+</circle>
+</svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-documentProperties@2x.png b/web/images/secondaryToolbarButton-documentProperties@2x.png
deleted file mode 100644
index adb240eaa..000000000
Binary files a/web/images/secondaryToolbarButton-documentProperties@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-firstPage-dark.svg b/web/images/secondaryToolbarButton-firstPage-dark.svg
new file mode 100644
index 000000000..c13ff8671
--- /dev/null
+++ b/web/images/secondaryToolbarButton-firstPage-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="rgba(255,255,255,1)"><path d="M13 13c-.3 0-.5-.1-.7-.3L8 8.4l-4.3 4.3c-.9.9-2.3-.5-1.4-1.4l5-5c.4-.4 1-.4 1.4 0l5 5c.6.6.2 1.7-.7 1.7zm0-11H3C1.7 2 1.7 4 3 4h10c1.3 0 1.3-2 0-2z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-firstPage.png b/web/images/secondaryToolbarButton-firstPage.png
deleted file mode 100644
index e68846aa5..000000000
Binary files a/web/images/secondaryToolbarButton-firstPage.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-firstPage.svg b/web/images/secondaryToolbarButton-firstPage.svg
new file mode 100644
index 000000000..2fa0fa6da
--- /dev/null
+++ b/web/images/secondaryToolbarButton-firstPage.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M13 13c-.3 0-.5-.1-.7-.3L8 8.4l-4.3 4.3c-.9.9-2.3-.5-1.4-1.4l5-5c.4-.4 1-.4 1.4 0l5 5c.6.6.2 1.7-.7 1.7zm0-11H3C1.7 2 1.7 4 3 4h10c1.3 0 1.3-2 0-2z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-firstPage@2x.png b/web/images/secondaryToolbarButton-firstPage@2x.png
deleted file mode 100644
index 3ad8af517..000000000
Binary files a/web/images/secondaryToolbarButton-firstPage@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-handTool-dark.svg b/web/images/secondaryToolbarButton-handTool-dark.svg
new file mode 100644
index 000000000..834d8b0da
--- /dev/null
+++ b/web/images/secondaryToolbarButton-handTool-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)"><path d="M15 3.7V13c0 1.5-1.53 3-3 3H7.13c-.72 0-1.63-.5-2.13-1l-5-5s.84-1 .87-1c.13-.1.33-.2.53-.2.1 0 .3.1.4.2L4 10.6V2.7c0-.6.4-1 1-1s1 .4 1 1v4.6h1V1c0-.6.4-1 1-1s1 .4 1 1v6.3h1V1.7c0-.6.4-1 1-1s1 .4 1 1v5.7h1V3.7c0-.6.4-1 1-1s1 .4 1 1z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-handTool.png b/web/images/secondaryToolbarButton-handTool.png
deleted file mode 100644
index cb85a841b..000000000
Binary files a/web/images/secondaryToolbarButton-handTool.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-handTool.svg b/web/images/secondaryToolbarButton-handTool.svg
new file mode 100644
index 000000000..3d038fabb
--- /dev/null
+++ b/web/images/secondaryToolbarButton-handTool.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M15 3.7V13c0 1.5-1.53 3-3 3H7.13c-.72 0-1.63-.5-2.13-1l-5-5s.84-1 .87-1c.13-.1.33-.2.53-.2.1 0 .3.1.4.2L4 10.6V2.7c0-.6.4-1 1-1s1 .4 1 1v4.6h1V1c0-.6.4-1 1-1s1 .4 1 1v6.3h1V1.7c0-.6.4-1 1-1s1 .4 1 1v5.7h1V3.7c0-.6.4-1 1-1s1 .4 1 1z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-handTool@2x.png b/web/images/secondaryToolbarButton-handTool@2x.png
deleted file mode 100644
index 5c13f77ff..000000000
Binary files a/web/images/secondaryToolbarButton-handTool@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-lastPage-dark.svg b/web/images/secondaryToolbarButton-lastPage-dark.svg
new file mode 100644
index 000000000..8633e420a
--- /dev/null
+++ b/web/images/secondaryToolbarButton-lastPage-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="rgba(255,255,255,1)"><path d="M8 10c-.3 0-.5-.1-.7-.3l-5-5c-.9-.9.5-2.3 1.4-1.4L8 7.6l4.3-4.3c.9-.9 2.3.5 1.4 1.4l-5 5c-.2.2-.4.3-.7.3zm5 2H3c-1.3 0-1.3 2 0 2h10c1.3 0 1.3-2 0-2z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-lastPage.png b/web/images/secondaryToolbarButton-lastPage.png
deleted file mode 100644
index be763e0c4..000000000
Binary files a/web/images/secondaryToolbarButton-lastPage.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-lastPage.svg b/web/images/secondaryToolbarButton-lastPage.svg
new file mode 100644
index 000000000..53fa9a6d0
--- /dev/null
+++ b/web/images/secondaryToolbarButton-lastPage.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 10c-.3 0-.5-.1-.7-.3l-5-5c-.9-.9.5-2.3 1.4-1.4L8 7.6l4.3-4.3c.9-.9 2.3.5 1.4 1.4l-5 5c-.2.2-.4.3-.7.3zm5 2H3c-1.3 0-1.3 2 0 2h10c1.3 0 1.3-2 0-2z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-lastPage@2x.png b/web/images/secondaryToolbarButton-lastPage@2x.png
deleted file mode 100644
index 8570984f2..000000000
Binary files a/web/images/secondaryToolbarButton-lastPage@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-rotateCcw-dark.svg b/web/images/secondaryToolbarButton-rotateCcw-dark.svg
new file mode 100644
index 000000000..1a92f802c
--- /dev/null
+++ b/web/images/secondaryToolbarButton-rotateCcw-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)"><path d="M1 1a1 1 0 011 1v2.4A7 7 0 118 15a7 7 0 01-4.9-2 1 1 0 011.4-1.5 5 5 0 10-1-5.5H6a1 1 0 010 2H1a1 1 0 01-1-1V2a1 1 0 011-1z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-rotateCcw.png b/web/images/secondaryToolbarButton-rotateCcw.png
deleted file mode 100644
index 675d6da2c..000000000
Binary files a/web/images/secondaryToolbarButton-rotateCcw.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-rotateCcw.svg b/web/images/secondaryToolbarButton-rotateCcw.svg
new file mode 100644
index 000000000..c71ea8e8d
--- /dev/null
+++ b/web/images/secondaryToolbarButton-rotateCcw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M1 1a1 1 0 011 1v2.4A7 7 0 118 15a7 7 0 01-4.9-2 1 1 0 011.4-1.5 5 5 0 10-1-5.5H6a1 1 0 010 2H1a1 1 0 01-1-1V2a1 1 0 011-1z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-rotateCcw@2x.png b/web/images/secondaryToolbarButton-rotateCcw@2x.png
deleted file mode 100644
index b9e743122..000000000
Binary files a/web/images/secondaryToolbarButton-rotateCcw@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-rotateCw-dark.svg b/web/images/secondaryToolbarButton-rotateCw-dark.svg
new file mode 100644
index 000000000..2a4ef7385
--- /dev/null
+++ b/web/images/secondaryToolbarButton-rotateCw-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M15 1a1 1 0 0 0-1 1v2.418A6.995 6.995 0 1 0 8 15a6.954 6.954 0 0 0 4.95-2.05 1 1 0 0 0-1.414-1.414A5.019 5.019 0 1 1 12.549 6H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"></path></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-rotateCw.png b/web/images/secondaryToolbarButton-rotateCw.png
deleted file mode 100644
index e1c759888..000000000
Binary files a/web/images/secondaryToolbarButton-rotateCw.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-rotateCw.svg b/web/images/secondaryToolbarButton-rotateCw.svg
new file mode 100644
index 000000000..e1e19e73d
--- /dev/null
+++ b/web/images/secondaryToolbarButton-rotateCw.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M15 1a1 1 0 0 0-1 1v2.418A6.995 6.995 0 1 0 8 15a6.954 6.954 0 0 0 4.95-2.05 1 1 0 0 0-1.414-1.414A5.019 5.019 0 1 1 12.549 6H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"></path></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-rotateCw@2x.png b/web/images/secondaryToolbarButton-rotateCw@2x.png
deleted file mode 100644
index cb257b41c..000000000
Binary files a/web/images/secondaryToolbarButton-rotateCw@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-scrollHorizontal-dark.svg b/web/images/secondaryToolbarButton-scrollHorizontal-dark.svg
new file mode 100644
index 000000000..337f85ef4
--- /dev/null
+++ b/web/images/secondaryToolbarButton-scrollHorizontal-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)"><path d="M0 4h1.5c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5H0zM9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM16 4h-1.5c-1 0-1.5.5-1.5 1.5v5c0 1 .5 1.5 1.5 1.5H16z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-scrollHorizontal.png b/web/images/secondaryToolbarButton-scrollHorizontal.png
deleted file mode 100644
index cb702fc4d..000000000
Binary files a/web/images/secondaryToolbarButton-scrollHorizontal.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-scrollHorizontal.svg b/web/images/secondaryToolbarButton-scrollHorizontal.svg
new file mode 100644
index 000000000..8693eec39
--- /dev/null
+++ b/web/images/secondaryToolbarButton-scrollHorizontal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M0 4h1.5c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5H0zM9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM16 4h-1.5c-1 0-1.5.5-1.5 1.5v5c0 1 .5 1.5 1.5 1.5H16z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-scrollHorizontal@2x.png b/web/images/secondaryToolbarButton-scrollHorizontal@2x.png
deleted file mode 100644
index 7f05289bb..000000000
Binary files a/web/images/secondaryToolbarButton-scrollHorizontal@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-scrollVertical-dark.svg b/web/images/secondaryToolbarButton-scrollVertical-dark.svg
new file mode 100644
index 000000000..41bdd8f14
--- /dev/null
+++ b/web/images/secondaryToolbarButton-scrollVertical-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)"><path d="M9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM11 0v.5c0 1-.5 1.5-1.5 1.5h-3C5.5 2 5 1.5 5 .5V0h6zM11 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-scrollVertical.png b/web/images/secondaryToolbarButton-scrollVertical.png
deleted file mode 100644
index 0b8427a16..000000000
Binary files a/web/images/secondaryToolbarButton-scrollVertical.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-scrollVertical.svg b/web/images/secondaryToolbarButton-scrollVertical.svg
new file mode 100644
index 000000000..ee1cf22f9
--- /dev/null
+++ b/web/images/secondaryToolbarButton-scrollVertical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM11 0v.5c0 1-.5 1.5-1.5 1.5h-3C5.5 2 5 1.5 5 .5V0h6zM11 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-scrollVertical@2x.png b/web/images/secondaryToolbarButton-scrollVertical@2x.png
deleted file mode 100644
index 72ab55ebf..000000000
Binary files a/web/images/secondaryToolbarButton-scrollVertical@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-scrollWrapped-dark.svg b/web/images/secondaryToolbarButton-scrollWrapped-dark.svg
new file mode 100644
index 000000000..cd50526ff
--- /dev/null
+++ b/web/images/secondaryToolbarButton-scrollWrapped-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="rgba(255,255,255,1)"><path d="M5.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C1 4.5 1.5 4 2.5 4zM7 0v.5C7 1.5 6.5 2 5.5 2h-3C1.5 2 1 1.5 1 .5V0h6zM7 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6zM13.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5c0-1 .5-1.5 1.5-1.5zM15 0v.5c0 1-.5 1.5-1.5 1.5h-3C9.5 2 9 1.5 9 .5V0h6zM15 16v-.507c0-1-.5-1.5-1.5-1.5h-3C9.5 14 9 14.5 9 15.5v.5h6z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-scrollWrapped.png b/web/images/secondaryToolbarButton-scrollWrapped.png
deleted file mode 100644
index 165fc8bc0..000000000
Binary files a/web/images/secondaryToolbarButton-scrollWrapped.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-scrollWrapped.svg b/web/images/secondaryToolbarButton-scrollWrapped.svg
new file mode 100644
index 000000000..804e7469b
--- /dev/null
+++ b/web/images/secondaryToolbarButton-scrollWrapped.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M5.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C1 4.5 1.5 4 2.5 4zM7 0v.5C7 1.5 6.5 2 5.5 2h-3C1.5 2 1 1.5 1 .5V0h6zM7 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6zM13.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5c0-1 .5-1.5 1.5-1.5zM15 0v.5c0 1-.5 1.5-1.5 1.5h-3C9.5 2 9 1.5 9 .5V0h6zM15 16v-.507c0-1-.5-1.5-1.5-1.5h-3C9.5 14 9 14.5 9 15.5v.5h6z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-scrollWrapped@2x.png b/web/images/secondaryToolbarButton-scrollWrapped@2x.png
deleted file mode 100644
index 424614119..000000000
Binary files a/web/images/secondaryToolbarButton-scrollWrapped@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-selectTool-dark.svg b/web/images/secondaryToolbarButton-selectTool-dark.svg
new file mode 100644
index 000000000..7a95098af
--- /dev/null
+++ b/web/images/secondaryToolbarButton-selectTool-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M12.408 8.217l-8.083-6.7A.2.2 0 0 0 4 1.672V12.3a.2.2 0 0 0 .333.146l2.56-2.372 1.857 3.9A1.125 1.125 0 1 0 10.782 13L8.913 9.075l3.4-.51a.2.2 0 0 0 .095-.348z"></path></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-selectTool.png b/web/images/secondaryToolbarButton-selectTool.png
deleted file mode 100644
index 25520a6fe..000000000
Binary files a/web/images/secondaryToolbarButton-selectTool.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-selectTool.svg b/web/images/secondaryToolbarButton-selectTool.svg
new file mode 100644
index 000000000..43e978944
--- /dev/null
+++ b/web/images/secondaryToolbarButton-selectTool.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M12.408 8.217l-8.083-6.7A.2.2 0 0 0 4 1.672V12.3a.2.2 0 0 0 .333.146l2.56-2.372 1.857 3.9A1.125 1.125 0 1 0 10.782 13L8.913 9.075l3.4-.51a.2.2 0 0 0 .095-.348z"></path></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-selectTool@2x.png b/web/images/secondaryToolbarButton-selectTool@2x.png
deleted file mode 100644
index a58aaef4f..000000000
Binary files a/web/images/secondaryToolbarButton-selectTool@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-spreadEven-dark.svg b/web/images/secondaryToolbarButton-spreadEven-dark.svg
new file mode 100644
index 000000000..0c9586ed8
--- /dev/null
+++ b/web/images/secondaryToolbarButton-spreadEven-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="rgba(255,255,255,1)"><path d="M1.5 3.5C.5 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm2 1.2c.8 0 1.4.2 1.8.6.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.4-.2.3-.5.7-1 1l-.6.4c-.4.3-.6.4-.75.56-.15.14-.25.24-.35.44H6v1.3H1c0-.6.1-1.1.3-1.5.3-.6.7-1 1.5-1.6.7-.4 1.1-.8 1.28-1 .32-.3.42-.6.42-1 0-.3-.1-.6-.23-.8-.17-.2-.37-.3-.77-.3s-.7.1-.9.5c-.04.2-.1.5-.1.9H1.1c0-.6.1-1.1.3-1.5.4-.7 1.1-1.1 2.1-1.1zM10.54 3.54C9.5 3.54 9 4 9 5v6.5c0 1 .5 1.5 1.54 1.5h4c.96 0 1.46-.5 1.46-1.5V5c0-1-.5-1.46-1.5-1.46zm1.9.95c.7 0 1.3.2 1.7.5.4.4.6.8.6 1.4 0 .4-.1.8-.4 1.1-.2.2-.3.3-.5.4.1 0 .3.1.6.3.4.3.5.8.5 1.4 0 .6-.2 1.2-.6 1.6-.4.5-1.1.7-1.9.7-1 0-1.8-.3-2.2-1-.14-.29-.24-.69-.24-1.29h1.4c0 .3 0 .5.1.7.2.4.5.5 1 .5.3 0 .5-.1.7-.3.2-.2.3-.5.3-.8 0-.5-.2-.8-.6-.95-.2-.05-.5-.15-1-.15v-1c.5 0 .8-.1 1-.14.3-.1.5-.4.5-.9 0-.3-.1-.5-.2-.7-.2-.2-.4-.3-.7-.3-.3 0-.6.1-.75.3-.2.2-.2.5-.2.86h-1.34c0-.4.1-.7.19-1.1 0-.12.2-.32.4-.62.2-.2.4-.3.7-.4.3-.1.6-.1 1-.1z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-spreadEven.png b/web/images/secondaryToolbarButton-spreadEven.png
deleted file mode 100644
index 3fa07e703..000000000
Binary files a/web/images/secondaryToolbarButton-spreadEven.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-spreadEven.svg b/web/images/secondaryToolbarButton-spreadEven.svg
new file mode 100644
index 000000000..ddec5e68d
--- /dev/null
+++ b/web/images/secondaryToolbarButton-spreadEven.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1.5 3.5C.5 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm2 1.2c.8 0 1.4.2 1.8.6.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.4-.2.3-.5.7-1 1l-.6.4c-.4.3-.6.4-.75.56-.15.14-.25.24-.35.44H6v1.3H1c0-.6.1-1.1.3-1.5.3-.6.7-1 1.5-1.6.7-.4 1.1-.8 1.28-1 .32-.3.42-.6.42-1 0-.3-.1-.6-.23-.8-.17-.2-.37-.3-.77-.3s-.7.1-.9.5c-.04.2-.1.5-.1.9H1.1c0-.6.1-1.1.3-1.5.4-.7 1.1-1.1 2.1-1.1zM10.54 3.54C9.5 3.54 9 4 9 5v6.5c0 1 .5 1.5 1.54 1.5h4c.96 0 1.46-.5 1.46-1.5V5c0-1-.5-1.46-1.5-1.46zm1.9.95c.7 0 1.3.2 1.7.5.4.4.6.8.6 1.4 0 .4-.1.8-.4 1.1-.2.2-.3.3-.5.4.1 0 .3.1.6.3.4.3.5.8.5 1.4 0 .6-.2 1.2-.6 1.6-.4.5-1.1.7-1.9.7-1 0-1.8-.3-2.2-1-.14-.29-.24-.69-.24-1.29h1.4c0 .3 0 .5.1.7.2.4.5.5 1 .5.3 0 .5-.1.7-.3.2-.2.3-.5.3-.8 0-.5-.2-.8-.6-.95-.2-.05-.5-.15-1-.15v-1c.5 0 .8-.1 1-.14.3-.1.5-.4.5-.9 0-.3-.1-.5-.2-.7-.2-.2-.4-.3-.7-.3-.3 0-.6.1-.75.3-.2.2-.2.5-.2.86h-1.34c0-.4.1-.7.19-1.1 0-.12.2-.32.4-.62.2-.2.4-.3.7-.4.3-.1.6-.1 1-.1z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-spreadEven@2x.png b/web/images/secondaryToolbarButton-spreadEven@2x.png
deleted file mode 100644
index 32e5033d7..000000000
Binary files a/web/images/secondaryToolbarButton-spreadEven@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-spreadNone-dark.svg b/web/images/secondaryToolbarButton-spreadNone-dark.svg
new file mode 100644
index 000000000..75e1b985d
--- /dev/null
+++ b/web/images/secondaryToolbarButton-spreadNone-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)"><path d="M6 3c-1 0-1.5.5-1.5 1.5v7c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5v-7c0-1-.5-1.5-1.5-1.5z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-spreadNone.png b/web/images/secondaryToolbarButton-spreadNone.png
deleted file mode 100644
index 161147354..000000000
Binary files a/web/images/secondaryToolbarButton-spreadNone.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-spreadNone.svg b/web/images/secondaryToolbarButton-spreadNone.svg
new file mode 100644
index 000000000..63318c56b
--- /dev/null
+++ b/web/images/secondaryToolbarButton-spreadNone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M6 3c-1 0-1.5.5-1.5 1.5v7c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5v-7c0-1-.5-1.5-1.5-1.5z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-spreadNone@2x.png b/web/images/secondaryToolbarButton-spreadNone@2x.png
deleted file mode 100644
index 8e51cf3b7..000000000
Binary files a/web/images/secondaryToolbarButton-spreadNone@2x.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-spreadOdd-dark.svg b/web/images/secondaryToolbarButton-spreadOdd-dark.svg
new file mode 100644
index 000000000..8dff9598e
--- /dev/null
+++ b/web/images/secondaryToolbarButton-spreadOdd-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="rgba(255,255,255,1)"><path d="M10.56 3.5C9.56 3.5 9 4 9 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.93 1.2c.8 0 1.4.2 1.8.64.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.44-.2.3-.6.6-1 .93l-.6.4c-.4.3-.6.4-.7.55-.1.1-.2.2-.3.4h3.2v1.27h-5c0-.5.1-1 .3-1.43.2-.49.7-1 1.5-1.54.7-.5 1.1-.8 1.3-1.02.3-.3.4-.7.4-1.05 0-.3-.1-.6-.3-.77-.2-.2-.4-.3-.7-.3-.4 0-.7.2-.9.5-.1.2-.1.5-.2.9h-1.4c0-.6.2-1.1.3-1.5.4-.7 1.1-1.1 2-1.1zM1.54 3.5C.54 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.54 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.8 1.125H4.5V12H3V6.9H1.3v-1c.5 0 .8 0 .97-.03.33-.07.53-.17.73-.37.1-.2.2-.3.25-.5.05-.2.05-.3.05-.3z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-spreadOdd.png b/web/images/secondaryToolbarButton-spreadOdd.png
deleted file mode 100644
index 5126313a1..000000000
Binary files a/web/images/secondaryToolbarButton-spreadOdd.png and /dev/null differ
diff --git a/web/images/secondaryToolbarButton-spreadOdd.svg b/web/images/secondaryToolbarButton-spreadOdd.svg
new file mode 100644
index 000000000..29909e9fa
--- /dev/null
+++ b/web/images/secondaryToolbarButton-spreadOdd.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M10.56 3.5C9.56 3.5 9 4 9 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.93 1.2c.8 0 1.4.2 1.8.64.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.44-.2.3-.6.6-1 .93l-.6.4c-.4.3-.6.4-.7.55-.1.1-.2.2-.3.4h3.2v1.27h-5c0-.5.1-1 .3-1.43.2-.49.7-1 1.5-1.54.7-.5 1.1-.8 1.3-1.02.3-.3.4-.7.4-1.05 0-.3-.1-.6-.3-.77-.2-.2-.4-.3-.7-.3-.4 0-.7.2-.9.5-.1.2-.1.5-.2.9h-1.4c0-.6.2-1.1.3-1.5.4-.7 1.1-1.1 2-1.1zM1.54 3.5C.54 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.54 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.8 1.125H4.5V12H3V6.9H1.3v-1c.5 0 .8 0 .97-.03.33-.07.53-.17.73-.37.1-.2.2-.3.25-.5.05-.2.05-.3.05-.3z"/></svg>
\ No newline at end of file
diff --git a/web/images/secondaryToolbarButton-spreadOdd@2x.png b/web/images/secondaryToolbarButton-spreadOdd@2x.png
deleted file mode 100644
index 5996b74db..000000000
Binary files a/web/images/secondaryToolbarButton-spreadOdd@2x.png and /dev/null differ
diff --git a/web/images/shadow.png b/web/images/shadow.png
index 31d3bdb14..a00061ac7 100644
Binary files a/web/images/shadow.png and b/web/images/shadow.png differ
diff --git a/web/images/texture.png b/web/images/texture.png
deleted file mode 100644
index 12bae83a9..000000000
Binary files a/web/images/texture.png and /dev/null differ
diff --git a/web/images/toolbarButton-bookmark-dark.svg b/web/images/toolbarButton-bookmark-dark.svg
new file mode 100644
index 000000000..7bf332972
--- /dev/null
+++ b/web/images/toolbarButton-bookmark-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)"><path d="M4 16V2s0-1 1-1h6s1 0 1 1v14l-4-5z"/></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-bookmark.png b/web/images/toolbarButton-bookmark.png
deleted file mode 100644
index a187be6c9..000000000
Binary files a/web/images/toolbarButton-bookmark.png and /dev/null differ
diff --git a/web/images/toolbarButton-bookmark.svg b/web/images/toolbarButton-bookmark.svg
new file mode 100644
index 000000000..79d39b090
--- /dev/null
+++ b/web/images/toolbarButton-bookmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M4 16V2s0-1 1-1h6s1 0 1 1v14l-4-5z"/></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-bookmark@2x.png b/web/images/toolbarButton-bookmark@2x.png
deleted file mode 100644
index 4efbaa675..000000000
Binary files a/web/images/toolbarButton-bookmark@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-download-dark.svg b/web/images/toolbarButton-download-dark.svg
new file mode 100644
index 000000000..d2a92e5d4
--- /dev/null
+++ b/web/images/toolbarButton-download-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M14 3h-2v2h2v8H2V5h7V3h-.849L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM2 3h3.219l1.072 1H2z"></path><path d="M8.146 6.146a.5.5 0 0 0 0 .707l2 2a.5.5 0 0 0 .707 0l2-2a.5.5 0 1 0-.707-.707L11 7.293V.5a.5.5 0 0 0-1 0v6.793L8.854 6.146a.5.5 0 0 0-.708 0z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-download.png b/web/images/toolbarButton-download.png
deleted file mode 100644
index eaab35f09..000000000
Binary files a/web/images/toolbarButton-download.png and /dev/null differ
diff --git a/web/images/toolbarButton-download.svg b/web/images/toolbarButton-download.svg
new file mode 100644
index 000000000..2cdb5db3c
--- /dev/null
+++ b/web/images/toolbarButton-download.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14 3h-2v2h2v8H2V5h7V3h-.849L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM2 3h3.219l1.072 1H2z"></path><path d="M8.146 6.146a.5.5 0 0 0 0 .707l2 2a.5.5 0 0 0 .707 0l2-2a.5.5 0 1 0-.707-.707L11 7.293V.5a.5.5 0 0 0-1 0v6.793L8.854 6.146a.5.5 0 0 0-.708 0z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-download@2x.png b/web/images/toolbarButton-download@2x.png
deleted file mode 100644
index 896face45..000000000
Binary files a/web/images/toolbarButton-download@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-menuArrow-dark.svg b/web/images/toolbarButton-menuArrow-dark.svg
new file mode 100644
index 000000000..76551001a
--- /dev/null
+++ b/web/images/toolbarButton-menuArrow-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-menuArrow.svg b/web/images/toolbarButton-menuArrow.svg
new file mode 100644
index 000000000..a81eb0296
--- /dev/null
+++ b/web/images/toolbarButton-menuArrow.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-menuArrows.png b/web/images/toolbarButton-menuArrows.png
deleted file mode 100644
index e50ca4eee..000000000
Binary files a/web/images/toolbarButton-menuArrows.png and /dev/null differ
diff --git a/web/images/toolbarButton-menuArrows@2x.png b/web/images/toolbarButton-menuArrows@2x.png
deleted file mode 100644
index f7570bc0d..000000000
Binary files a/web/images/toolbarButton-menuArrows@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-openFile-dark.svg b/web/images/toolbarButton-openFile-dark.svg
new file mode 100644
index 000000000..0bd612f0e
--- /dev/null
+++ b/web/images/toolbarButton-openFile-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M14.859 3.2a1.335 1.335 0 0 1-1.217.8H13v1h1v8H2V5h8V4h-.642a1.365 1.365 0 0 1-1.325-1.11L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-1.141-1.8zM2 3h3.219l1.072 1H2zm7.854-.146L11 1.707V8.5a.5.5 0 0 0 1 0V1.707l1.146 1.146a.5.5 0 1 0 .707-.707l-2-2a.5.5 0 0 0-.707 0l-2 2a.5.5 0 0 0 .707.707z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-openFile.png b/web/images/toolbarButton-openFile.png
deleted file mode 100644
index b5cf1bd06..000000000
Binary files a/web/images/toolbarButton-openFile.png and /dev/null differ
diff --git a/web/images/toolbarButton-openFile.svg b/web/images/toolbarButton-openFile.svg
new file mode 100644
index 000000000..cb35980f0
--- /dev/null
+++ b/web/images/toolbarButton-openFile.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14.859 3.2a1.335 1.335 0 0 1-1.217.8H13v1h1v8H2V5h8V4h-.642a1.365 1.365 0 0 1-1.325-1.11L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-1.141-1.8zM2 3h3.219l1.072 1H2zm7.854-.146L11 1.707V8.5a.5.5 0 0 0 1 0V1.707l1.146 1.146a.5.5 0 1 0 .707-.707l-2-2a.5.5 0 0 0-.707 0l-2 2a.5.5 0 0 0 .707.707z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-openFile@2x.png b/web/images/toolbarButton-openFile@2x.png
deleted file mode 100644
index 91ab76593..000000000
Binary files a/web/images/toolbarButton-openFile@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-pageDown-dark.svg b/web/images/toolbarButton-pageDown-dark.svg
new file mode 100644
index 000000000..c2ca60c8f
--- /dev/null
+++ b/web/images/toolbarButton-pageDown-dark.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16
+16"
+fill="rgba(255,255,255,1)"><path transform='rotate(90) translate(0, -16)'
+d="M15.707 7.293l-6-6a1 1 0 0 0-1.414 1.414L12.586 7H1a1 1 0 0 0 0 2h11.586l-4.293
+4.293a1 1 0 1 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-pageDown.png b/web/images/toolbarButton-pageDown.png
deleted file mode 100644
index 8219ecf83..000000000
Binary files a/web/images/toolbarButton-pageDown.png and /dev/null differ
diff --git a/web/images/toolbarButton-pageDown.svg b/web/images/toolbarButton-pageDown.svg
new file mode 100644
index 000000000..c5d8b0f3f
--- /dev/null
+++ b/web/images/toolbarButton-pageDown.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16
+16"><path transform='rotate(90) translate(0, -16)'
+d="M15.707 7.293l-6-6a1 1 0 0 0-1.414 1.414L12.586 7H1a1 1 0 0 0 0 2h11.586l-4.293
+4.293a1 1 0 1 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-pageDown@2x.png b/web/images/toolbarButton-pageDown@2x.png
deleted file mode 100644
index 758c01d83..000000000
Binary files a/web/images/toolbarButton-pageDown@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-pageUp-dark.svg b/web/images/toolbarButton-pageUp-dark.svg
new file mode 100644
index 000000000..dddc4ab26
--- /dev/null
+++ b/web/images/toolbarButton-pageUp-dark.svg
@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16
+16"
+fill="rgba(255,255,255,1)">
+<path 
+   transform='rotate(90) translate(0, -16)'
+   d="M15 7H3.414l4.293-4.293a1 1 0 0
+0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L3.414 9H15a1 1 0 0
+0 0-2z">
+</path>
+</svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-pageUp.png b/web/images/toolbarButton-pageUp.png
deleted file mode 100644
index fb9daa337..000000000
Binary files a/web/images/toolbarButton-pageUp.png and /dev/null differ
diff --git a/web/images/toolbarButton-pageUp.svg b/web/images/toolbarButton-pageUp.svg
new file mode 100644
index 000000000..aa0160ab9
--- /dev/null
+++ b/web/images/toolbarButton-pageUp.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16
+16">
+<path 
+   transform='rotate(90) translate(0, -16)'
+   d="M15 7H3.414l4.293-4.293a1 1 0 0
+0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L3.414 9H15a1 1 0 0
+0 0-2z">
+</path>
+</svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-pageUp@2x.png b/web/images/toolbarButton-pageUp@2x.png
deleted file mode 100644
index a5cfd755b..000000000
Binary files a/web/images/toolbarButton-pageUp@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-presentationMode-dark.svg b/web/images/toolbarButton-presentationMode-dark.svg
new file mode 100644
index 000000000..13fa9dc7c
--- /dev/null
+++ b/web/images/toolbarButton-presentationMode-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="rgba(255,255,255,1)"><path d="M.5 1H7s0-1 1-1 1 1 1 1h6.5s.5 0 .5.5-.5.5-.5.5H.5S0 2 0 1.5.5 1 .5 1zM1 3h14v7c0 2-1 2-2 2H3c-1 0-2 0-2-2zm5 1v7l6-3.5zM3.72 15.33l.53-2s0-.5.65-.35c.51.13.38.63.38.63l-.53 2s0 .5-.64.35c-.53-.13-.39-.63-.39-.63zM11.24 15.61l-.53-1.99s0-.5.38-.63c.51-.13.64.35.64.35l.53 2s0 .5-.38.63c-.5.13-.64-.35-.65-.35z"/></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-presentationMode.png b/web/images/toolbarButton-presentationMode.png
deleted file mode 100644
index 3ac21244d..000000000
Binary files a/web/images/toolbarButton-presentationMode.png and /dev/null differ
diff --git a/web/images/toolbarButton-presentationMode.svg b/web/images/toolbarButton-presentationMode.svg
new file mode 100644
index 000000000..3f1f832e5
--- /dev/null
+++ b/web/images/toolbarButton-presentationMode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M.5 1H7s0-1 1-1 1 1 1 1h6.5s.5 0 .5.5-.5.5-.5.5H.5S0 2 0 1.5.5 1 .5 1zM1 3h14v7c0 2-1 2-2 2H3c-1 0-2 0-2-2zm5 1v7l6-3.5zM3.72 15.33l.53-2s0-.5.65-.35c.51.13.38.63.38.63l-.53 2s0 .5-.64.35c-.53-.13-.39-.63-.39-.63zM11.24 15.61l-.53-1.99s0-.5.38-.63c.51-.13.64.35.64.35l.53 2s0 .5-.38.63c-.5.13-.64-.35-.65-.35z"/></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-presentationMode@2x.png b/web/images/toolbarButton-presentationMode@2x.png
deleted file mode 100644
index cada9e791..000000000
Binary files a/web/images/toolbarButton-presentationMode@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-print-dark.svg b/web/images/toolbarButton-print-dark.svg
new file mode 100644
index 000000000..ad37022f0
--- /dev/null
+++ b/web/images/toolbarButton-print-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M14 5h-1V1a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4H2a2 2 0 0 0-2 2v5h3v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-3h3V7a2 2 0 0 0-2-2zM2.5 8a.5.5 0 1 1 .5-.5.5.5 0 0 1-.5.5zm9.5 7H4v-5h8zm0-10H4V1h8zm-6.5 7h4a.5.5 0 0 0 0-1h-4a.5.5 0 1 0 0 1zm0 2h5a.5.5 0 0 0 0-1h-5a.5.5 0 1 0 0 1z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-print.png b/web/images/toolbarButton-print.png
deleted file mode 100644
index 51275e54b..000000000
Binary files a/web/images/toolbarButton-print.png and /dev/null differ
diff --git a/web/images/toolbarButton-print.svg b/web/images/toolbarButton-print.svg
new file mode 100644
index 000000000..d521c9ad2
--- /dev/null
+++ b/web/images/toolbarButton-print.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14 5h-1V1a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4H2a2 2 0 0 0-2 2v5h3v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-3h3V7a2 2 0 0 0-2-2zM2.5 8a.5.5 0 1 1 .5-.5.5.5 0 0 1-.5.5zm9.5 7H4v-5h8zm0-10H4V1h8zm-6.5 7h4a.5.5 0 0 0 0-1h-4a.5.5 0 1 0 0 1zm0 2h5a.5.5 0 0 0 0-1h-5a.5.5 0 1 0 0 1z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-print@2x.png b/web/images/toolbarButton-print@2x.png
deleted file mode 100644
index 53d18daf7..000000000
Binary files a/web/images/toolbarButton-print@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-search-dark.svg b/web/images/toolbarButton-search-dark.svg
new file mode 100644
index 000000000..cec8a4206
--- /dev/null
+++ b/web/images/toolbarButton-search-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M15.707 14.293l-4.822-4.822a6.019 6.019 0 1 0-1.414 1.414l4.822 4.822a1 1 0 0 0 1.414-1.414zM6 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-search.png b/web/images/toolbarButton-search.png
deleted file mode 100644
index f9b75579b..000000000
Binary files a/web/images/toolbarButton-search.png and /dev/null differ
diff --git a/web/images/toolbarButton-search.svg b/web/images/toolbarButton-search.svg
new file mode 100644
index 000000000..28b7774eb
--- /dev/null
+++ b/web/images/toolbarButton-search.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M15.707 14.293l-4.822-4.822a6.019 6.019 0 1 0-1.414 1.414l4.822 4.822a1 1 0 0 0 1.414-1.414zM6 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-search@2x.png b/web/images/toolbarButton-search@2x.png
deleted file mode 100644
index 456b13324..000000000
Binary files a/web/images/toolbarButton-search@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-secondaryToolbarToggle-dark.svg b/web/images/toolbarButton-secondaryToolbarToggle-dark.svg
new file mode 100644
index 000000000..0160c07cd
--- /dev/null
+++ b/web/images/toolbarButton-secondaryToolbarToggle-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M8.707 7.293l-5-5a1 1 0 0 0-1.414 1.414L6.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414zm6 0l-5-5a1 1 0 0 0-1.414 1.414L12.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-secondaryToolbarToggle.png b/web/images/toolbarButton-secondaryToolbarToggle.png
deleted file mode 100644
index 1f90f83da..000000000
Binary files a/web/images/toolbarButton-secondaryToolbarToggle.png and /dev/null differ
diff --git a/web/images/toolbarButton-secondaryToolbarToggle.svg b/web/images/toolbarButton-secondaryToolbarToggle.svg
new file mode 100644
index 000000000..dbef23804
--- /dev/null
+++ b/web/images/toolbarButton-secondaryToolbarToggle.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8.707 7.293l-5-5a1 1 0 0 0-1.414 1.414L6.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414zm6 0l-5-5a1 1 0 0 0-1.414 1.414L12.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-secondaryToolbarToggle@2x.png b/web/images/toolbarButton-secondaryToolbarToggle@2x.png
deleted file mode 100644
index b066fe5cb..000000000
Binary files a/web/images/toolbarButton-secondaryToolbarToggle@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-sidebarToggle-dark.svg b/web/images/toolbarButton-sidebarToggle-dark.svg
new file mode 100644
index 000000000..0118e41a8
--- /dev/null
+++ b/web/images/toolbarButton-sidebarToggle-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M3 1h10a3.008 3.008 0 0 1 3 3v8a3.009 3.009 0 0 1-3 3H3a3.005 3.005 0 0 1-3-3V4a3.013 3.013 0 0 1 3-3zm11 11V4a1 1 0 0 0-1-1H8v10h5a1 1 0 0 0 1-1zM2 12a1 1 0 0 0 1 1h4V3H3a1 1 0 0 0-1 1v8z"></path><path d="M3.5 5h2a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1zm0 2h2a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1zm1 2h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-sidebarToggle.png b/web/images/toolbarButton-sidebarToggle.png
deleted file mode 100644
index 025dc9040..000000000
Binary files a/web/images/toolbarButton-sidebarToggle.png and /dev/null differ
diff --git a/web/images/toolbarButton-sidebarToggle.svg b/web/images/toolbarButton-sidebarToggle.svg
new file mode 100644
index 000000000..691c41cb1
--- /dev/null
+++ b/web/images/toolbarButton-sidebarToggle.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3 1h10a3.008 3.008 0 0 1 3 3v8a3.009 3.009 0 0 1-3 3H3a3.005 3.005 0 0 1-3-3V4a3.013 3.013 0 0 1 3-3zm11 11V4a1 1 0 0 0-1-1H8v10h5a1 1 0 0 0 1-1zM2 12a1 1 0 0 0 1 1h4V3H3a1 1 0 0 0-1 1v8z"></path><path d="M3.5 5h2a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1zm0 2h2a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1zm1 2h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-sidebarToggle@2x.png b/web/images/toolbarButton-sidebarToggle@2x.png
deleted file mode 100644
index 7f834df94..000000000
Binary files a/web/images/toolbarButton-sidebarToggle@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-viewAttachments-dark.svg b/web/images/toolbarButton-viewAttachments-dark.svg
new file mode 100644
index 000000000..c9714fdea
--- /dev/null
+++ b/web/images/toolbarButton-viewAttachments-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)"><path d="M6.2 2s.5-.5 1.06 0c.5.5 0 1 0 1l-4.6 4.61s-2.5 2.5 0 5 5 0 5 0L13.8 6.4s1.6-1.6 0-3.2-3.2 0-3.2 0L5.8 8s-.7.7 0 1.4 1.4 0 1.4 0l3.9-3.9s.6-.5 1 0c.5.5 0 1 0 1l-3.8 4s-1.8 1.8-3.5 0C3 8.7 4.8 7 4.8 7l4.7-4.9s2.7-2.6 5.3 0c2.6 2.6 0 5.3 0 5.3l-6.2 6.3s-3.5 3.5-7 0 0-7 0-7z"/></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-viewAttachments.png b/web/images/toolbarButton-viewAttachments.png
deleted file mode 100644
index fcd0b268a..000000000
Binary files a/web/images/toolbarButton-viewAttachments.png and /dev/null differ
diff --git a/web/images/toolbarButton-viewAttachments.svg b/web/images/toolbarButton-viewAttachments.svg
new file mode 100644
index 000000000..e914ec083
--- /dev/null
+++ b/web/images/toolbarButton-viewAttachments.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M6.2 2s.5-.5 1.06 0c.5.5 0 1 0 1l-4.6 4.61s-2.5 2.5 0 5 5 0 5 0L13.8 6.4s1.6-1.6 0-3.2-3.2 0-3.2 0L5.8 8s-.7.7 0 1.4 1.4 0 1.4 0l3.9-3.9s.6-.5 1 0c.5.5 0 1 0 1l-3.8 4s-1.8 1.8-3.5 0C3 8.7 4.8 7 4.8 7l4.7-4.9s2.7-2.6 5.3 0c2.6 2.6 0 5.3 0 5.3l-6.2 6.3s-3.5 3.5-7 0 0-7 0-7z"/></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-viewAttachments@2x.png b/web/images/toolbarButton-viewAttachments@2x.png
deleted file mode 100644
index 4a5e2b8a3..000000000
Binary files a/web/images/toolbarButton-viewAttachments@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-viewOutline-dark.svg b/web/images/toolbarButton-viewOutline-dark.svg
new file mode 100644
index 000000000..1704d961a
--- /dev/null
+++ b/web/images/toolbarButton-viewOutline-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
+fill="rgba(255,255,255,1)"><path d="M14 9H8c-1.3 0-1.3 2 0 2h6c1.3 0 1.3-2 0-2zm0-8H5C3.7 1 3.7 3 5 3h9c1.3 0 1.3-2 0-2zM2 1C1 1 .7 2 1.3 2.7 2 3.3 3 3 3 2c0-.5-.4-1-1-1zm3 8c-1 0-1.3 1-.7 1.7.6.6 1.7.2 1.7-.7 0-.5-.4-1-1-1zM14 5H5C3.6 5 3.6 7 5 7h9c1.3 0 1.3-2 0-2zM2 5c-.9 0-1.4 1-.7 1.7C2 7.3 3 6.9 3 6c0-.6-.5-1-1-1zM14 13H5c-1.3 0-1.3 2 0 2h9c1.3 0 1.3-2 0-2zM2 13c-1 0-1.3 1-.7 1.7.7.6 1.7.2 1.7-.712 0-.5-.4-1-1-1z"/></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-viewOutline.png b/web/images/toolbarButton-viewOutline.png
deleted file mode 100644
index 976365a50..000000000
Binary files a/web/images/toolbarButton-viewOutline.png and /dev/null differ
diff --git a/web/images/toolbarButton-viewOutline.svg b/web/images/toolbarButton-viewOutline.svg
new file mode 100644
index 000000000..030c28dfe
--- /dev/null
+++ b/web/images/toolbarButton-viewOutline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M14 9H8c-1.3 0-1.3 2 0 2h6c1.3 0 1.3-2 0-2zm0-8H5C3.7 1 3.7 3 5 3h9c1.3 0 1.3-2 0-2zM2 1C1 1 .7 2 1.3 2.7 2 3.3 3 3 3 2c0-.5-.4-1-1-1zm3 8c-1 0-1.3 1-.7 1.7.6.6 1.7.2 1.7-.7 0-.5-.4-1-1-1zM14 5H5C3.6 5 3.6 7 5 7h9c1.3 0 1.3-2 0-2zM2 5c-.9 0-1.4 1-.7 1.7C2 7.3 3 6.9 3 6c0-.6-.5-1-1-1zM14 13H5c-1.3 0-1.3 2 0 2h9c1.3 0 1.3-2 0-2zM2 13c-1 0-1.3 1-.7 1.7.7.6 1.7.2 1.7-.712 0-.5-.4-1-1-1z"/></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-viewOutline@2x.png b/web/images/toolbarButton-viewOutline@2x.png
deleted file mode 100644
index b6a197fdf..000000000
Binary files a/web/images/toolbarButton-viewOutline@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-viewThumbnail-dark.svg b/web/images/toolbarButton-viewThumbnail-dark.svg
new file mode 100644
index 000000000..17c55f7b8
--- /dev/null
+++ b/web/images/toolbarButton-viewThumbnail-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><g style="--darkreader-inline-fill:rgba(81, 82, 83, 0.8);" data-darkreader-inline-fill=""><rect x="1" y="1" width="6" height="6" rx="1" ry="1"></rect><rect x="9" y="1" width="6" height="6" rx="1" ry="1"></rect><rect x="1" y="9" width="6" height="6" rx="1" ry="1"></rect><rect x="9" y="9" width="6" height="6" rx="1" ry="1"></rect></g></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-viewThumbnail.png b/web/images/toolbarButton-viewThumbnail.png
deleted file mode 100644
index 584ba5588..000000000
Binary files a/web/images/toolbarButton-viewThumbnail.png and /dev/null differ
diff --git a/web/images/toolbarButton-viewThumbnail.svg b/web/images/toolbarButton-viewThumbnail.svg
new file mode 100644
index 000000000..b997ec49a
--- /dev/null
+++ b/web/images/toolbarButton-viewThumbnail.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g style="--darkreader-inline-fill:rgba(81, 82, 83, 0.8);" data-darkreader-inline-fill=""><rect x="1" y="1" width="6" height="6" rx="1" ry="1"></rect><rect x="9" y="1" width="6" height="6" rx="1" ry="1"></rect><rect x="1" y="9" width="6" height="6" rx="1" ry="1"></rect><rect x="9" y="9" width="6" height="6" rx="1" ry="1"></rect></g></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-viewThumbnail@2x.png b/web/images/toolbarButton-viewThumbnail@2x.png
deleted file mode 100644
index a0208b413..000000000
Binary files a/web/images/toolbarButton-viewThumbnail@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-zoomIn-dark.svg b/web/images/toolbarButton-zoomIn-dark.svg
new file mode 100644
index 000000000..9b615541e
--- /dev/null
+++ b/web/images/toolbarButton-zoomIn-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><path d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 0 0 2 0V9h5a1 1 0 0 0 0-2z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-zoomIn.png b/web/images/toolbarButton-zoomIn.png
deleted file mode 100644
index 513d081bc..000000000
Binary files a/web/images/toolbarButton-zoomIn.png and /dev/null differ
diff --git a/web/images/toolbarButton-zoomIn.svg b/web/images/toolbarButton-zoomIn.svg
new file mode 100644
index 000000000..480d2cef0
--- /dev/null
+++ b/web/images/toolbarButton-zoomIn.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 0 0 2 0V9h5a1 1 0 0 0 0-2z"></path></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-zoomIn@2x.png b/web/images/toolbarButton-zoomIn@2x.png
deleted file mode 100644
index d5d49d5ff..000000000
Binary files a/web/images/toolbarButton-zoomIn@2x.png and /dev/null differ
diff --git a/web/images/toolbarButton-zoomOut-dark.svg b/web/images/toolbarButton-zoomOut-dark.svg
new file mode 100644
index 000000000..0fb3594d1
--- /dev/null
+++ b/web/images/toolbarButton-zoomOut-dark.svg
@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+fill="rgba(255,255,255,1)"><rect x="2" y="7" width="12" height="2" rx="1"></rect></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-zoomOut.png b/web/images/toolbarButton-zoomOut.png
deleted file mode 100644
index 156c26b94..000000000
Binary files a/web/images/toolbarButton-zoomOut.png and /dev/null differ
diff --git a/web/images/toolbarButton-zoomOut.svg b/web/images/toolbarButton-zoomOut.svg
new file mode 100644
index 000000000..527f52106
--- /dev/null
+++ b/web/images/toolbarButton-zoomOut.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="2" y="7" width="12" height="2" rx="1"></rect></svg>
\ No newline at end of file
diff --git a/web/images/toolbarButton-zoomOut@2x.png b/web/images/toolbarButton-zoomOut@2x.png
deleted file mode 100644
index 959e1919d..000000000
Binary files a/web/images/toolbarButton-zoomOut@2x.png and /dev/null differ
diff --git a/web/images/treeitem-collapsed-dark.svg b/web/images/treeitem-collapsed-dark.svg
new file mode 100644
index 000000000..1fb655162
--- /dev/null
+++ b/web/images/treeitem-collapsed-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="rgba(255,255,255,1)"><path d="M13 9L6 5v8z"/></svg>
\ No newline at end of file
diff --git a/web/images/treeitem-collapsed.png b/web/images/treeitem-collapsed.png
deleted file mode 100644
index 06d4d3769..000000000
Binary files a/web/images/treeitem-collapsed.png and /dev/null differ
diff --git a/web/images/treeitem-collapsed.svg b/web/images/treeitem-collapsed.svg
new file mode 100644
index 000000000..831cddfc8
--- /dev/null
+++ b/web/images/treeitem-collapsed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M13 9L6 5v8z"/></svg>
\ No newline at end of file
diff --git a/web/images/treeitem-collapsed@2x.png b/web/images/treeitem-collapsed@2x.png
deleted file mode 100644
index eec1e58c1..000000000
Binary files a/web/images/treeitem-collapsed@2x.png and /dev/null differ
diff --git a/web/images/treeitem-expanded-dark.svg b/web/images/treeitem-expanded-dark.svg
new file mode 100644
index 000000000..695b0aa61
--- /dev/null
+++ b/web/images/treeitem-expanded-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="rgba(255,255,255,1)"><path d="M10 13l4-7H6z"/></svg>
\ No newline at end of file
diff --git a/web/images/treeitem-expanded.png b/web/images/treeitem-expanded.png
deleted file mode 100644
index c8d557351..000000000
Binary files a/web/images/treeitem-expanded.png and /dev/null differ
diff --git a/web/images/treeitem-expanded.svg b/web/images/treeitem-expanded.svg
new file mode 100644
index 000000000..2d45f0c8d
--- /dev/null
+++ b/web/images/treeitem-expanded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M10 13l4-7H6z"/></svg>
\ No newline at end of file
diff --git a/web/images/treeitem-expanded@2x.png b/web/images/treeitem-expanded@2x.png
deleted file mode 100644
index 3b3b6103b..000000000
Binary files a/web/images/treeitem-expanded@2x.png and /dev/null differ
diff --git a/web/viewer.css b/web/viewer.css
index 4961df400..a67b3f1a8 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -19,6 +19,143 @@
   --sidebar-width: 200px;
   --sidebar-transition-duration: 200ms;
   --sidebar-transition-timing-function: ease;
+
+  --toolbar-icon-opacity: 0.7;
+  --doorhanger-icon-opacity: 0.9;
+
+  --main-color: rgba(12, 12, 13, 1);
+  --body-bg-color: rgba(237, 237, 240, 1);
+  --errorWrapper-bg-color: rgba(255, 74, 74, 1);
+  --progressBar-color: rgba(10, 132, 255, 1);
+  --scrollbar-color: auto;
+  --scrollbar-bg-color: auto;
+
+  --sidebar-bg-color: rgba(245, 246, 247, 1);
+  --toolbar-bg-color: rgba(249, 249, 250, 1);
+  --toolbar-border-color: rgba(204, 204, 204, 1);
+  --button-hover-color: rgba(221, 222, 223, 1);
+  --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
+  --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
+  --separator-color: rgba(0, 0, 0, 0.3);
+  --field-color: rgba(6, 6, 6, 1);
+  --field-bg-color: rgba(255, 255, 255, 1);
+  --field-border-color: rgba(187, 187, 188, 1);
+  --findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1);
+  --outline-color: rgba(0, 0, 0, 0.8);
+  --outline-hover-color: rgba(0, 0, 0, 0.9);
+  --outline-active-color: rgba(0, 0, 0, 0.08);
+  --outline-active-bg-color: rgba(0, 0, 0, 1);
+  --sidebaritem-bg-color: rgba(0, 0, 0, 0.15);
+  --doorhanger-bg-color: rgba(255, 255, 255, 1);
+  --doorhanger-border-color: rgba(12, 12, 13, 0.2);
+  --doorhanger-hover-color: rgba(237, 237, 237, 1);
+  --doorhanger-separator-color: rgba(222, 222, 222, 1);
+  --overlay-button-bg-color: rgba(12, 12, 13, 0.1);
+  --overlay-button-hover-color: rgba(12, 12, 13, 0.3);
+
+  --loading-icon: url(images/loading.svg);
+  --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
+  --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
+  --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
+  --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
+  --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
+  --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
+  --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
+  --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
+  --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
+  --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
+  --toolbarButton-print-icon: url(images/toolbarButton-print.svg);
+  --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
+  --toolbarButton-download-icon: url(images/toolbarButton-download.svg);
+  --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
+  --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
+  --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
+  --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
+  --toolbarButton-search-icon: url(images/toolbarButton-search.svg);
+  --findbarButton-previous-icon: url(images/findbarButton-previous.svg);
+  --findbarButton-next-icon: url(images/findbarButton-next.svg);
+  --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
+  --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
+  --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
+  --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
+  --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
+  --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
+  --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
+  --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
+  --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
+  --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
+  --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
+  --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
+  --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --main-color: rgba(249, 249, 250, 1);
+    --body-bg-color: rgba(42, 42, 46, 1);
+    --errorWrapper-bg-color: rgba(199, 17, 17, 1);
+    --progressBar-color: rgba(0, 96, 223, 1);
+    --scrollbar-color: rgba(121, 121, 123, 1);
+    --scrollbar-bg-color: rgba(35, 35, 39, 1);
+
+    --sidebar-bg-color: rgba(50, 50, 52, 1);
+    --toolbar-bg-color: rgba(56, 56, 61, 1);
+    --toolbar-border-color: rgba(12, 12, 13, 1);
+    --button-hover-color: rgba(102, 102, 103, 1);
+    --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
+    --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
+    --separator-color: rgba(0, 0, 0, 0.3);
+    --field-color: rgba(250, 250, 250, 1);
+    --field-bg-color: rgba(64, 64, 68, 1);
+    --field-border-color: rgba(115, 115, 115, 1);
+    --findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1);
+    --outline-color: rgba(255, 255, 255, 0.8);
+    --outline-hover-color: rgba(255, 255, 255, 0.9);
+    --outline-active-color: rgba(255, 255, 255, 0.08);
+    --outline-active-bg-color: rgba(255, 255, 255, 1);
+    --sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
+    --doorhanger-bg-color: rgba(74, 74, 79, 1);
+    --doorhanger-border-color: rgba(39, 39, 43, 1);
+    --doorhanger-hover-color: rgba(93, 94, 98, 1);
+    --doorhanger-separator-color: rgba(92, 92, 97, 1);
+    --overlay-button-bg-color: rgba(92, 92, 97, 1);
+    --overlay-button-hover-color: rgba(115, 115, 115, 1);
+
+    --loading-icon: url(images/loading-dark.svg);
+    --treeitem-expanded-icon: url(images/treeitem-expanded-dark.svg);
+    --treeitem-collapsed-icon: url(images/treeitem-collapsed-dark.svg);
+    --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow-dark.svg);
+    --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle-dark.svg);
+    --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle-dark.svg);
+    --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp-dark.svg);
+    --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown-dark.svg);
+    --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut-dark.svg);
+    --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn-dark.svg);
+    --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode-dark.svg);
+    --toolbarButton-print-icon: url(images/toolbarButton-print-dark.svg);
+    --toolbarButton-openFile-icon: url(images/toolbarButton-openFile-dark.svg);
+    --toolbarButton-download-icon: url(images/toolbarButton-download-dark.svg);
+    --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark-dark.svg);
+    --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail-dark.svg);
+    --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline-dark.svg);
+    --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments-dark.svg);
+    --toolbarButton-search-icon: url(images/toolbarButton-search-dark.svg);
+    --findbarButton-previous-icon: url(images/findbarButton-previous-dark.svg);
+    --findbarButton-next-icon: url(images/findbarButton-next-dark.svg);
+    --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage-dark.svg);
+    --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage-dark.svg);
+    --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw-dark.svg);
+    --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw-dark.svg);
+    --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool-dark.svg);
+    --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool-dark.svg);
+    --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical-dark.svg);
+    --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal-dark.svg);
+    --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped-dark.svg);
+    --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone-dark.svg);
+    --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd-dark.svg);
+    --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven-dark.svg);
+    --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties-dark.svg);
+  }
 }
 
 * {
@@ -36,8 +173,7 @@ html {
 body {
   height: 100%;
   width: 100%;
-  background-color: rgba(64, 64, 64, 1);
-  background-image: url(images/texture.png);
+  background-color: var(--body-bg-color);
 }
 
 body,
@@ -46,6 +182,7 @@ button,
 select {
   font: message-box;
   outline: none;
+  scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
 }
 
 .hidden {
@@ -182,12 +319,6 @@ html[dir='rtl'] #sidebarContent {
   transition-duration: var(--sidebar-transition-duration);
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
-html[dir='ltr'] #viewerContainer {
-  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
-}
-html[dir='rtl'] #viewerContainer {
-  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
-}
 
 #outerContainer.sidebarResizing #viewerContainer {
   /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
@@ -218,21 +349,24 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio
 #toolbarSidebar {
   width: 100%;
   height: 32px;
-  background-color: rgba(66, 66, 66, 1); /* fallback */
-  background-image: url(images/texture.png),
-                    linear-gradient(rgba(77, 77, 77, 0.99), rgba(64, 64, 64, 0.95));
+  background-color: var(--sidebar-bg-color);
 }
 html[dir='ltr'] #toolbarSidebar {
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
-              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
-              0 1px 0 rgba(0, 0, 0, 0.15),
-              0 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 
+    0 1px 0 rgba(0, 0, 0, 0.15),
+    0 0 1px rgba(0, 0, 0, 0.1);
 }
 html[dir='rtl'] #toolbarSidebar {
   box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
-              inset 0 1px 0 rgba(255, 255, 255, 0.05),
-              0 1px 0 rgba(0, 0, 0, 0.15),
-              0 0 1px rgba(0, 0, 0, 0.1);
+    0 1px 0 rgba(0, 0, 0, 0.15),
+    0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+html[dir='ltr'] #toolbarSidebar .toolbarButton {
+  margin-right: 2px !important;
+}
+html[dir='rtl'] #toolbarSidebar .toolbarButton {
+  margin-left: 2px !important;
 }
 
 #sidebarResizer {
@@ -253,21 +387,13 @@ html[dir='rtl'] #sidebarResizer {
 #toolbarContainer, .findbar, .secondaryToolbar {
   position: relative;
   height: 32px;
-  background-color: rgba(71, 71, 71, 1); /* fallback */
-  background-image: url(images/texture.png),
-                    linear-gradient(rgba(82, 82, 82, 0.99), rgba(69, 69, 69, 0.95));
+  background-color: var(--toolbar-bg-color);
 }
 html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
-              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
-              0 1px 0 rgba(0, 0, 0, 0.15),
-              0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 0 var(--toolbar-border-color);
 }
 html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
-              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
-              0 1px 0 rgba(0, 0, 0, 0.15),
-              0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 0 var(--toolbar-border-color);
 }
 
 #toolbarViewer {
@@ -278,8 +404,8 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   position: relative;
   width: 100%;
   height: 4px;
-  background-color: rgba(51, 51, 51, 1);
-  border-bottom: 1px solid rgba(51, 51, 51, 1);
+  background-color: var(--body-bg-color);
+  border-top: 1px solid var(--toolbar-border-color);
 }
 
 #loadingBar .progress {
@@ -288,7 +414,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   left: 0;
   width: 0%;
   height: 100%;
-  background-color: rgba(221, 221, 221, 1);
+  background-color: var(--progressBar-color);
   overflow: hidden;
   transition: width 200ms;
 }
@@ -299,7 +425,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
 }
 
 #loadingBar .progress.indeterminate {
-  background-color: rgba(153, 153, 153, 1);
+  background-color: var(--progressBar-color);
   transition: none;
 }
 
@@ -322,7 +448,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   z-index: 10000;
   height: auto;
   min-width: 16px;
-  padding: 0px 6px 0px 6px;
+  padding: 0px 4px 0px 4px;
   margin: 4px 2px 4px 2px;
   color: rgba(217, 217, 217, 1);
   font-size: 12px;
@@ -333,6 +459,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
 
 .findbar {
   min-width: 300px;
+  background-color: var(--toolbar-bg-color);
 }
 .findbar > div {
   height: 32px;
@@ -344,16 +471,89 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   height: auto;
 }
 html[dir='ltr'] .findbar {
-  left: 68px;
+  left: 63px;
 }
 html[dir='rtl'] .findbar {
-  right: 68px;
+  right: 63px;
+}
+
+html[dir='ltr'] .findbar .splitToolbarButton {
+  margin-left: 0px;
+  margin-top: 3px;
+}
+
+html[dir='rtl'] .findbar .splitToolbarButton {
+  margin-right: 0px;
+  margin-top: 3px;
+}
+
+.findbar .splitToolbarButton .findNext {
+  width: 29px;
+}
+
+html[dir='ltr'] .findbar .splitToolbarButton .findNext {
+  border-right: 1px solid var(--field-border-color);
+}
+
+html[dir='rtl'] .findbar .splitToolbarButton .findNext {
+  border-left: 1px solid var(--field-border-color);
+}
+
+.findbar .splitToolbarButton .toolbarButton {
+  background-color: var(--findbar-nextprevious-btn-bg-color);
+  border-radius: 0px;
+  height: 26px;
+  border-top: 1px solid var(--field-border-color);
+  border-bottom: 1px solid var(--field-border-color);
+}
+
+.findbar .splitToolbarButton .toolbarButton::before {
+  top: 5px;
+}
+
+html[dir='ltr'] .findbar .splitToolbarButton > .findPrevious {
+  border-radius: 0;
+}
+html[dir='ltr'] .findbar .splitToolbarButton > .findNext {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 2px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 2px;
+}
+
+html[dir='rtl'] .findbar .splitToolbarButton > .findPrevious {
+  border-radius: 0;
+}
+html[dir='rtl'] .findbar .splitToolbarButton > .findNext {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 0;
 }
 
 .findbar label {
   user-select: none;
 }
 
+.findbar .toolbarLabel:hover, .findbar label:hover,
+.findbar input:focus + label {
+  background-color: var(--button-hover-color);
+}
+
+html[dir='ltr'] #findInput {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+html[dir='rtl'] #findInput {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
+  background-color: var(--toggled-btn-bg-color) !important;
+}
+
 #findInput {
   width: 200px;
 }
@@ -361,31 +561,32 @@ html[dir='rtl'] .findbar {
   color: rgba(191, 191, 191, 1);
 }
 #findInput::placeholder {
-  font-style: italic;
+  font-style: normal;
 }
 #findInput[data-status="pending"] {
-  background-image: url(images/loading-small.png);
+  background-image: var(--loading-icon);
   background-repeat: no-repeat;
-  background-position: right;
+  background-position: 98%;
 }
 html[dir='rtl'] #findInput[data-status="pending"] {
-  background-position: left;
+  background-position: 3px;
 }
 
 .secondaryToolbar {
-  padding: 6px;
+  padding: 6px 0 10px 0;
   height: auto;
   z-index: 30000;
+  background-color: var(--doorhanger-bg-color);
 }
 html[dir='ltr'] .secondaryToolbar {
-  right: 4px;
+  right: 3px;
 }
 html[dir='rtl'] .secondaryToolbar {
-  left: 4px;
+  left: 3px;
 }
 
 #secondaryToolbarButtonContainer {
-  max-width: 200px;
+  max-width: 220px;
   max-height: 400px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -399,9 +600,8 @@ html[dir='rtl'] .secondaryToolbar {
 
 .doorHanger,
 .doorHangerRight {
-  border: 1px solid rgba(0, 0, 0, 0.5);
   border-radius: 2px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color);
 }
 .doorHanger:after, .doorHanger:before,
 .doorHangerRight:after, .doorHangerRight:before {
@@ -415,36 +615,41 @@ html[dir='rtl'] .secondaryToolbar {
 }
 .doorHanger:after,
 .doorHangerRight:after {
-  border-bottom-color: rgba(82, 82, 82, 0.99);
   border-width: 8px;
 }
+.doorHanger:after {
+  border-bottom-color: var(--toolbar-bg-color);
+}
+.doorHangerRight:after {
+  border-bottom-color: var(--doorhanger-bg-color);
+}
 .doorHanger:before,
 .doorHangerRight:before {
-  border-bottom-color: rgba(0, 0, 0, 0.5);
+  border-bottom-color: var(--doorhanger-border-color);
   border-width: 9px;
 }
 
 html[dir='ltr'] .doorHanger:after,
 html[dir='rtl'] .doorHangerRight:after {
-  left: 13px;
+  left: 10px;
   margin-left: -8px;
 }
 
 html[dir='ltr'] .doorHanger:before,
 html[dir='rtl'] .doorHangerRight:before {
-  left: 13px;
+  left: 10px;
   margin-left: -9px;
 }
 
 html[dir='rtl'] .doorHanger:after,
 html[dir='ltr'] .doorHangerRight:after {
-  right: 13px;
+  right: 10px;
   margin-right: -8px;
 }
 
 html[dir='rtl'] .doorHanger:before,
 html[dir='ltr'] .doorHangerRight:before {
-  right: 13px;
+  right: 10px;
   margin-right: -9px;
 }
 
@@ -453,11 +658,11 @@ html[dir='ltr'] .doorHangerRight:before {
   color: rgba(82, 82, 82, 1);
   text-align: center;
   padding: 3px 4px;
+  margin: 5px;
 }
 
 #findMsg {
-  font-style: italic;
-  color: rgba(166, 183, 208, 1);
+  color: rgba(251, 0, 0, 1);
 }
 #findMsg:empty {
   display: none;
@@ -497,19 +702,19 @@ html[dir='rtl'] .findbar * {
 }
 
 html[dir='ltr'] .splitToolbarButton {
-  margin: 3px 2px 4px 0;
+  margin: 2px 2px 0;
   display: inline-block;
 }
 html[dir='rtl'] .splitToolbarButton {
-  margin: 3px 0 4px 2px;
+  margin: 2px 2px 0;
   display: inline-block;
 }
 html[dir='ltr'] .splitToolbarButton > .toolbarButton {
-  border-radius: 0;
+  border-radius: 2px;
   float: left;
 }
 html[dir='rtl'] .splitToolbarButton > .toolbarButton {
-  border-radius: 0;
+  border-radius: 2px;
   float: right;
 }
 
@@ -518,8 +723,16 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
 .overlayButton {
   border: 0 none;
   background: none;
-  width: 32px;
-  height: 25px;
+  width: 28px;
+  height: 28px;
+}
+.overlayButton {
+  background-color: var(--overlay-button-bg-color);
+}
+
+.overlayButton:hover,
+.overlayButton:focus {
+  background-color: var(--overlay-button-hover-color);
 }
 
 .toolbarButton > span {
@@ -539,35 +752,14 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
   margin: 0;
 }
 
-.splitToolbarButton:hover > .toolbarButton,
-.splitToolbarButton:focus > .toolbarButton,
-.splitToolbarButton.toggled > .toolbarButton,
-.toolbarButton.textButton {
-  background-color: rgba(0, 0, 0, 0.12);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.35);
-  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
-              0 0 1px rgba(255, 255, 255, 0.15) inset,
-              0 1px 0 rgba(255, 255, 255, 0.05);
-}
 .splitToolbarButton > .toolbarButton:hover,
 .splitToolbarButton > .toolbarButton:focus,
 .dropdownToolbarButton:hover,
-.overlayButton:hover,
-.overlayButton:focus,
 .toolbarButton.textButton:hover,
 .toolbarButton.textButton:focus {
-  background-color: rgba(0,0,0,0.2);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
-              0 0 1px rgba(255, 255, 255, 0.15) inset,
-              0 0 1px rgba(0, 0, 0, 0.05);
+  background-color: var(--button-hover-color);
   z-index: 199;
 }
-.dropdownToolbarButton:hover {
-  background-color: rgba(0, 0, 0, 0.26);
-}
 .splitToolbarButton > .toolbarButton {
   position: relative;
 }
@@ -575,41 +767,33 @@ html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
 html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
   position: relative;
   margin: 0;
-  margin-right: -1px;
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  border-right-color: rgba(0, 0, 0, 0);
 }
 html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
 html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
   position: relative;
   margin: 0;
-  margin-left: -1px;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-left-color: rgba(0, 0, 0, 0);
 }
 .splitToolbarButtonSeparator {
-  padding: 8px 0;
+  padding: 10px 0;
   width: 1px;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--separator-color);
   z-index: 99;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
   display: inline-block;
-  margin: 5px 0;
+  margin: 4px 0;
 }
+
+.findbar .splitToolbarButtonSeparator {
+  background-color: var(--field-border-color);
+  margin: 0;
+  padding: 13px 0;
+}
+
 html[dir='ltr'] .splitToolbarButtonSeparator {
   float: left;
 }
 html[dir='rtl'] .splitToolbarButtonSeparator {
   float: right;
 }
-.splitToolbarButton:hover > .splitToolbarButtonSeparator,
-.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
-  padding: 12px 0;
-  margin: 1px 0;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
-}
 
 .toolbarButton,
 .dropdownToolbarButton,
@@ -617,86 +801,72 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
 .overlayButton {
   min-width: 16px;
   padding: 2px 6px 0;
-  border: 1px solid rgba(0, 0, 0, 0);
+  border: none;
   border-radius: 2px;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--main-color);
   font-size: 12px;
   line-height: 14px;
   user-select: none;
   /* Opera does not support user-select, use <... unselectable="on"> instead */
   cursor: default;
+  box-sizing: border-box;
 }
 
 html[dir='ltr'] .toolbarButton,
 html[dir='ltr'] .overlayButton,
 html[dir='ltr'] .dropdownToolbarButton {
-  margin: 3px 2px 4px 0;
+  margin: 2px 1px;
 }
 html[dir='rtl'] .toolbarButton,
 html[dir='rtl'] .overlayButton,
 html[dir='rtl'] .dropdownToolbarButton {
-  margin: 3px 0 4px 2px;
+  margin: 2px 1px;
 }
 
+html[dir='ltr'] #toolbarViewerLeft > .toolbarButton:first-child,
+html[dir='rtl'] #toolbarViewerRight > .toolbarButton:last-child {
+  margin-left: 2px;
+}
+
+html[dir='ltr'] #toolbarViewerRight > .toolbarButton:last-child,
+html[dir='rtl'] #toolbarViewerLeft > .toolbarButton:first-child {
+  margin-right: 2px;
+}
 .toolbarButton:hover,
-.toolbarButton:focus,
-.dropdownToolbarButton,
-.overlayButton,
+.toolbarButton:focus {
+  background-color: var(--button-hover-color);
+}
 .secondaryToolbarButton:hover,
 .secondaryToolbarButton:focus {
-  background-color: rgba(0, 0, 0, 0.12);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.35);
-  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
-              0 0 1px rgba(255, 255, 255, 0.15) inset,
-              0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-.toolbarButton:hover:active,
-.overlayButton:hover:active,
-.dropdownToolbarButton:hover:active,
-.secondaryToolbarButton:hover:active {
-  background-color: rgba(0, 0, 0, 0.2);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
-  border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
-              0 0 1px rgba(0, 0, 0, 0.2) inset,
-              0 1px 0 rgba(255, 255, 255, 0.05);
+  background-color: var(--doorhanger-hover-color);
 }
 
 .toolbarButton.toggled,
 .splitToolbarButton.toggled > .toolbarButton.toggled,
 .secondaryToolbarButton.toggled {
-  background-color: rgba(0, 0, 0, 0.3);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
-  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.5);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
-              0 0 1px rgba(0, 0, 0, 0.2) inset,
-              0 1px 0 rgba(255, 255, 255, 0.05);
+  background-color: var(--toggled-btn-bg-color);
 }
 
 .toolbarButton.toggled:hover:active,
 .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
 .secondaryToolbarButton.toggled:hover:active {
   background-color: rgba(0, 0, 0, 0.4);
-  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.55);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset,
-              0 0 1px rgba(0, 0, 0, 0.3) inset,
-              0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .dropdownToolbarButton {
   width: 140px;
   padding: 0;
   overflow: hidden;
+  background-color: var(--dropdown-btn-bg-color);
+  margin-top: 2px !important;
 }
 .dropdownToolbarButton::after {
   position: absolute;
   display: inline-block;
-  top: 4px;
-  content: url(images/toolbarButton-menuArrows.png);
+  top: 6px;
+  content: var(--toolbarButton-menuArrow-icon);
+  pointer-events: none;
+  max-width: 16px;
 }
 html[dir='ltr'] .dropdownToolbarButton::after {
   right: 8px;
@@ -707,17 +877,25 @@ html[dir='rtl'] .dropdownToolbarButton::after {
 
 .dropdownToolbarButton > select {
   width: 162px;
-  height: 23px;
+  height: 28px;
   font-size: 12px;
-  color: rgba(242, 242, 242, 1);
+  color: var(--main-color);
   margin: 0;
-  padding: 3px 2px 2px;
+  padding: 1px 5px 2px;
   border: none;
-  background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
+  background-color: var(--dropdown-btn-bg-color);
+}
+
+.dropdownToolbarButton > select:hover {
+  background-color: var(--button-hover-color);
+}
+
+.dropdownToolbarButton > select:focus {
+  background-color: var(--button-hover-color);
 }
 
 .dropdownToolbarButton > select > option {
-  background: rgba(61, 61, 61, 1);
+  background: var(--doorhanger-bg-color);
 }
 
 #customScaleOption {
@@ -728,19 +906,6 @@ html[dir='rtl'] .dropdownToolbarButton::after {
   border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
 }
 
-html[dir='ltr'] .splitToolbarButton:first-child,
-html[dir='ltr'] .toolbarButton:first-child,
-html[dir='rtl'] .splitToolbarButton:last-child,
-html[dir='rtl'] .toolbarButton:last-child {
-  margin-left: 4px;
-}
-html[dir='ltr'] .splitToolbarButton:last-child,
-html[dir='ltr'] .toolbarButton:last-child,
-html[dir='rtl'] .splitToolbarButton:first-child,
-html[dir='rtl'] .toolbarButton:first-child {
-  margin-right: 4px;
-}
-
 .toolbarButtonSpacer {
   width: 30px;
   display: inline-block;
@@ -748,116 +913,120 @@ html[dir='rtl'] .toolbarButton:first-child {
 }
 
 html[dir='ltr'] #findPrevious {
-  margin-left: 3px;
+  margin-left: 0;
 }
 html[dir='ltr'] #findNext {
   margin-right: 3px;
 }
 
 html[dir='rtl'] #findPrevious {
-  margin-right: 3px;
+  margin-right: 0;
 }
 html[dir='rtl'] #findNext {
   margin-left: 3px;
 }
 
+.toolbarButton::before {
+  opacity: var(--toolbar-icon-opacity);
+  top: 6px;
+}
+
+.secondaryToolbarButton::before {
+  opacity: var(--doorhanger-icon-opacity);
+  top: 5px;
+}
+
 .toolbarButton::before,
 .secondaryToolbarButton::before {
   /* All matching images have a size of 16x16
-   * All relevant containers have a size of 32x25 */
+   * All relevant containers have a size of 28x28 */
   position: absolute;
   display: inline-block;
-  top: 4px;
-  left: 7px;
+  left: 6px;
+  max-width: 16px;
 }
 
 html[dir="ltr"] .secondaryToolbarButton::before {
-  left: 4px;
+  left: 12px;
 }
 html[dir="rtl"] .secondaryToolbarButton::before {
-  right: 4px;
+  right: 12px;
 }
 
 .toolbarButton#sidebarToggle::before {
-  content: url(images/toolbarButton-sidebarToggle.png);
+  content: var(--toolbarButton-sidebarToggle-icon);
 }
 html[dir='rtl'] .toolbarButton#sidebarToggle::before {
   transform: scaleX(-1);
 }
 
 .toolbarButton#secondaryToolbarToggle::before {
-  content: url(images/toolbarButton-secondaryToolbarToggle.png);
+  content: var(--toolbarButton-secondaryToolbarToggle-icon);
 }
 html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
   transform: scaleX(-1);
 }
 
 .toolbarButton.findPrevious::before {
-  content: url(images/findbarButton-previous.png);
+  content: var(--findbarButton-previous-icon);
 }
 html[dir='rtl'] .toolbarButton.findPrevious::before {
   transform: scaleX(-1);
 }
 
 .toolbarButton.findNext::before {
-  content: url(images/findbarButton-next.png);
+  content: var(--findbarButton-next-icon);
 }
 html[dir='rtl'] .toolbarButton.findNext::before {
   transform: scaleX(-1);
 }
 
 .toolbarButton.pageUp::before {
-  content: url(images/toolbarButton-pageUp.png);
+  content: var(--toolbarButton-pageUp-icon);
 }
 html[dir='rtl'] .toolbarButton.pageUp::before {
   transform: scaleX(-1);
 }
 
 .toolbarButton.pageDown::before {
-  content: url(images/toolbarButton-pageDown.png);
+  content: var(--toolbarButton-pageDown-icon);
 }
 html[dir='rtl'] .toolbarButton.pageDown::before {
   transform: scaleX(-1);
 }
 
 .toolbarButton.zoomOut::before {
-  content: url(images/toolbarButton-zoomOut.png);
+  content: var(--toolbarButton-zoomOut-icon);
 }
 
 .toolbarButton.zoomIn::before {
-  content: url(images/toolbarButton-zoomIn.png);
+  content: var(--toolbarButton-zoomIn-icon);
 }
 
 .toolbarButton.presentationMode::before,
 .secondaryToolbarButton.presentationMode::before {
-  content: url(images/toolbarButton-presentationMode.png);
+  content: var(--toolbarButton-presentationMode-icon);
 }
 
 .toolbarButton.print::before,
 .secondaryToolbarButton.print::before {
-  content: url(images/toolbarButton-print.png);
+  content: var(--toolbarButton-print-icon);
 }
 
 .toolbarButton.openFile::before,
 .secondaryToolbarButton.openFile::before {
-  content: url(images/toolbarButton-openFile.png);
+  content: var(--toolbarButton-openFile-icon);
 }
 
 .toolbarButton.download::before,
 .secondaryToolbarButton.download::before {
-  content: url(images/toolbarButton-download.png);
+  content: var(--toolbarButton-download-icon);
 }
 
-.toolbarButton.bookmark,
 .secondaryToolbarButton.bookmark {
-  box-sizing: border-box;
-  outline: none;
-  padding-top: 4px;
+  padding-top: 6px;
   text-decoration: none;
 }
-.secondaryToolbarButton.bookmark {
-  padding-top: 5px;
-}
 
 .bookmark[href='#'] {
   opacity: .5;
@@ -866,26 +1035,26 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
 
 .toolbarButton.bookmark::before,
 .secondaryToolbarButton.bookmark::before {
-  content: url(images/toolbarButton-bookmark.png);
+  content: var(--toolbarButton-bookmark-icon);
 }
 
 #viewThumbnail.toolbarButton::before {
-  content: url(images/toolbarButton-viewThumbnail.png);
+  content: var(--toolbarButton-viewThumbnail-icon);
 }
 
 #viewOutline.toolbarButton::before {
-  content: url(images/toolbarButton-viewOutline.png);
+  content: var(--toolbarButton-viewOutline-icon);
 }
 html[dir="rtl"] #viewOutline.toolbarButton::before {
   transform: scaleX(-1);
 }
 
 #viewAttachments.toolbarButton::before {
-  content: url(images/toolbarButton-viewAttachments.png);
+  content: var(--toolbarButton-viewAttachments-icon);
 }
 
 #viewFind.toolbarButton::before {
-  content: url(images/toolbarButton-search.png);
+  content: var(--toolbarButton-search-icon);
 }
 
 .toolbarButton.pdfSidebarNotification::after {
@@ -908,28 +1077,24 @@ html[dir='rtl'] .toolbarButton.pdfSidebarNotification::after {
 
 .secondaryToolbarButton {
   position: relative;
-  margin: 0 0 4px 0;
-  padding: 3px 0 1px 0;
+  margin: 0;
+  padding: 0 0 1px 0;
   height: auto;
-  min-height: 25px;
+  min-height: 26px;
   width: auto;
   min-width: 100%;
   white-space: normal;
+  border-radius: 0;
+  box-sizing: border-box;
 }
 html[dir="ltr"] .secondaryToolbarButton {
-  padding-left: 24px;
+  padding-left: 36px;
   text-align: left;
 }
 html[dir="rtl"] .secondaryToolbarButton {
-  padding-right: 24px;
+  padding-right: 36px;
   text-align: right;
 }
-html[dir="ltr"] .secondaryToolbarButton.bookmark {
-  padding-left: 27px;
-}
-html[dir="rtl"] .secondaryToolbarButton.bookmark {
-  padding-right: 27px;
-}
 
 html[dir="ltr"] .secondaryToolbarButton > span {
   padding-right: 4px;
@@ -939,64 +1104,63 @@ html[dir="rtl"] .secondaryToolbarButton > span {
 }
 
 .secondaryToolbarButton.firstPage::before {
-  content: url(images/secondaryToolbarButton-firstPage.png);
+  content: var(--secondaryToolbarButton-firstPage-icon);
 }
 
 .secondaryToolbarButton.lastPage::before {
-  content: url(images/secondaryToolbarButton-lastPage.png);
+  content: var(--secondaryToolbarButton-lastPage-icon);
 }
 
 .secondaryToolbarButton.rotateCcw::before {
-  content: url(images/secondaryToolbarButton-rotateCcw.png);
+  content: var(--secondaryToolbarButton-rotateCcw-icon);
 }
 
 .secondaryToolbarButton.rotateCw::before {
-  content: url(images/secondaryToolbarButton-rotateCw.png);
+  content: var(--secondaryToolbarButton-rotateCw-icon);
 }
 
 .secondaryToolbarButton.selectTool::before {
-  content: url(images/secondaryToolbarButton-selectTool.png);
+  content: var(--secondaryToolbarButton-selectTool-icon);
 }
 
 .secondaryToolbarButton.handTool::before {
-  content: url(images/secondaryToolbarButton-handTool.png);
+  content: var(--secondaryToolbarButton-handTool-icon);
 }
 
 .secondaryToolbarButton.scrollVertical::before {
-  content: url(images/secondaryToolbarButton-scrollVertical.png);
+  content: var(--secondaryToolbarButton-scrollVertical-icon);
 }
 
 .secondaryToolbarButton.scrollHorizontal::before {
-  content: url(images/secondaryToolbarButton-scrollHorizontal.png);
+  content: var(--secondaryToolbarButton-scrollHorizontal-icon)
 }
 
 .secondaryToolbarButton.scrollWrapped::before {
-  content: url(images/secondaryToolbarButton-scrollWrapped.png);
+  content: var(--secondaryToolbarButton-scrollWrapped-icon);
 }
 
 .secondaryToolbarButton.spreadNone::before {
-  content: url(images/secondaryToolbarButton-spreadNone.png);
+  content: var(--secondaryToolbarButton-spreadNone-icon);
 }
 
 .secondaryToolbarButton.spreadOdd::before {
-  content: url(images/secondaryToolbarButton-spreadOdd.png);
+  content: var(--secondaryToolbarButton-spreadOdd-icon);
 }
 
 .secondaryToolbarButton.spreadEven::before {
-  content: url(images/secondaryToolbarButton-spreadEven.png);
+  content: var(--secondaryToolbarButton-spreadEven-icon);
 }
 
 .secondaryToolbarButton.documentProperties::before {
-  content: url(images/secondaryToolbarButton-documentProperties.png);
+  content: var(--secondaryToolbarButton-documentProperties-icon);
 }
 
 .verticalToolbarSeparator {
   display: block;
-  padding: 8px 0;
-  margin: 8px 4px;
+  padding: 11px 0;
+  margin: 5px 2px;
   width: 1px;
-  background-color: rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
+  background-color: var(--separator-color);
 }
 html[dir='ltr'] .verticalToolbarSeparator {
   margin-left: 2px;
@@ -1007,34 +1171,40 @@ html[dir='rtl'] .verticalToolbarSeparator {
 
 .horizontalToolbarSeparator {
   display: block;
-  margin: 0 0 4px 0;
+  margin: 6px 0 5px 0;
   height: 1px;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--doorhanger-separator-color);
 }
 
 .toolbarField {
-  padding: 3px 6px;
-  margin: 4px 0 4px 0;
+  padding: 4px 7px;
+  margin: 3px 0 3px 0;
   border-radius: 2px;
-  background-color: rgba(255, 255, 255, 0.09);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
+  background-color: var(--field-bg-color);
   background-clip: padding-box;
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset,
-              0 1px 0 rgba(255, 255, 255, 0.05);
-  color: rgba(242, 242, 242, 1);
+  border-color: var(--field-border-color);
+  box-shadow: none;
+  color: var(--field-color);
   font-size: 12px;
-  line-height: 14px;
+  line-height: 16px;
   outline-style: none;
 }
 
 .toolbarField[type=checkbox] {
-  display: inline-block;
-  margin: 8px 0px;
+  opacity: 0;
+  position: absolute !important;
+  left: 0;
+}
+
+html[dir='ltr'] .toolbarField[type=checkbox] {
+  margin: 10px 0 3px 7px;
+}
+
+html[dir='rtl'] .toolbarField[type=checkbox] {
+  margin: 10px 7px 3px 0;
 }
 
 .toolbarField.pageNumber {
@@ -1045,34 +1215,28 @@ html[dir='rtl'] .verticalToolbarSeparator {
 }
 
 .toolbarField.pageNumber.visiblePageIsLoading {
-  background-image: url(images/loading-small.png);
+  background-image: var(--loading-icon);
   background-repeat: no-repeat;
-  background-position: 1px;
+  background-position: 3px;
 }
 
 .toolbarField.pageNumber::-webkit-inner-spin-button,
 .toolbarField.pageNumber::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-.toolbarField:hover {
-  background-color: rgba(255, 255, 255, 0.11);
-  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.43) rgba(0, 0, 0, 0.45);
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 .toolbarField:focus {
-  background-color: rgba(255, 255, 255, 0.15);
-  border-color: rgba(77, 184, 255, 0.8) rgba(77, 184, 255, 0.85) rgba(77, 184, 255, 0.9);
+  border-color: #0a84ff;
 }
 
 .toolbarLabel {
   min-width: 16px;
-  padding: 3px 6px 3px 2px;
-  margin: 4px 2px 4px 0;
+  padding: 6px;
+  margin: 2px;
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 2px;
-  color: rgba(217, 217, 217, 1);
+  color: var(--main-color);
   font-size: 12px;
   line-height: 14px;
   text-align: left;
@@ -1114,7 +1278,7 @@ html[dir='rtl'] .thumbnail {
 }
 
 .thumbnail:not([data-loaded]) {
-  border: 1px dashed rgba(255, 255, 255, 0.5);
+  border: 1px dashed rgba(132, 132, 132, 1);
   margin: -1px 9px 4px 9px;
 }
 
@@ -1139,28 +1303,19 @@ a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
 
 a:focus > .thumbnail > .thumbnailSelectionRing,
 .thumbnail:hover > .thumbnailSelectionRing {
-  background-color: rgba(255, 255, 255, 0.15);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
+  background-color: var(--sidebaritem-bg-color);
   background-clip: padding-box;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
-              0 0 1px rgba(255, 255, 255, 0.2) inset,
-              0 0 1px rgba(0, 0, 0, 0.2);
   color: rgba(255, 255, 255, 0.9);
 }
 
 .thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
   opacity: 1;
 }
 
 .thumbnail.selected > .thumbnailSelectionRing {
-  background-color: rgba(255, 255, 255, 0.3);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
+  background-color: var(--sidebaritem-bg-color);
   background-clip: padding-box;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
-              0 0 1px rgba(255, 255, 255, 0.1) inset,
-              0 0 1px rgba(0, 0, 0, 0.2);
-  color: rgba(255, 255, 255,1);
+  color: rgba(255, 255, 255, 1);
 }
 
 #outlineView,
@@ -1194,7 +1349,7 @@ html[dir='rtl'] .treeItem > .treeItems {
   height: auto;
   margin-bottom: 1px;
   border-radius: 2px;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--outline-color);
   font-size: 13px;
   line-height: 15px;
   user-select: none;
@@ -1215,12 +1370,14 @@ html[dir='rtl'] .treeItem > a {
   color: rgba(255, 255, 255, 0.5);
 }
 .treeItemToggler::before {
-  content: url(images/treeitem-expanded.png);
+  content: var(--treeitem-expanded-icon);
   display: inline-block;
   position: absolute;
+  max-width: 16px;
 }
 .treeItemToggler.treeItemsHidden::before {
-  content: url(images/treeitem-collapsed.png);
+  content: var(--treeitem-collapsed-icon);
+  max-width: 16px;
 }
 html[dir='rtl'] .treeItemToggler.treeItemsHidden::before {
   transform: scaleX(-1);
@@ -1245,24 +1402,16 @@ html[dir='rtl'] .treeItemToggler::before {
 .treeItemToggler:hover + a,
 .treeItemToggler:hover ~ .treeItems,
 .treeItem > a:hover {
-  background-color: rgba(255, 255, 255, 0.02);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
+  background-color: var(--sidebaritem-bg-color);
   background-clip: padding-box;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
-              0 0 1px rgba(255, 255, 255, 0.2) inset,
-              0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 2px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--outline-hover-color);
 }
 
 .treeItem.selected {
-  background-color: rgba(255, 255, 255, 0.08);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
+  background-color: var(--outline-active-bg-color);
   background-clip: padding-box;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
-              0 0 1px rgba(255, 255, 255, 0.1) inset,
-              0 0 1px rgba(0, 0, 0, 0.2);
-  color: rgba(255, 255, 255, 1);
+  color: var(--outline-active-color);
 }
 
 .noResults {
@@ -1280,14 +1429,13 @@ html[dir='rtl'] .treeItemToggler::before {
 }
 
 #errorWrapper {
-  background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
-  color: rgba(255, 255, 255, 1);
+  background: none repeat scroll 0 0 var(--errorWrapper-bg-color);
+  color: var(--main-color);
   left: 0;
   position: absolute;
   right: 0;
   z-index: 1000;
-  padding: 3px;
-  font-size: 0.8em;
+  padding: 3px 6px;
 }
 .loadingInProgress #errorWrapper {
   top: 37px;
@@ -1302,8 +1450,9 @@ html[dir='rtl'] .treeItemToggler::before {
 }
 
 #errorMoreInfo {
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
+  background-color: var(--field-bg-color);
+  color: var(--field-color);
+  border: 1px solid var(--field-border-color);
   padding: 3px;
   margin: 3px;
   width: 98%;
@@ -1312,7 +1461,7 @@ html[dir='rtl'] .treeItemToggler::before {
 .overlayButton {
   width: auto;
   margin: 3px 4px 2px 4px !important;
-  padding: 2px 6px 3px 6px;
+  padding: 2px 11px 2px 11px;
 }
 
 #overlayContainer {
@@ -1338,12 +1487,10 @@ html[dir='rtl'] .treeItemToggler::before {
   display: inline-block;
   padding: 15px;
   border-spacing: 4px;
-  color: rgba(217, 217, 217, 1);
+  color: var(--main-color);
   font-size: 12px;
   line-height: 14px;
-  background-color: rgba(71, 71, 71, 1); /* fallback */
-  background-image: url(images/texture.png),
-                    linear-gradient(rgba(82, 82, 82,0.99), rgba(69, 69, 69, 0.95));
+  background-color: var(--doorhanger-bg-color);
   border: 1px solid rgba(0, 0, 0, 0.5);
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
@@ -1366,8 +1513,7 @@ html[dir='rtl'] .treeItemToggler::before {
   margin: 4px 0 4px 0;
   height: 1px;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
+  background-color: var(--separator-color);
 }
 
 .dialog .buttonRow {
@@ -1468,7 +1614,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   white-space: pre;
 }
 #PDFBug .stats .title {
-    font-weight: bold;
+  font-weight: bold;
 }
 #PDFBug table {
   font-size: 10px;
@@ -1533,213 +1679,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   display: none;
 }
 
-@media screen and (min-resolution: 1.1dppx) {
-  /* Rules for Retina screens */
-  .toolbarButton::before {
-    transform: scale(0.5);
-    top: -5px;
-  }
-
-  .secondaryToolbarButton::before {
-    transform: scale(0.5);
-    top: -4px;
-  }
-
-  html[dir='ltr'] .toolbarButton::before,
-  html[dir='rtl'] .toolbarButton::before {
-    left: -1px;
-  }
-
-  html[dir='ltr'] .secondaryToolbarButton::before {
-    left: -2px;
-  }
-  html[dir='rtl'] .secondaryToolbarButton::before {
-    left: 186px;
-  }
-
-  .toolbarField.pageNumber.visiblePageIsLoading,
-  #findInput[data-status="pending"] {
-    background-image: url(images/loading-small@2x.png);
-    background-size: 16px 17px;
-  }
-
-  .dropdownToolbarButton::after {
-    transform: scale(0.5);
-    top: -5px;
-    content: url(images/toolbarButton-menuArrows@2x.png);
-  }
-  html[dir='ltr'] .dropdownToolbarButton::after {
-    right: 4px;
-  }
-  html[dir='rtl'] .dropdownToolbarButton::after {
-    left: 4px;
-  }
-
-  .toolbarButton#sidebarToggle::before {
-    content: url(images/toolbarButton-sidebarToggle@2x.png);
-  }
-  html[dir='rtl'] .toolbarButton#sidebarToggle::before {
-    transform: scale(-0.5, 0.5);
-  }
-
-  .toolbarButton#secondaryToolbarToggle::before {
-    content: url(images/toolbarButton-secondaryToolbarToggle@2x.png);
-  }
-  html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
-    transform: scale(-0.5, 0.5);
-  }
-
-  .toolbarButton.findPrevious::before {
-    content: url(images/findbarButton-previous@2x.png);
-  }
-  html[dir='rtl'] .toolbarButton.findPrevious::before {
-    transform: scale(-0.5, 0.5);
-  }
-
-  .toolbarButton.findNext::before {
-    content: url(images/findbarButton-next@2x.png);
-  }
-  html[dir='rtl'] .toolbarButton.findNext::before {
-    transform: scale(-0.5, 0.5);
-  }
-
-  .toolbarButton.pageUp::before {
-    content: url(images/toolbarButton-pageUp@2x.png);
-  }
-  html[dir='rtl'] .toolbarButton.pageUp::before {
-    transform: scale(-0.5, 0.5);
-  }
-
-  .toolbarButton.pageDown::before {
-    content: url(images/toolbarButton-pageDown@2x.png);
-  }
-  html[dir='rtl'] .toolbarButton.pageDown::before {
-    transform: scale(-0.5, 0.5);
-  }
-
-  .toolbarButton.zoomIn::before {
-    content: url(images/toolbarButton-zoomIn@2x.png);
-  }
-
-  .toolbarButton.zoomOut::before {
-    content: url(images/toolbarButton-zoomOut@2x.png);
-  }
-
-  .toolbarButton.presentationMode::before,
-  .secondaryToolbarButton.presentationMode::before {
-    content: url(images/toolbarButton-presentationMode@2x.png);
-  }
-
-  .toolbarButton.print::before,
-  .secondaryToolbarButton.print::before {
-    content: url(images/toolbarButton-print@2x.png);
-  }
-
-  .toolbarButton.openFile::before,
-  .secondaryToolbarButton.openFile::before {
-    content: url(images/toolbarButton-openFile@2x.png);
-  }
-
-  .toolbarButton.download::before,
-  .secondaryToolbarButton.download::before {
-    content: url(images/toolbarButton-download@2x.png);
-  }
-
-  .toolbarButton.bookmark::before,
-  .secondaryToolbarButton.bookmark::before {
-    content: url(images/toolbarButton-bookmark@2x.png);
-  }
-
-  #viewThumbnail.toolbarButton::before {
-    content: url(images/toolbarButton-viewThumbnail@2x.png);
-  }
-
-  #viewOutline.toolbarButton::before {
-    content: url(images/toolbarButton-viewOutline@2x.png);
-  }
-  html[dir="rtl"] #viewOutline.toolbarButton::before {
-    transform: scale(-0.5, 0.5);
-  }
-
-  #viewAttachments.toolbarButton::before {
-    content: url(images/toolbarButton-viewAttachments@2x.png);
-  }
-
-  #viewFind.toolbarButton::before {
-    content: url(images/toolbarButton-search@2x.png);
-  }
-
-  .secondaryToolbarButton.firstPage::before {
-    content: url(images/secondaryToolbarButton-firstPage@2x.png);
-  }
-
-  .secondaryToolbarButton.lastPage::before {
-    content: url(images/secondaryToolbarButton-lastPage@2x.png);
-  }
-
-  .secondaryToolbarButton.rotateCcw::before {
-    content: url(images/secondaryToolbarButton-rotateCcw@2x.png);
-  }
-
-  .secondaryToolbarButton.rotateCw::before {
-    content: url(images/secondaryToolbarButton-rotateCw@2x.png);
-  }
-
-  .secondaryToolbarButton.selectTool::before {
-    content: url(images/secondaryToolbarButton-selectTool@2x.png);
-  }
-
-  .secondaryToolbarButton.handTool::before {
-    content: url(images/secondaryToolbarButton-handTool@2x.png);
-  }
-
-  .secondaryToolbarButton.scrollVertical::before {
-    content: url(images/secondaryToolbarButton-scrollVertical@2x.png);
-  }
-
-  .secondaryToolbarButton.scrollHorizontal::before {
-    content: url(images/secondaryToolbarButton-scrollHorizontal@2x.png);
-  }
-
-  .secondaryToolbarButton.scrollWrapped::before {
-    content: url(images/secondaryToolbarButton-scrollWrapped@2x.png);
-  }
-
-  .secondaryToolbarButton.spreadNone::before {
-    content: url(images/secondaryToolbarButton-spreadNone@2x.png);
-  }
-
-  .secondaryToolbarButton.spreadOdd::before {
-    content: url(images/secondaryToolbarButton-spreadOdd@2x.png);
-  }
-
-  .secondaryToolbarButton.spreadEven::before {
-    content: url(images/secondaryToolbarButton-spreadEven@2x.png);
-  }
-
-  .secondaryToolbarButton.documentProperties::before {
-    content: url(images/secondaryToolbarButton-documentProperties@2x.png);
-  }
-
-  .treeItemToggler::before {
-    transform: scale(0.5);
-    top: -1px;
-    content: url(images/treeitem-expanded@2x.png);
-  }
-  .treeItemToggler.treeItemsHidden::before {
-    content: url(images/treeitem-collapsed@2x.png);
-  }
-  html[dir='rtl'] .treeItemToggler.treeItemsHidden::before {
-    transform: scale(-0.5, 0.5);
-  }
-  html[dir='ltr'] .treeItemToggler::before {
-    right: 0;
-  }
-  html[dir='rtl'] .treeItemToggler::before {
-    left: 0;
-  }
-}
-
 @media print {
   /* General rules for printing. */
   body {