diff --git a/app/static/css/dark-theme.css b/app/static/css/dark-theme.css index 8fc9455..e42d3f7 100644 --- a/app/static/css/dark-theme.css +++ b/app/static/css/dark-theme.css @@ -1,9 +1,9 @@ html { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; } body { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; } div { @@ -23,7 +23,7 @@ li { } textarea { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } @@ -44,17 +44,17 @@ div span { } input { - background-color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } select { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } .search-container { - background-color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-page-bg) !important; } .ZINbbc { @@ -66,7 +66,7 @@ select { } #search-bar { - border: 2px solid var(--whoogle-dark-accent) !important; + border: 2px solid var(--whoogle-dark-element-bg) !important; color: var(--whoogle-dark-text) !important; } @@ -75,9 +75,9 @@ select { } #search-submit { - border: 1px solid var(--whoogle-dark-accent) !important; - background: var(--whoogle-dark-accent) !important; - color: var(--whoogle-dark-background) !important; + border: 1px solid var(--whoogle-dark-element-bg) !important; + background: var(--whoogle-dark-element-bg) !important; + color: var(--whoogle-contrast-text) !important; } .info-text { @@ -86,20 +86,20 @@ select { } .collapsible { - color: var(--whoogle-dark-accent) !important; + color: var(--whoogle-dark-element-bg) !important; } .collapsible:after { - color: var(--whoogle-dark-accent) !important; + color: var(--whoogle-dark-element-bg) !important; } .active { - background-color: var(--whoogle-dark-accent) !important; + background-color: var(--whoogle-dark-element-bg) !important; color: var(--whoogle-dark-contrast-text) !important; } .content { - background-color: var(--whoogle-dark-accent) !important; + background-color: var(--whoogle-dark-element-bg) !important; color: var(--whoogle-contrast-text) !important; } @@ -108,7 +108,7 @@ select { } #gh-link { - color: var(--whoogle-dark-accent); + color: var(--whoogle-dark-element-bg); } .autocomplete-items { @@ -126,6 +126,6 @@ select { } .autocomplete-active { - background-color: var(--whoogle-dark-accent) !important; - color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-element-bg) !important; + color: var(--whoogle-dark-contrast-text) !important; } diff --git a/app/static/css/light-theme.css b/app/static/css/light-theme.css index a878c5e..b4da052 100644 --- a/app/static/css/light-theme.css +++ b/app/static/css/light-theme.css @@ -1,9 +1,9 @@ html { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; } body { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; } div { @@ -23,12 +23,12 @@ li { } textarea { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } select { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } @@ -57,27 +57,27 @@ div span { } input { - background-color: var(--whoogle-background) !important; + background-color: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } #search-bar { color: var(--whoogle-text) !important; - background-color: var(--whoogle-background); + background-color: var(--whoogle-page-bg); } .home-search { - border: 3px solid var(--whoogle-accent) !important; + border: 3px solid var(--whoogle-element-bg) !important; } .search-container { - background-color: var(--whoogle-background) !important; + background-color: var(--whoogle-page-bg) !important; } #search-submit { - border: 1px solid var(--whoogle-accent) !important; - background: var(--whoogle-accent) !important; - color: var(--whoogle-background) !important; + border: 1px solid var(--whoogle-element-bg) !important; + background: var(--whoogle-element-bg) !important; + color: var(--whoogle-contrast-text) !important; } .info-text { @@ -86,20 +86,20 @@ input { } .collapsible { - color: var(--whoogle-accent) !important; + color: var(--whoogle-element-bg) !important; } .collapsible:after { - color: var(--whoogle-accent) !important; + color: var(--whoogle-element-bg) !important; } .active { - background-color: var(--whoogle-accent) !important; + background-color: var(--whoogle-element-bg) !important; color: var(--whoogle-contrast-text) !important; } .content { - background-color: var(--whoogle-accent) !important; + background-color: var(--whoogle-element-bg) !important; color: var(--whoogle-contrast-text) !important; } @@ -108,7 +108,7 @@ input { } #gh-link { - color: var(--whoogle-accent); + color: var(--whoogle-element-bg); } .autocomplete-items { @@ -125,6 +125,6 @@ input { } .autocomplete-active { - background-color: var(--whoogle-accent) !important; - color: var(--whoogle-background) !important; + background-color: var(--whoogle-element-bg) !important; + color: var(--whoogle-contrast-text) !important; } diff --git a/app/static/css/variables.css b/app/static/css/variables.css index efb6d3a..76f94ac 100644 --- a/app/static/css/variables.css +++ b/app/static/css/variables.css @@ -1,23 +1,25 @@ /* Colors */ :root { /* LIGHT THEME COLORS */ - --whoogle-background: #fff; - --whoogle-accent: #685e79; - --whoogle-text: #000; - --whoogle-contrast-text: #fff; + --whoogle-logo: #685e79; + --whoogle-page-bg: #ffffff; + --whoogle-element-bg: #685e79; + --whoogle-text: #000000; + --whoogle-contrast-text: #ffffff; --whoogle-secondary-text: #70757a; - --whoogle-result-bg: #fff; + --whoogle-result-bg: #ffffff; --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-logo: #685e79; + --whoogle-dark-page-bg: #222222; + --whoogle-dark-element-bg: #685e79; + --whoogle-dark-text: #ffffff; + --whoogle-dark-contrast-text: #000000; + --whoogle-dark-secondary-text: #bbbbbb; + --whoogle-dark-result-bg: #000000; --whoogle-dark-result-title: #1967d2; --whoogle-dark-result-url: #4b11a8; --whoogle-dark-result-visited: #bbbbff; diff --git a/app/templates/header.html b/app/templates/header.html index cd07589..121ffc3 100644 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -5,14 +5,14 @@
@@ -26,7 +26,7 @@
@@ -37,7 +37,7 @@ spellcheck="false" type="text" value="{{ query }}" style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important; color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; - border: {{ '2px solid var(--whoogle-dark-accent)' if config.dark else '' }}; border-radius: 8px;"> + border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;">
diff --git a/app/templates/index.html b/app/templates/index.html index 46a9e48..081c66c 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -44,22 +44,22 @@ fill: transparent; } path { - fill: {{ 'var(--whoogle-dark-accent)' if config.dark else 'var(--whoogle-accent)' }}; + fill: {{ 'var(--whoogle-dark-logo)' if config.dark else 'var(--whoogle-logo)' }}; } - - - - - - - - - - - - + + + + + + + + + + + +