diff options
author | Daniel Friesel <derf@finalrewind.org> | 2021-05-25 21:39:47 +0200 |
---|---|---|
committer | Daniel Friesel <derf@finalrewind.org> | 2021-05-25 21:39:47 +0200 |
commit | 0e4badb22d7666d0db3737cb3a910437b5b0bf52 (patch) | |
tree | 797536d5681305404a1ad4705f65e97cc90d3c72 | |
parent | a84f8fceddef22d54a4e8718c00ab74a7eb0d492 (diff) |
detail page: use average image color for background
just a test. may be reverted.
-rwxr-xr-x | bin/pyggle | 23 | ||||
-rw-r--r-- | share/html_detail_start | 26 |
2 files changed, 21 insertions, 28 deletions
@@ -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> |