Created Custom Themes/CSS (markdown)

Custom-Themes-CSS.md

@@ -0,0 +1,77 @@
+The color scheme and styling of Whoogle instances is configurable using the "Custom CSS" field on the home page. 
+
+Each Whoogle instance starts with the following variables applied for all pages:
+
+```css
+:root {
+    /* LIGHT THEME COLORS */
+    --whoogle-background: #fff;
+    --whoogle-accent: #685e79;
+    --whoogle-text: #000;
+    --whoogle-contrast-text: #fff;
+    --whoogle-secondary-text: #70757a;
+    --whoogle-result-bg: #fff;
+    --whoogle-result-title: #1967d2;
+    --whoogle-result-url: #0d652d;
+    --whoogle-result-visited: #4b11a8;
+
+    /* DARK THEME COLORS */
+    --whoogle-dark-background: #222;
+    --whoogle-dark-accent: #685e79;
+    --whoogle-dark-text: #fff;
+    --whoogle-dark-contrast-text: #000;
+    --whoogle-dark-secondary-text: #bbb;
+    --whoogle-dark-result-bg: #000;
+    --whoogle-dark-result-title: #1967d2;
+    --whoogle-dark-result-url: #4b11a8;
+    --whoogle-dark-result-visited: #bbbbff;
+}
+```
+
+- `whoogle-background`
+    - The background color
+- `whoogle-accent`
+    - The color of the logo, config menu, and occasional text
+- `whoogle-text`
+    - The foreground/text color
+- `whoogle-contrast-text`
+    - Color for text that is against the accent color
+- `whoogle-secondary-text`
+    - Color for tips/dates/etc (things that require less visual prominence)
+- `whoogle-result-bg`
+    - Background color for each result in a search
+- `whoogle-result-title`
+    - The color for the title of the result in a search
+- `whoogle-result-url`
+    - The color for the URL of the result in a search
+- `whoogle-result-visited`
+    - The color for the title of visited results in a search
+
+### Other effects
+
+- Wider result page
+```css
+body {
+    max-width: 100% !important;
+}
+```
+
+- Hide config items
+```css
+/* Hide root URL */
+.config-div-root-url {
+    display: none !important;
+}
+
+/* Hide dark mode */
+.config-div-dark {
+    display: none !important;
+}
+
+/* Hides the entire config collapsible
+NOTE: If you include this, the only way to change the config
+would be manually (not through the UI, since this hides the UI) */
+#config-collapsible {
+    display: none !important;
+}
+```