Default font colors on landing page are hard to see

[kcpevey]

Context

As an end user, on the main landing page for Nebari, the font color (black) for the two links (Tutorial Documentation and Support Forum) are extremely hard to see.

Value and/or benefit

Users don't have to strain to read the text.

Anything else?

No response

[kcpevey]

The text in the deployment above is custom. The default text includes the h1 and h2 (first two lines) using the color above, but I don't think there are any links (the black text you can't see) by default.

I also just hit this in another deployment. This issue is also apparent on the server spawn page.

A couple of notes:

• there are some controls for theme available via nebari config
• there are some elements of theme that are coming from jhub-apps and others that are coming from the default theme in nebari (bootstrap).
• As far as I can tell, none of these are set up to handle light/dark mode
• the elements for the text color on the login page and the sever spawn page are controllable from the nebari config jupyterhub theme, h1_color and h2_color (navbar_hover_color can also cause issues).
• the element for the background color on these pages is coming from bootstrap defaults (body::background-color: var(--bs-body-bg);)

Several things need to happen in order to fix this. We need to make the jupyter theme for nebari dynamic for both light and dark mode for these elements. Second, we need to enable changing these from the nebari config.

[dharhas]

So whats with the language "Stable environment" that seems like weird phrasing.

[marcelovilla]

So whats with the language "Stable environment" that seems like weird phrasing.

I agree it sounds weird but that does not come from Nebari itself but rather from the profile description given by the user.

[kcpevey]

@kenafoster successfully got around the theme limitations by adding more css stuffs to theme.jupyterhub.welcome in the nebari-config.yml. This works until its resolved properly.

For example:

        <style> 
            a.hero { color: #1DA097; }
            h1, h2 {color: light-dark(black,white)}
        </style>
        <span style="font-size:1.5em;">First time using Nebari? <a class="hero" href="https://nebari.dev">Register here</a> with your coupon code.</span>
        <br>
        <br>
        📝 <a class="hero" href="https://www.nebari.dev/docs/tutorials/">Tutorial Documentation</a>: Learn to use Nebari, it's features, and integrated tools.
        <br>
        💬 <a class="hero" href="https://github.com/orgs/nebari-dev/discussions">Support Forum</a>: Ask questions, suggest improvements, and join the community!