adds almsot working dark mode

This commit is contained in:
Alexandar Mechev 2020-10-17 13:35:51 +02:00
parent eb809a1608
commit 0e6c020975
No known key found for this signature in database
GPG Key ID: 1B754EA636091772
5 changed files with 43 additions and 12 deletions

View File

@ -54,7 +54,11 @@ class Filter:
result = {'background-color':'fff'} result = {'background-color':'fff'}
if self.theme: if self.theme:
sheet = cssutils.parseString(self.get_theme_file()) sheet = cssutils.parseString(self.get_theme_file())
reskin_selector = [i for i in sheet if i.selectorText=='.reskin'] if self.dark:
selector_name = ".reskin-dark"
else:
selector_name = ".reskin"
reskin_selector = [i for i in sheet if i.selectorText==selector_name]
if len(reskin_selector) == 0: if len(reskin_selector) == 0:
return result return result
for css_prop in reskin_selector[0].style: for css_prop in reskin_selector[0].style:

View File

@ -2,9 +2,22 @@ html {
background-color: #D8DEE9b3 !important; background-color: #D8DEE9b3 !important;
} }
html.dark {
background-color: #292E39 !important;
color: #ECEFF4 !important;
}
body.dark {
background-color: #292E39 !important;
color: #ECEFF4 !important;
}
div { div {
/*background-color: #D8DEE9b3 !important;*/ color: #3B4252
color: #3B4252 !important; }
div.dark {
color: #ECEFF4 !important;
} }
a:visited h3 div { a:visited h3 div {
@ -20,7 +33,7 @@ a:link div {
} }
div span { div span {
color: #3B4252 !important; color: #3B4252;
} }
input { input {
@ -30,7 +43,7 @@ input {
#search-bar { #search-bar {
color: #4C566A !important; color: #4C566A !important;
background-color: #ffffff !important; background-color: #ffffff ;
} }
footer { footer {
@ -38,7 +51,17 @@ footer {
color: #3B4252; color: #3B4252;
} }
.reskin { footer.dark {
background-color: #ECEFF4; background-color: #ECEFF4 !important;
color: #3B4252; color: #3B4252;
}
.reskin {
background-color: #292E39;
color: #ECEFF4;
}
.reskin-dark {
background-color: #2E3440;
color: #ECEFF4;
} }

View File

@ -0,0 +1,4 @@
.reskin {
background-color: #fff;
color: #333;
}

View File

@ -1,4 +1,4 @@
<html> <html class="{{ 'dark' if dark_mode else '' }}">
<head> <head>
<link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon">
<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/img/favicon.ico" type="image/x-icon">
@ -16,11 +16,11 @@
<link rel="stylesheet" href="/static/css/header.css"> <link rel="stylesheet" href="/static/css/header.css">
<title>{{ query }} - Whoogle Search</title> <title>{{ query }} - Whoogle Search</title>
</head> </head>
<body> <body class="{{ 'dark' if dark_mode else '' }}">
{{ search_header|safe }} {{ search_header|safe }}
{{ response|safe }} {{ response|safe }}
</body> </body>
<footer> <footer class="{{ 'dark' if dark_mode else '' }}">
<p> <p>
Whoogle Search v{{ version_number }} || Whoogle Search v{{ version_number }} ||
<a style="color: #685e79" href="https://github.com/benbusby/whoogle-search">View on GitHub</a> <a style="color: #685e79" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>

View File

@ -1,4 +1,4 @@
<html> <html class="{{ 'dark' if config['dark'] else '' }}">
<head> <head>
<link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-icon-60x60.png">
@ -35,7 +35,7 @@
<title>Whoogle Search</title> <title>Whoogle Search</title>
</head> </head>
<body id="main" style="display: none;"> <body class="{{ 'dark' if config['dark'] else '' }}" id="main" style="display: none;">
<div class="search-container"> <div class="search-container">
<img class="logo" src="/static/img/logo.png"> <img class="logo" src="/static/img/logo.png">
<form id="search-form" action="/search" method="{{ 'get' if config.get_only else 'post' }}"> <form id="search-form" action="/search" method="{{ 'get' if config.get_only else 'post' }}">