Improve input rendering

Author: GuillaumeGomez

templates/style/_themes.scss

@@ -2,6 +2,8 @@
 html {
   --color-background-code: #f5f5f5;
   --color-background: #fff;
+  --input-color: #000;
+  --input-box-shadow-focus: 0 0 8px #078dd8;
   --color-border-light: #eaeaea;
   --color-border: #ddd;
   --color-doc-link-background: #333;
@@ -23,6 +25,9 @@ html {
   --color-background-input: #fff;
   --color-table-header-background: #e0e0e0;
   --color-table-header: #000;
+  --color-search-focus: #078dd8;
+  --chart-title-color: #000;
+  --chart-grid: #ddd;
 }
 
 // To add a new theme, copy the above theme into a new `html[data-theme="name"]`
@@ -31,6 +36,8 @@ html {
 html[data-theme="dark"] {
   --color-background-code: #2a2a2a;
   --color-background: #353535;
+  --input-color: #111;
+  --input-box-shadow-focus: 0 0 8px 4px #078dd8;
   --color-border-light: #eaeaea;
   --color-border: #4e4e4e;
   --color-doc-link-background: #c0c0c0;
@@ -52,11 +59,16 @@ html[data-theme="dark"] {
   --color-background-input: #f0f0f0;
   --color-table-header-background: #e0e0e0;
   --color-table-header: #000;
+  --color-search-focus: #078dd8;
+  --chart-title-color: #c0c0c0;
+  --chart-grid: #4e4e4e;
 }
 
 html[data-theme="ayu"] {
   --color-background-code: #191f26;
   --color-background: #0f1419;
+  --input-color: #c5c5c5;
+  --input-box-shadow-focus: 0 0 0 1px #148099,0 0 0 2px transparent;
   --color-border-light: #eaeaea;
   --color-border: #424c57;
   --color-doc-link-background: #d5d5d5;
@@ -78,4 +90,7 @@ html[data-theme="ayu"] {
   --color-background-input: #141920;
   --color-table-header-background: #364759;
   --color-table-header: #eee;
+  --color-search-focus: #148099;
+  --chart-title-color: #e6e6e6;
+  --chart-grid: #5c6773;
 }

templates/style/base.scss

@@ -27,7 +27,7 @@ body {
 
     input, #search {
         background-color: var(--color-background-input);
-        color: var(--color-standard);
+        color: var(--input-color);
     }
 
     #search {
@@ -36,7 +36,7 @@ body {
     }
 
     #search:focus {
-        box-shadow: 0 0 0 1px #148099, 0 0 0 1px #148099;
+        box-shadow: var(--input-box-shadow-focus);
     }
 
     // rustdocs have 200px sidebar and
@@ -76,6 +76,23 @@ body {
     > h1 {
         color: var(--color-standard);
     }
+
+    // This is used to improve charts rendering on all themes.
+    rect.highcharts-background {
+        fill: var(--color-background);
+    }
+
+    text.highcharts-title, g.highcharts-axis-labels > text {
+        fill: var(--chart-title-color) !important;
+    }
+
+    g.highcharts-legend-item > text {
+        fill: var(--chart-grid) !important;
+    }
+
+    g.highcharts-grid > path {
+        stroke: var(--chart-grid) !important;
+    }
 }
 
 html {