pyhf logo looks bad and is hard to read in dark mdoe

[matthewfeickert]

Summary

If you look at the pyhf logo in the README on GitHub in dark mode in your browser it looks bad / is hard to read.

Instead of trying to create a light mode and dark mode version of the logo, @henryiii has suggested that instead we conform to the style of other Scikit-HEP packages that use the color #808080 as the logo color (for pyhf this would be for all the parts that are currently black) like hist

and awkward do

As pyhf's logo is an SVG we might be able to do this just by editing the SVG directly.

Documentation Page Link

https://github.com/scikit-hep/pyhf/tree/bd8c21a33b2f3ce8b41ea78cb351eef91c21b92b

Code of Conduct

• I agree to follow the Code of Conduct

[matthewfeickert]

Yeah, I think this should be doable as just

--- a/docs/_static/img/pyhf-logo.svg
+++ b/docs/_static/img/pyhf-logo.svg
@@ -4,6 +4,7 @@
 	 viewBox="0 0 1999.44 1999.44" style="enable-background:new 0 0 1999.44 1999.44;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#3A76AF;}
+	.st1{fill:#808080;}
 </style>
 <g>
 	<rect x="608.47" y="834.55" width="151.85" height="155.73"/>
@@ -17,7 +18,7 @@
 	<rect x="405.94" y="1408.87" class="st0" width="135.56" height="139.03"/>
 	<rect x="922.63" y="842.91" class="st0" width="135.56" height="139.03"/>
 	<g>
-		<path d="M751.36,1248.39L751.36,1248.39c-0.76,0.93-73.65,88.62-204.79,177.52l10.11,14.92
+		<path class="st1" d="M751.36,1248.39L751.36,1248.39c-0.76,0.93-73.65,88.62-204.79,177.52l10.11,14.92
 			c134.16-90.97,208.18-180.51,208.56-180.96L751.36,1248.39L751.36,1248.39z"/>
 		<path d="M953.62,987.03l-0.02,0.03c-0.42,0.85-8.72,17.64-22.11,39.66c-13.37,22.01-31.9,49.28-52.43,70.93l13.08,12.39
 			c11.15-11.77,21.53-24.82,30.86-37.78c14-19.44,25.65-38.69,33.83-53.13c8.18-14.44,12.9-24.06,12.96-24.18L953.62,987.03

already gets

so I think we should just be able to add in a class for each path that is black now.

[matthewfeickert]

Hm. I think that we're going to have to do more than just switch from black to #808080 as the contrast with the #3A76AF doesn't really seem to work:

light mode:

dark mode:

[matthewfeickert]

Easy enough here, add black outline and you’re good. Hides away in dark mode.

@kratsg c.f. branch docs/change-svg-logo-line-color-to-work-in-dark-mode to take a crack at this.

[agoose77]

It's really hard to make images that work on dark AND light themes. One can get away with a "central" colour when we have monotone logos, but the pyhf logo is more complex. Your original suggestion to make two variants seems sensible @matthewfeickert. For example, consider the MyST homepage under dark and light themes. They have two logos with much nicer contrast properties: