summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2021-05-25 21:39:47 +0200
committerDaniel Friesel <derf@finalrewind.org>2021-05-25 21:39:47 +0200
commit0e4badb22d7666d0db3737cb3a910437b5b0bf52 (patch)
tree797536d5681305404a1ad4705f65e97cc90d3c72
parenta84f8fceddef22d54a4e8718c00ab74a7eb0d492 (diff)
detail page: use average image color for background
just a test. may be reverted.
-rwxr-xr-xbin/pyggle23
-rw-r--r--share/html_detail_start26
2 files changed, 21 insertions, 28 deletions
diff --git a/bin/pyggle b/bin/pyggle
index 58319f1..3b2e0ff 100755
--- a/bin/pyggle
+++ b/bin/pyggle
@@ -188,7 +188,12 @@ class Thumbnail:
im = rotate_image(im, self.exif_tag)
im.thumbnail((self.size * 2, self.size * 2))
- im.convert("RGB").save(self.thumbname, "JPEG")
+ im = im.convert("RGB")
+ im.save(self.thumbname, "JPEG")
+
+ if args.with_detail_page:
+ self.average_color = im.resize((1, 1)).getpixel((0, 0))
+ self.luminance = im.convert("L").getpixel((0, 0))
self.html = ImageHTML()
@@ -354,8 +359,20 @@ class Thumbnail:
def to_detail_html(self, html_prefix, html_postfix):
with open(f"{self.filename}.html", "w") as f:
- f.write(html_prefix.replace("<!-- $title -->", self.filename))
- f.write(self.html.to_detail_html(self.filename))
+ prefix = html_prefix.replace("<!-- $title -->", self.filename)
+ r, g, b = self.average_color
+ prefix = prefix.replace(
+ "<html>", f"""<html style="background-color: #{r:02x}{g:02x}{b:02x}">"""
+ )
+ prefix = prefix.replace(
+ "<body>", f"""<body style="background-color: #{r:02x}{g:02x}{b:02x}">"""
+ )
+ if self.luminance >= 127:
+ prefix = prefix.replace("<!-- $theme -->", "light")
+ else:
+ prefix = prefix.replace("<!-- $theme -->", "dark")
+ f.write(prefix)
+ f.write(self.html.to_detail_html(self.filename, self.exif_tag))
f.write(html_postfix)
diff --git a/share/html_detail_start b/share/html_detail_start
index 2cd32ec..de0b12b 100644
--- a/share/html_detail_start
+++ b/share/html_detail_start
@@ -5,30 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href=".data/css/main.css"/>
- <link rel="stylesheet" type="text/css" href=".data/css/light.css" id="theme"/>
- <script>
- function addStyleSheet(name, id) {
- var path = '.data/css/' + name + '.css';
- var old = document.getElementById(id);
- if (old && (old.href != path)) {
- old.href = path;
- }
- }
- var otherTheme = {
- 'dark': 'light',
- 'light': 'dark',
- };
- var currentTheme = localStorage.getItem('theme');
- if (!otherTheme.hasOwnProperty(currentTheme)) {
- currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- addStyleSheet(currentTheme, 'theme');
-
- function toggleTheme() {
- currentTheme = otherTheme[currentTheme] || 'light';
- localStorage.setItem('theme', currentTheme);
- addStyleSheet(currentTheme, 'theme');
- }
- </script>
+ <link rel="stylesheet" type="text/css" href=".data/css/<!-- $theme -->.css" id="theme"/>
</head>
<body>