Commit 0e4badb2 authored by Birte Kristina Friesel's avatar Birte Kristina Friesel
Browse files

detail page: use average image color for background 

just a test. may be reverted.
parent a84f8fce

bin/pyggle

+20 −3
Original line number Diff line number Diff line
@@ -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)

share/html_detail_start

+1 −25
Original line number Diff line number Diff line
@@ -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>