Updated Styling with Custom CSS (markdown)

Ben Busby 2021-04-05 10:30:07 -04:00
parent 60fb170774
commit c781e81aeb

@ -5,33 +5,37 @@ Each Whoogle instance starts with the following variables applied for all pages:
```css ```css
:root { :root {
/* LIGHT THEME COLORS */ /* LIGHT THEME COLORS */
--whoogle-background: #fff; --whoogle-logo: #685e79;
--whoogle-accent: #685e79; --whoogle-page-bg: #ffffff;
--whoogle-text: #000; --whoogle-element-bg: #685e79;
--whoogle-contrast-text: #fff; --whoogle-text: #000000;
--whoogle-contrast-text: #ffffff;
--whoogle-secondary-text: #70757a; --whoogle-secondary-text: #70757a;
--whoogle-result-bg: #fff; --whoogle-result-bg: #ffffff;
--whoogle-result-title: #1967d2; --whoogle-result-title: #1967d2;
--whoogle-result-url: #0d652d; --whoogle-result-url: #0d652d;
--whoogle-result-visited: #4b11a8; --whoogle-result-visited: #4b11a8;
/* DARK THEME COLORS */ /* DARK THEME COLORS */
--whoogle-dark-background: #222; --whoogle-dark-logo: #685e79;
--whoogle-dark-accent: #685e79; --whoogle-dark-page-bg: #222222;
--whoogle-dark-text: #fff; --whoogle-dark-element-bg: #685e79;
--whoogle-dark-contrast-text: #000; --whoogle-dark-text: #ffffff;
--whoogle-dark-secondary-text: #bbb; --whoogle-dark-contrast-text: #000000;
--whoogle-dark-result-bg: #000; --whoogle-dark-secondary-text: #bbbbbb;
--whoogle-dark-result-bg: #000000;
--whoogle-dark-result-title: #1967d2; --whoogle-dark-result-title: #1967d2;
--whoogle-dark-result-url: #4b11a8; --whoogle-dark-result-url: #4b11a8;
--whoogle-dark-result-visited: #bbbbff; --whoogle-dark-result-visited: #bbbbff;
} }
``` ```
- `whoogle-background` - `whoogle-page-bg`
- The background color - The page background color
- `whoogle-accent` - `whoogle-logo`
- The color of the logo, config menu, and occasional text - The color of the logo
- `whoogle-element-bg`
- The background color of the config menu, search bar button, etc
- `whoogle-text` - `whoogle-text`
- The foreground/text color - The foreground/text color
- `whoogle-contrast-text` - `whoogle-contrast-text`