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 @@ - Whoogle + Whoogle