Fixes: #17732 - Add a background-color to img elements in docs to ens…

…ure 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>
netbox-community · Oct 18, 2024 · d8c5147 · d8c5147
1 parent ac9f561
commit d8c5147
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 2 deletions.
diff --git a/docs/development/style-guide.md b/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.
diff --git a/docs/extra.css b/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;

diff --git a/docs/index.md b/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
 

diff --git a/docs/netbox_logo_dark.svg b/docs/netbox_logo_dark.svg
diff --git a/docs/netbox_logo.svg → docs/netbox_logo_light.svg b/docs/netbox_logo.svg → docs/netbox_logo_light.svg