pyhf icon indicating copy to clipboard operation
pyhf copied to clipboard

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

Open matthewfeickert opened this issue 2 years ago • 4 comments
trafficstars

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.

dark-mode

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

hist logo

and awkward do

awkward logo

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

  • [X] I agree to follow the Code of Conduct

matthewfeickert avatar Aug 03 '23 20:08 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

change-line-color

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

matthewfeickert avatar Aug 03 '23 20:08 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: pyhf-light-mode dark mode: pyhf-dark-mode

matthewfeickert avatar Aug 03 '23 21:08 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.

matthewfeickert avatar Aug 03 '23 21:08 matthewfeickert

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: image image

agoose77 avatar Aug 04 '23 09:08 agoose77