Accessibility improvement needed for SideNav

[jquesada2016]

I am a user who is legally blind, and tuning colors to high-contrast is crucial for me, and individuals like me. I am trying to set the background, text, and font colors for the SideNav component. However, it is mentioned here that theming options are currently not available, but will be sometime in the future:

Note: The UI Shell does not currently use the Carbon theme tokens; theming options for the shell will be available in the future. All color used in the UI Shell is from the IBM Design Language palette.

Would it please be possible to add some options to allow this -- even if it is just temporary -- until this feature is added? Without it, I am not able to use the SideNav component without rolling my own.

Specifically, the controls needed are as follows:

• background color
• text color (for the items and menu items, etc.)
• icon color
• opacity

Any help at all would be greatly appreciated!

[jazmik]

Not sure if this will be useful or not, but I use the following styling so the SideNav matches the selected theme. Hopefully you should be able to adjust as needed.

<style global>
    .bx--side-nav {
        background-color: var(--cds-ui-background);
        color: var(--cds-text-02);
        border-right: 1px solid var(--cds-ui-02);
    }
    .bx--side-nav__divider {
        background-color: var(--cds-ui-03);
    }
    a.bx--side-nav__link > .bx--side-nav__link-text {
        color: var(--cds-text-02);
    }
    .bx--side-nav__submenu {
        color: var(--cds-text-02);
    }
    .bx--side-nav__menu a.bx--side-nav__link--current,
    .bx--side-nav__menu a.bx--side-nav__link[aria-current="page"],
    a.bx--side-nav__link--current {
        background-color: var(--cds-hover-ui);
    }

    .bx--side-nav__menu a.bx--side-nav__link--current > span,
    .bx--side-nav__menu a.bx--side-nav__link[aria-current="page"] > span,
    a.bx--side-nav__link--current > span {
        color: var(--cds-text-01);
    }

    .bx--side-nav__icon > svg {
        fill: var(--cds-text-02);
    }
    a.bx--side-nav__link[aria-current="page"],
    a.bx--side-nav__link--current {
        background-color: var(--cds-hover-ui);
    }
    a.bx--side-nav__link[aria-current="page"] .bx--side-nav__link-text,
    a.bx--side-nav__link--current .bx--side-nav__link-text {
        color: var(--cds-text-01);
    }
    .bx--side-nav__item:not(.bx--side-nav__item--active)
        > .bx--side-nav__link:hover,
    .bx--side-nav__menu
        a.bx--side-nav__link:not(.bx--side-nav__link--current):not([aria-current="page"]):hover {
        color: var(--cds-text-01);
        background-color: var(--cds-hover-ui);
    }
    .bx--side-nav__item:not(.bx--side-nav__item--active)
        > .bx--side-nav__link:hover
        > span,
    .bx--side-nav__item:not(.bx--side-nav__item--active)
        .bx--side-nav__menu-item
        > .bx--side-nav__link:hover
        > span {
        color: var(--cds-text-01);
    }
    .bx--side-nav__submenu:hover {
        color: var(--cds-text-01);
        background-color: var(--cds-hover-ui);
    }
</style>

[jquesada2016]

That was absolutely wonderfully helpful! Thank you so very much!