nakidai
/
whoogle-search
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated dark theme (#121) 

* Implemented new dark theme

Now uses a dedicated css file for all dark theme color changes, rather
than replacing color codes directly.

Color theme is from discussion in #60.

* Minor link color update
main
Ben Busby 2020-09-14 15:29:58 -04:00 committed by GitHub
parent a1894975af
commit 9afe5f81bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/filter.py
View File

@ -144,18 +144,6 @@ class Filter:
except AttributeError: except AttributeError:
pass pass
# Set up dark mode if active
if self.dark:
soup.find('html')['style'] = 'scrollbar-color: #333 #111;color:#fff !important;background:#000 !important'
for input_element in soup.findAll('input'):
input_element['style'] = 'color:#fff;background:#000;'
for span_element in soup.findAll('span'):
span_element['style'] = 'color: white;'
for href_element in soup.findAll('a'):
href_element['style'] = 'color: white' if href_element['href'].startswith('/search') else ''
def update_link(self, link): def update_link(self, link):
# Replace href with only the intended destination (no "utm" type tags) # Replace href with only the intended destination (no "utm" type tags)
href = link['href'].replace('https://www.google.com', '') href = link['href'].replace('https://www.google.com', '')

42
app/static/css/dark-theme.css Normal file
View File

@ -0,0 +1,42 @@
html {
background-color: #000 !important;
}
body {
background-color: #222 !important;
}
div {
/*background-color: #111 !important;*/
color: #fff !important;
}
a:visited h3 div {
color: #bbbbff !important;
}
a:link h3 div {
color: #4b8eea !important;
}
a:link div {
color: #aaffaa !important;
}
div span {
color: #bbb !important;
}
input {
background-color: #111 !important;
color: #fff !important;
}
#search-bar {
color: #fff !important;
background-color: #000 !important;
}
.search-container {
background-color: #000 !important;
}

2
app/static/css/main.css
View File

@ -46,7 +46,7 @@ body {
width: 100%; width: 100%;
height: 40px; height: 40px;
border: 1px solid #685e79; border: 1px solid #685e79;
background: #685e79; background: #685e79 !important;
text-align: center; text-align: center;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;

3
app/templates/display.html
View File

@ -8,6 +8,9 @@
<script type="text/javascript" src="/static/js/autocomplete.js"></script> <script type="text/javascript" src="/static/js/autocomplete.js"></script>
<link rel="stylesheet" href="/static/css/{{ 'search-dark' if dark_mode else 'search' }}.css"> <link rel="stylesheet" href="/static/css/{{ 'search-dark' if dark_mode else 'search' }}.css">
<link rel="stylesheet" href="/static/css/header.css"> <link rel="stylesheet" href="/static/css/header.css">
{% if dark_mode %}
<link rel="stylesheet" href="/static/css/dark-theme.css"/>
{% endif %}
<title>{{ query }} - Whoogle Search</title> <title>{{ query }} - Whoogle Search</title>
</head> </head>
<body> <body>

3
app/templates/index.html
View File

@ -23,6 +23,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/{{ 'search-dark' if config.dark else 'search' }}.css"> <link rel="stylesheet" href="/static/css/{{ 'search-dark' if config.dark else 'search' }}.css">
<link rel="stylesheet" href="/static/css/main.css"> <link rel="stylesheet" href="/static/css/main.css">
{% if config.dark %}
<link rel="stylesheet" href="/static/css/dark-theme.css"/>
{% endif %}
<title>Whoogle Search</title> <title>Whoogle Search</title>
</head> </head>
<body id="main" style="display: none; background-color: {{ '#000' if config.dark else '#fff' }}"> <body id="main" style="display: none; background-color: {{ '#000' if config.dark else '#fff' }}">