Przeglądaj źródła

Fixes: #17732 - Add a background-color to img elements in docs to ensure readability in dark mode (#17790)

* Add a background-color to img elements in docs to ensure readability in dark mode

* Limit style changes to those within CMS content blocks; update colors of main netbox_logo.svg

* Add a white stroke to the main logo

* Add light & dark mode versions of the NetBox logo

---------

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>
bctiemann 1 rok temu
rodzic
commit
d8c5147e02

+ 1 - 1
docs/development/style-guide.md

@@ -76,4 +76,4 @@ When adding a new dependency, a short description of the package and the URL of
 
 * When referring to NetBox in writing, use the proper form "NetBox," with the letters N and B capitalized. The lowercase form "netbox" should be used in code, filenames, etc. but never "Netbox" or any other deviation.
 
-* There is an SVG form of the NetBox logo at [docs/netbox_logo.svg](../netbox_logo.svg). It is preferred to use this logo for all purposes as it scales to arbitrary sizes without loss of resolution. If a raster image is required, the SVG logo should be converted to a PNG image of the prescribed size.
+* There are SVG forms of the NetBox logo for both [light mode](../netbox_logo_light.svg) and [dark mode](../netbox_logo_dark.svg) available. It is preferred to use the SVG logo for all purposes as it scales to arbitrary sizes without loss of resolution. If a raster image is required, the SVG logo should be converted to a PNG image of the desired size.

+ 4 - 0
docs/extra.css

@@ -5,6 +5,10 @@ img {
     margin-right: auto;
 }
 
+.md-content img {
+    background-color: rgba(255, 255, 255, 0.64);
+}
+
 /* Tables */
 table {
     margin-bottom: 24px;

+ 2 - 1
docs/index.md

@@ -1,4 +1,5 @@
-![NetBox](netbox_logo.svg "NetBox logo"){style="height: 100px; margin-bottom: 3em"}
+![NetBox](netbox_logo_light.svg#only-light "NetBox logo"){style="height: 100px; margin-bottom: 3em; background: none;"}
+![NetBox](netbox_logo_dark.svg#only-dark "NetBox logo"){style="height: 100px; margin-bottom: 3em; background: none;"}
 
 # The Premier Network Source of Truth
 

Plik diff jest za duży
+ 20 - 0
docs/netbox_logo_dark.svg


+ 0 - 0
docs/netbox_logo.svg → docs/netbox_logo_light.svg


Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików