[BUG] Toolbar doesn't adhere to dark mode

[debkanchan]

Has this bug been raised before?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Description

In dark mode, toolbar background is still white while background is dark

Steps to Reproduce

• init a next.js project
• setup a theme switcher using next/themes
• setup shadcn/ui
• copy any block
• add a yoopta editor anywhere with toolbar plugin
• add text
• switch to dark mode
• select text

Environment

• OS: MacOS Sonoma 14.5 (23F79)
• Browser: Arc Version 1.54.0 (52220) [Chromium Engine Version 127.0.6533.89]

Screenshots

Do you want to work on this issue?

No

If "yes" to above, please explain how you would technically implement this

No response

[iamhenry]

im running into the same issues with a very similar stack

[trancethehuman]

Same here. Next.js

[trancethehuman]

If you create your own toolbar, with custom action menu styling, you can resolve it (but then you won't get to use the default toolbar)

Here's the example from the docs for setting up a toolbar that's similar to Notion's: https://github.dev/Darginec05/Yoopta-Editor/blob/master/web/next-example/src/components/examples/withCustomToolbar/index.tsx

And in FloatingPortal's div that wraps ActionMenu, you can style that (I use tailwind so I just do it like this)

<FloatingPortal
                id="yoo-custom-toolbar-action-menu-list-portal"
                root={document.getElementById("yoopta-editor")}
              >
                <div
                  style={actionMenuStyles}
                  ref={actionMenuRefs.setFloating}
                  onClick={(e) => e.stopPropagation()}
                  className="dark:text-black"
                >
                  <ActionMenu {...actionMenuRenderProps} />
                </div>
              </FloatingPortal>
            )}

[trancethehuman]

But not sure how to resolve the side plus button and drag handle's colors

[trancethehuman]

Managed to fix these by overriding the css for stuff. I use tailwind and a global.css. This now changes according to my .dark theme.

p.s main-editor is just the id I gave the

that wraps my yoopta editor

#main-editor .yoopta-block-actions-plus,
#main-editor .yoopta-block-actions-drag {
  color: silver;
}

#main-editor .yoopta-extended-block-actions,
#main-editor .yoopta-block-options-menu-content {
  background-color: hsl(var(--popover));
  color: hsl(var(--card-foreground));
  border: none;
}

I couldn't find the className that targets the default menu action, so I opted for the Notion example and tweaked it's scss there.

Hope this is useful

[trancethehuman]

Still have issues in the code menu and stuff too though - not sure how to fix these

[Darginec05]

I'll add some common readable classnames (not tailwind classes) to these components. So this should make it easy to manage styles for any theme.

FYI @iamhenry @debkanchan @trancethehuman

[trancethehuman]

Sounds great!

[iamhenry]

thank you

[debkanchan]

Arigato

[Darginec05]

Merci

[debkanchan]

looks like it's fixed right? @Darginec05

[Darginec05]

@debkanchan Yes, it's actually fixed in the latest release, but I'm working on updating the examples to clearly show how it works with dark themes

[trancethehuman]

Upgraded!

Still getting white out text on toolbars and such - also looked in the sandbox docs but couldn't find a classname to target these

[Darginec05]

@trancethehuman To style Toolbar, I suggest using these classname - https://github.com/Darginec05/Yoopta-Editor/blob/master/web/next-example/src/styles/globals.scss#L71

And it works in examples with dark theme - https://yoopta.dev/examples/withDarkTheme

Let me know if it helps you.

[trancethehuman]

.yoopta-toolbar-root works!

I still have issues with the menu for codeblock languages.

Also, how do I change the background color for the buttons in the default toolbar? When in darkmode, the hover bg is quite bright

[Darginec05]

Related to https://github.com/Darginec05/Yoopta-Editor/issues/277

[Darginec05]

@trancethehuman I'm working on related task. It will be fixed in the next patch release

But for now you can use this hack:

[data-radix-popper-content-wrapper] button {
    color: #000;
}

[trancethehuman]

Thanks! Fixed my codeblock language panel

[Quietscher]

The dark mode does not work for me. I'm using Next.js with shad cn

[Quietscher]

I am using the useTheme(); handle but it does not change the popover with the marker options

[Quietscher]

[whitetown]

Unfortunately, there are a lot of hardcoded colors. I have solved it like the css below, but it would be nice to use semantic colors everywhere.

