Expand custom css theming support

Also adds new default dark theme designed by @gripped.
main
Ben Busby 2021-04-09 11:00:02 -04:00
parent 13abb0ae7f
commit 1030118d0b
No known key found for this signature in database
GPG Key ID: 3B08611DF6E62ED2
8 changed files with 28 additions and 27 deletions

View File

@ -153,7 +153,9 @@ class Filter:
if src.startswith(LOGO_URL):
# Re-brand with Whoogle logo
element.replace_with(BeautifulSoup(render_template('logo.html')))
element.replace_with(BeautifulSoup(
render_template('logo.html', dark=self.dark),
features='html.parser'))
return
elif src.startswith(GOOG_IMG) or GOOG_STATIC in src:
element['src'] = BLANK_B64
@ -164,7 +166,6 @@ class Filter:
is_element=True) + '&type=' + urlparse.quote(mime)
def update_styling(self, soup) -> None:
""""""
# Remove unnecessary button(s)
for button in soup.find_all('button'):
button.decompose()

View File

@ -128,7 +128,7 @@ def index():
countries=app.config['COUNTRIES'],
logo=render_template(
'logo.html',
config=g.user_config),
dark=g.user_config.dark),
config=g.user_config,
tor_available=int(os.environ.get('TOR_AVAILABLE')),
version_number=app.config['VERSION_NUMBER'])
@ -227,7 +227,7 @@ def search():
search_header=(render_template(
'header.html',
config=g.user_config,
logo=render_template('logo.html'),
logo=render_template('logo.html', dark=g.user_config.dark),
query=urlparse.unquote(query),
search_type=search_util.search_type,
mobile=g.user_request.mobile)

View File

@ -90,11 +90,11 @@ select {
}
.collapsible {
color: var(--whoogle-dark-element-bg) !important;
color: var(--whoogle-dark-text);
}
.collapsible:after {
color: var(--whoogle-dark-element-bg) !important;
color: var(--whoogle-dark-text);
}
.active {
@ -108,11 +108,11 @@ select {
}
.active:after {
color: var(--whoogle-dark-contrast-text);
color: var(--whoogle-dark-contrast-text) !important;
}
#gh-link {
color: var(--whoogle-dark-element-bg);
color: var(--whoogle-dark-contrast-text);
}
.autocomplete-items {

View File

@ -86,11 +86,11 @@ input {
}
.collapsible {
color: var(--whoogle-element-bg) !important;
color: var(--whoogle-text) !important;
}
.collapsible:after {
color: var(--whoogle-element-bg) !important;
color: var(--whoogle-text);
}
.active {

View File

@ -13,14 +13,14 @@
--whoogle-result-visited: #4b11a8;
/* DARK THEME COLORS */
--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;
--whoogle-dark-logo: #888888;
--whoogle-dark-page-bg: #080808;
--whoogle-dark-element-bg: #111111;
--whoogle-dark-text: #dddddd;
--whoogle-dark-contrast-text: #aaaaaa;
--whoogle-dark-secondary-text: #8a8b8c;
--whoogle-dark-result-bg: #111111;
--whoogle-dark-result-title: #dddddd;
--whoogle-dark-result-url: #eceff4;
--whoogle-dark-result-visited: #959595;
}

View File

@ -17,9 +17,9 @@
{{ response|safe }}
</body>
<footer>
<p style="color: {{ '#fff' if config.dark else '#000' }};">
<p style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};">
Whoogle Search v{{ version_number }} ||
<a style="color: #685e79" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
<a id="gh-link" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
</p>
</footer>
<script src="static/js/autocomplete.js"></script>

View File

@ -144,7 +144,7 @@
</div>
</div>
<footer>
<p style="color: {{ '#fff' if config.dark else '#000' }};">
<p style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};">
Whoogle Search v{{ version_number }} ||
<a id="gh-link" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
</p>

View File

@ -2,7 +2,7 @@
<svg id="Layer_1" class="whoogle-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 254">
<style>
path {
fill: {{ 'var(--whoogle-dark-logo)' if config.dark else 'var(--whoogle-logo)' }};
fill: {{ 'var(--whoogle-dark-logo)' if dark else 'var(--whoogle-logo)' }};
}
</style>
<defs>