Imageomics-Guide color scheme

[egrace479]

Do we want to set a different color scheme for the Imageomics Guide or stick with the default? As noted below, I plan to use the teal for ABC.

I'd also like to update the color scheme so these don't look so much like every other MkDocs site--can be more custom to the Institute and Center (teal looked very much like one of the ABC colors) and they can change with light/dark mode as well.

@thompsonmj and I had a few "wait which site are we looking at" moments and thought it may be nice to customize a bit more so it stands out.

Originally posted by @egrace479 in #17

[hlapp]

I agree if it's easy enough we should apply institute-specific color pattern(s). For Imageomics, do we have that somewhere in a shared drive? Or take it from the PPT template?

Perhaps @Ryan-Horns and/or @dboghrat can weigh in?

[egrace479]

Color Palette from @Ryan-Horns:

• 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

MkDocs Custom Color

[egrace479]

I played with the Imageomics Color Palette provided--how's this look?

Dark Teal (#0097b2) for header & URL and Light Green (#9bcb5e) for footer & hover (note the green hover on "repositories" link):

• Light mode:

• Dark mode:

Imageomics Blue (#5d8095) for header and Imageomics Green (#92991c) for footer (URL and hover colors updated to match):

• Light mode:

• Dark mode:

• I'm not sure if there's enough contrast for the URLs in dark mode with these settings.

Personally, I like the Dark Teal for the header (& URLs) in both, but Light green for light mode footer and Imageomics green for dark mode footer, as it seems more consistent when switching between them (to me).

Other thoughts or opinions?

If you want to try different combinations, edit the extra CSS stylesheet locally. I included the hex codes in a comment above the lines containing the color scheme definitions.