.dark,
[data-theme='dark'] {
    .yoopta-toolbar-root {
        background-color: var(--color-base-100) !important;
        border-color: color-mix(in oklab, var(--color-base-content) 30%, transparent) !important;
    }

    .yoopta-toolbar-separator {
        background-color: color-mix(in oklab, var(--color-base-content) 30%, transparent) !important;
    }

    .yoopta-toolbar-item:hover,
    .yoopta-toolbar-item-mark:hover {
        background-color: var(--color-base-300) !important;
    }

    .yoopta-mark-code {
        background-color: var(--color-base-300) !important;
    }

    .yoopta-extended-block-actions {
        background-color: var(--color-base-100) !important;
    }

    .yoopta-block-options-menu-content {
        background-color: var(--color-base-100) !important;
        border-color: color-mix(in oklab, var(--color-base-content) 30%, transparent) !important;
    }

    .yoopta-block-options-button:hover {
        background-color: var(--color-base-300) !important;
    }

    .yoo-code-text-popover-foreground {
        background-color: var(--color-base-200) !important;
    }

    .yoo-code-text-popover-foreground > * > .yoopta-button:hover {
        background-color: var(--color-base-300) !important;
    }

    .yoopta-action-menu-list-content {
        background-color: var(--color-base-100) !important;
        border-color: color-mix(in oklab, var(--color-base-content) 30%, transparent) !important;
    }

    .yoopta-action-menu-list-content > * > * > .yoopta-button:hover {
        background-color: var(--color-base-300) !important;
    }

    .yoopta-action-menu-list-content > * > * > .yoopta-button[aria-selected='true'] {
        background-color: var(--color-base-300) !important;
    }

    .yoopta-action-menu-list-content > * > * > .yoopta-button > .yoo-action-menu-flex {
        background-color: var(--color-base-200) !important;
    }

    .yoopta-block-actions-plus,
    .yoopta-block-actions-drag {
        color: color-mix(in oklab, var(--color-base-content) 30%, transparent) !important;
    }

    .yoopta-block-actions-plus:hover,
    .yoopta-block-actions-drag:hover {
        color: color-mix(in oklab, var(--color-base-content) 60%, transparent) !important;
    }

    .yoopta-link-preview {
        background-color: var(--color-base-100) !important;
        border-color: color-mix(in oklab, var(--color-base-content) 30%, transparent) !important;
    }
}

One more small detail: in the file DefaultToolbarRender.tsx:

const getModalTriggerStyle = (modal: keyof ModalsState) => ({
        backgroundColor: isActiveTriggerModal(modal) ? 'var(--color-base-300)' : undefined,
    })

• --color-base-100
• --color-base-200
• --color-base-300
• --color-base-content are names from daisyui which I use in my project.

Also, it's not related to the issue, but I would suggest to use semantic colors in ColorPicker too.

const COLOR_PRESETS = {
    text: [
        { name: 'Default', value: 'var(--color-base-content)' },
        { name: 'Base-Content-100', value: 'var(--color-base-content-100)' },
        { name: 'Base-Content-200', value: 'var(--color-base-content-200)' },
        { name: 'Base-Content-300', value: 'var(--color-base-content-300)' },
        { name: 'Primary', value: 'var(--color-primary)' },
        { name: 'Secondary', value: 'var(--color-secondary)' },
        { name: 'Success', value: 'var(--color-success)' },
        { name: 'Warning', value: 'var(--color-warning)' },
        { name: 'Info', value: 'var(--color-info)' },
        { name: 'Danger', value: 'var(--color-error)' },
    ],
    background: [
        { name: 'Default', value: 'unset' },
        { name: 'Base-100', value: 'var(--color-base-100)' },
        { name: 'Base-200', value: 'var(--color-base-200)' },
        { name: 'Base-300', value: 'var(--color-base-300)' },
        { name: 'Primary', value: 'var(--color-primary)' },
        { name: 'Secondary', value: 'var(--color-secondary)' },
        { name: 'Success', value: 'var(--color-success)' },
        { name: 'Warning', value: 'var(--color-warning)' },
        { name: 'Info', value: 'var(--color-info)' },
        { name: 'Danger', value: 'var(--color-error)' },
    ],
}

it makes correct text-color/background-color regardless of light/dark mode.

Otherwise I am falling in love with the editor ;-)