From 7c56034f34e14266e7a987a21c28dc7aa28f6198 Mon Sep 17 00:00:00 2001 From: egrace479 Date: Thu, 4 Sep 2025 16:25:53 -0400 Subject: [PATCH 1/2] Redefine light and dark color schemes to match Imageomics colors --- docs/stylesheets/extra.css | 69 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index a7bdb6f..9a31b55 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -25,3 +25,72 @@ based on this suggestion: https://github.com/squidfunk/mkdocs-material/discussio padding-top: .175rem; padding-bottom: .175rem; } + +/* +Define Imageomics colors for theme (light and dark) +Primary Colors: +- Imageomics Green: #92991c +- Imageomics Blue: #5d8095 +- Dark Teal: #0097b2 +- White: #FFFFFF +Accent Colors: +- Light Green: #9bcb5e +- Red: #bb0000 +- NSF Gold: #caae54 +- NSF Blue: #61a5d6 +Adjust admonitions and links to match (where otherwise clashed) +*/ + +[data-md-color-scheme="default"] { + --md-primary-fg-color: #0097b2; + --md-accent-fg-color: #92991c; + --md-footer-bg-color: #92991c; +} + +/* Set admonition (Note) colors to match the primary blue */ +/* border color */ +.md-typeset .admonition.note, .md-typeset details.note { + border-color: var(--md-primary-fg-color); + box-shadow: #0097b21a; +} + +/* icon color */ +.md-typeset .admonition.note > .admonition-title::before { + background-color: #0097b2; +} + +/* shaded part (title/heading) */ +.md-typeset .note>.admonition-title,.md-typeset .note>summary { + background-color: #0097b21a; +} + +/* Set admonition (question) colors to match the accent green */ +/* border color */ +.md-typeset .admonition.question, .md-typeset details.question { + border-color: var(--md-accent-fg-color); + box-shadow: #9bcb5e1a; +} + +/* icon color */ +.md-typeset .admonition.question > .admonition-title::before { + background-color: var(--md-accent-fg-color); +} + +/* shaded part (title/heading) */ +.md-typeset .question>.admonition-title,.md-typeset .question>summary { + background-color: #9bcb5e1a; +} + +.md-typeset a { + color: #0097b2; +} + +.md-nav .md-nav__link--active { + color: #0097b2; +} + +[data-md-color-scheme="slate"] { + --md-primary-fg-color: #5d8095; + --md-accent-fg-color: #92991c; + --md-footer-bg-color--dark: #93991ca4; +} From b636f1e071dc4ab3ba776dc0d14b1716d9e776c6 Mon Sep 17 00:00:00 2001 From: egrace479 Date: Fri, 5 Sep 2025 15:36:47 -0400 Subject: [PATCH 2/2] Set colors based on Data & Infrastructure team discussion Ensure documentation of each setting --- docs/stylesheets/extra.css | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 9a31b55..d38ac35 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -26,7 +26,7 @@ based on this suggestion: https://github.com/squidfunk/mkdocs-material/discussio padding-bottom: .175rem; } -/* +/* Define Imageomics colors for theme (light and dark) Primary Colors: - Imageomics Green: #92991c @@ -41,16 +41,16 @@ Accent Colors: Adjust admonitions and links to match (where otherwise clashed) */ +/* Light mode colors: Imageomics Blue and Light Green */ [data-md-color-scheme="default"] { - --md-primary-fg-color: #0097b2; - --md-accent-fg-color: #92991c; - --md-footer-bg-color: #92991c; + --md-primary-fg-color: #5d8095; + --md-accent-fg-color: #9bcb5e; } -/* Set admonition (Note) colors to match the primary blue */ +/* Set admonition (Note) colors to match Dark Teal used for URLs */ /* border color */ .md-typeset .admonition.note, .md-typeset details.note { - border-color: var(--md-primary-fg-color); + border-color: #0097b2; box-shadow: #0097b21a; } @@ -64,7 +64,8 @@ Adjust admonitions and links to match (where otherwise clashed) background-color: #0097b21a; } -/* Set admonition (question) colors to match the accent green */ +/* Set admonition (question) colors to match the accent green + Light Green for light mode, Imageomics Green for dark mode */ /* border color */ .md-typeset .admonition.question, .md-typeset details.question { border-color: var(--md-accent-fg-color); @@ -81,16 +82,19 @@ Adjust admonitions and links to match (where otherwise clashed) background-color: #9bcb5e1a; } +/* Set URL colors to Dark Teal for better contrast */ +/* Content URLs */ .md-typeset a { color: #0097b2; } +/* Navigation URL (side panel contents) */ .md-nav .md-nav__link--active { color: #0097b2; } +/* Dark mode colors: Imageomics Blue and Imageomics Green */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #5d8095; --md-accent-fg-color: #92991c; - --md-footer-bg-color--dark: #93991ca4; }