diff --git a/Custom-Themes-CSS.md b/Custom-Themes-CSS.md new file mode 100644 index 0000000..c505570 --- /dev/null +++ b/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; +} +``` \ No newline at end of file