💡Dark Mode for Editor.JS

[KShivendu]

1. Describe a problem. Many of the modern applications now support dark mode and since editor.js is getting popular, It would be fantastic to have a ready-to-use dark mode configuration.

2. Describe the solution you'd like.

   const editor = new EditorJS({
   // ...
   theme: 'dark'
   })

   We can decide the colors as we move ahead.

[mrspence]

This would be a fantastic addition to this issue from November - https://github.com/codex-team/editor.js/issues/822

Essentially the option to import editor JS without any styles would be really useful, so we can avoid duplicate code / overriding code.

P.S - not sure if I've yet dropped an issue on Editor.JS, so I'd just like to say this codebase is one I avidly follow updates and respect. Thank-you for building such a brilliant ecosystem! Some day I hope to donate or contribute if I get time, but for now I want to publicly say thank-you! 👋🙌

[neSpecc]

Something like that? Made in 2 mins by custom style overrides.

[KShivendu]

Looks great. That's what I was talking about. Now I think it's better if we leave it up to the developers to set their colors using CSS classes provided in Core Styles API.

[Eonasdan]

Here's what I ended up with. Main body background color is #171717 and font color is white.

.ce-block--selected .ce-block__content,
.ce-inline-toolbar,
.codex-editor--narrow .ce-toolbox,
.ce-conversion-toolbar,
.ce-settings,
.ce-settings__button,
.ce-toolbar__settings-btn,
.cdx-button,
.ce-popover,
.ce-toolbar__plus:hover {
  background: #007991;
  color: inherit;
}

.ce-inline-tool,
.ce-conversion-toolbar__label,
.ce-toolbox__button,
.cdx-settings-button,
.ce-toolbar__plus {
  color: inherit;
}

::selection {
  background: #439a86;
}

.cdx-settings-button:hover,
.ce-settings__button:hover,
.ce-toolbox__button--active,
.ce-toolbox__button:hover,
.cdx-button:hover,
.ce-inline-toolbar__dropdown:hover,
.ce-inline-tool:hover,
.ce-popover__item:hover,
.ce-toolbar__settings-btn:hover {
  background-color: #439a86;
  color: inherit;
}

.cdx-notify--error {
  background: #fb5d5d !important;
}

.cdx-notify__cross::after,
.cdx-notify__cross::before {
  background: white;
}

[fitterfizzle]

Something like that? Made in 2 mins by custom style overrides.

Could you please share your CSS?

[fitterfizzle]

Friendly bump @neSpecc

[Eonasdan]

@fitterfizzle copy what I posted and change the colors

[fitterfizzle]

    background: #007991;

Thanks much appreciated.

I tried creating a .css file with your suggestions but sadly still doesn't really look as it should.

Moreover I need also some way to change the applied classes dynamically as my application supports changing between light and dark mode on the fly.

[Eonasdan]

I updated my previous comment. I must have fixed the other styles at some point. As far as a light/dark, media queries could do that based on the users preferred theme. If you have a toggle button, something like this might help: https://css-tricks.com/updating-a-css-variable-with-javascript/

[homocodian]

Something like that? Made in 2 mins by custom style overrides.

Can share these styles with us?

[MussaratAziz]

@neSpecc can you please share the css please.

[geekyayush]

Friendly bump good sir @neSpecc I'd appreciate it if you share the custom CSS for this design: https://github.com/codex-team/editor.js/issues/1537#issuecomment-780115551

[MussaratAziz]

Friendly bump good sir @neSpecc I'd appreciate it if you share the custom CSS for this design: #1537 (comment)

most probably @neSpecc doesnt want to share @geekyayush

[geekyayush]

most probably @neSpecc doesnt want to share @geekyayush

If it's true, it's really sad. :( I wish I was skilled enough to do custom CSS. Just stuck in the backend at the moment lol.

[anuragrao04]

@neSpecc please do post if you're willing to share the styles, and if yes- please do post the styles as well.

[anuragrao04]

I put together some CSS and it looks decent:

Here's the CSS:

.cdx-block,
.ce-header,
.inlineToolButton,
.ce-toolbar__plus,
.ce-toolbar__settings-btn,
.ce-popover__search {
  background-color: #2b2b2b;
  color: white;
}

.ce-toolbar__plus:hover,
.ce-toolbar__settings-btn:hover,
.cdx-loader,
.cdx-button {
  color: white;
  background-color: #262626;
}

.cdx-button:hover {
  background-color: #2f2f2f;
}

.ce-popover,
.ce-popover-item,
.ce-popover-item__icon,
.ce-popover-items,
.ce-popover-item:hover {
  --color-background-item-hover: #2f2f2f;
  background-color: #262626;
  color: white;
  border: none;
}

[geekyayush]

I put together some CSS and it looks decent

Dude, who are you? Did god send you to help me (a fellow developer)?

Thank you so much.

[neSpecc]

Hi there. I remember this request.

I can't share exact those styles from my screenshot since they were made just to experiment with how easily anyone can override any Editor style. I made them in DevTools and did not save them.

I suppose you are mostly interested in a set of CSS selectors to override, not in colors itself. You can begin with these classes from our example page, and then just use your DevTools inspector to find what style you also want to override.

More important for us is to refactor Editor styles at all. I'm planning to rewrite styles by exposing a set of CSS variables that you can easily override and tune. Not only colors but all main tokens (sizes, roundings, font, etc).

At the moment I'm also working on our Design System, which will be a separate package including theming, colors, and components. It could be used by Editor and 3rd party tools as well.

[longvo00221]

.ce-block--selected .ce-blockcontent, .ce-inline-toolbar, .codex-editor--narrow .ce-toolbox, .ce-conversion-toolbar, .ce-settings, .ce-settingsbutton, .ce-toolbarsettings-btn, .cdx-button, .ce-popover, .ce-toolbarplus:hover { background: #0000; color: inherit; }

.ce-inline-tool, .ce-conversion-toolbarlabel, .ce-toolboxbutton, .cdx-settings-button, .ce-toolbar__plus { color: inherit; }

::selection { background: #000; }

.cdx-settings-button:hover, .ce-settingsbutton:hover, .ce-toolboxbutton--active, .ce-toolboxbutton:hover, .cdx-button:hover, .ce-inline-toolbardropdown:hover, .ce-inline-tool:hover, .ce-popoveritem:hover, .ce-toolbarsettings-btn:hover { background-color: #aaaaaa; color: inherit; }

.cdx-notify--error { background: #fb5d5d !important; }

.cdx-notifycross::after, .cdx-notifycross::before { background: white; }

.dark .ce-inline-toolbar, .dark .codex-editor--narrow .ce-toolbox, .dark .ce-conversion-toolbar, .dark .ce-settings, .dark .ce-settingsbutton, .dark .ce-toolbarsettings-btn, .dark .cdx-button, .dark .ce-popover, .dark .ce-toolbar__plus:hover { background: #fff; color: #000; }

.dark .ce-inline-tool, .dark .ce-conversion-toolbarlabel, .dark .ce-toolboxbutton, .dark .cdx-settings-button, .dark .ce-toolbar__plus { color: #616161; }

.dark ::selection { background: #4d4d4d; }

.dark .cdx-settings-button:hover, .dark .ce-settingsbutton:hover, .dark .ce-toolboxbutton--active, .dark .ce-toolboxbutton:hover, .dark .cdx-button:hover, .dark .ce-inline-toolbardropdown:hover, .dark .ce-inline-tool:hover, .dark .ce-popoveritem:hover, .dark .ce-toolbarsettings-btn:hover { background-color: #4d4d4d; color: #fff; }

.dark .cdx-notify--error { background: #fb5d5d !important; }

.dark .cdx-notifycross::after, .dark .cdx-notifycross::before { background: #1a1a1a; }

this is the css for dark and light theme nextjs shadcn

[Miguel-Domingos]

I was working with the Editor yesterday and I was looking for dark mode, I saw that more people were in the same situation. So, I've decided to solve and publish my code (style), soon I'll be creating a configuration mode to support dark mode, for now, if you want to use dark mode, you can find style code in my portfolio here

See the result, bellow:

Light mode

Dark mode

[manuelcunga]

I was working with the Editor yesterday and I was looking for dark mode, I saw that more people were in the same situation. So, I've decided to solve and publish my code (style), soon I'll be creating a configuration mode to support dark mode, for now, if you want to use dark mode, you can find style code in my portfolio here

See the result, bellow:

Light mode

Dark mode

Man you´re Hero

[vipertecpro]

I really tried my best there, please give me feedback on this, i will work on it's padding and hover effect later on

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --padding: 10px;
    --max-height: 300px;
    --color-border: #ccc;
    --width: 200px;
    --border-radius: 5px;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --popover-top: 50px;
    --popover-left: 50px;
    --color-background: #fff;
    --color-background-dark: rgba(0, 0, 0, 0.4);
}

/* Default light mode styles */
.cdx-block,
.ce-header,
.inlineToolButton,
.ce-toolbar__plus,
.ce-toolbar__settings-btn,
.ce-popover__search {
    @apply bg-white text-black;
}

/* Dark mode styles */
.dark .cdx-block,
.dark .ce-header,
.dark .inlineToolButton,
.dark .ce-toolbar__plus,
.dark .ce-toolbar__settings-btn,
.dark .ce-popover__search {
    @apply bg-gray-800 text-white;
}

.dark .ce-toolbar__plus:hover,
.dark .ce-toolbar__settings-btn:hover,
.dark .cdx-loader,
.dark .cdx-button {
    @apply text-white bg-gray-700;
}

.dark .cdx-button:hover {
    @apply bg-gray-600;
}

.dark .ce-popover,
.dark .ce-popover-item,
.dark .ce-popover-item__icon,
.dark .ce-popover-items,
.dark .ce-popover-item:hover {
    @apply bg-gray-700 text-white border-none;
}

.ce-popover--opened > .ce-popover__container {
    @apply opacity-100 pointer-events-auto border;
    padding: var(--padding);
    max-height: var(--max-height);
    animation: panelShowing .1s ease;
    border-color: var(--color-border);
}

.ce-popover__container {
    @apply overflow-hidden box-border absolute flex flex-col z-10 opacity-0 pointer-events-none p-0 border-none;
    min-width: var(--width);
    width: var(--width);
    max-height: var(--max-height);
    border-radius: var(--border-radius);
    box-shadow: 0 3px 15px -3px var(--color-shadow);
    left: var(--popover-left);
    top: var(--popover-top);
    background: var(--color-background);
}

.dark .ce-popover__container {
    background: var(--color-background-dark);
}

/* Light mode scrollbar */
.ce-popover__items::-webkit-scrollbar {
    width: 4px;
}

.ce-popover__items::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

/* Dark mode scrollbar */
.dark .ce-popover__items::-webkit-scrollbar {
    width: 4px;
}

.dark .ce-popover__items::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
}

.dark .ce-inline-tool svg {
    color: white;
}

.dark .ce-inline-tool:hover svg {
    color: var(--color-background-dark);
}

[lukajose]

For those who want shadcn + tailwindcss integration:

.dark .ce-popover,
.dark .ce-popover-item,
.dark .ce-popover-item__icon,
.dark .ce-popover-items,
.dark .ce-popover__container
.dark .ce-popover-item:hover {
  --color-background-item-hover: hsl(var(--background));
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
  background: hsl(var(--background));
}
.dark .ce-popover__container {
  background: hsl(var(--background));
}

.dark .ce-popover--opened>.ce-popover__container {
  border: 1px solid hsl(var(--border));
}

.dark .ce-popover-item-separator__line {
  border: 1px solid hsl(var(--border));
}

.dark .ce-toolbar__plus,
.dark .ce-toolbar__settings-btn,
.dark .ce-popover-item__title,
.dark .ce-inline-tool
.dark .ce-inline-tool--link
.dark .ce-popover-item__icon {
  color: hsl(var(--foreground));
}

.dark .cdx-search-field.ce-popover__search {
  background-color: hsl(var(--muted) / 0.3);
  border-color: hsl(var(--border));
}

.dark .cdx-search-field__input {
  color: hsl(var(--foreground));
}

.dark .cdx-block,
.dark .ce-block {
  color: hsl(var(--foreground));
}

.dark .ce-inline-toolbar,
.dark .ce-conversion-tool__icon,
.dark .ce-popover-item__icon,
.dark .tc-popover__item-icon {
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
}

.dark .ce-popover,
.dark .ce-conversion-toolbar,
.dark .ce-inline-toolbar,
.dark .tc-popover {
  background-color: hsl(var(--popover));
  border-color: hsl(var(--border));
  box-shadow: 0 3px 15px -3px hsl(var(--border) / 0.2);
}

.dark .ce-inline-tool {
  color: hsl(var(--color-text-primary));
}

.dark .ce-inline-tool:hover,
.dark .ce-inline-toolbar__dropdown:hover,
.dark .ce-toolbar__plus:hover,
.dark .ce-toolbar__settings-btn:hover,
.dark .ce-conversion-tool:hover,
.dark .ce-popover-item:hover {
  background-color: hsl(var(--accent) / 0.2);
}

.dark *::selection,
.dark .ce-block.ce-block--selected .ce-block__content {
  background-color: hsl(var(--accent) / 0.2);
}

.dark .ce-popover__items {
  scrollbar-color: hsl(var(--border)) hsl(var(--background));
}

/* table class wrapper */
.dark .tc-wrap,
.dark .tc-wrap * {
  --color-border: hsl(var(--border));
  --color-text-secondary: hsl(var(--foreground));
  --color-background: hsl(var(--accent) / 0.2);
  --toggler-dots-color: hsl(var(--accent) / 0.2);
  --toggler-dots-color-hovered: hsl(var(--foreground));
}

@media (max-width: 650px) {
  .dark .ce-toolbar__settings-btn,
  .dark .ce-toolbar__plus {
    background-color: hsl(var(--popover));
    border-color: hsl(var(--border));
    box-shadow: 0 3px 15px -3px hsl(var(--border) / 0.2);
  }
}

[antoniosaints]

For those who want shadcn + tailwindcss integration:

.dark .ce-popover,
.dark .ce-popover-item,
.dark .ce-popover-item__icon,
.dark .ce-popover-items,
.dark .ce-popover__container
.dark .ce-popover-item:hover {
  --color-background-item-hover: hsl(var(--background));
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
  background: hsl(var(--background));
}
.dark .ce-popover__container {
  background: hsl(var(--background));
}

.dark .ce-popover--opened>.ce-popover__container {
  border: 1px solid hsl(var(--border));
}

.dark .ce-popover-item-separator__line {
  border: 1px solid hsl(var(--border));
}

.dark .ce-toolbar__plus,
.dark .ce-toolbar__settings-btn,
.dark .ce-popover-item__title,
.dark .ce-inline-tool
.dark .ce-inline-tool--link
.dark .ce-popover-item__icon {
  color: hsl(var(--foreground));
}

.dark .cdx-search-field.ce-popover__search {
  background-color: hsl(var(--muted) / 0.3);
  border-color: hsl(var(--border));
}

.dark .cdx-search-field__input {
  color: hsl(var(--foreground));
}

.dark .cdx-block,
.dark .ce-block {
  color: hsl(var(--foreground));
}

.dark .ce-inline-toolbar,
.dark .ce-conversion-tool__icon,
.dark .ce-popover-item__icon,
.dark .tc-popover__item-icon {
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
}

.dark .ce-popover,
.dark .ce-conversion-toolbar,
.dark .ce-inline-toolbar,
.dark .tc-popover {
  background-color: hsl(var(--popover));
  border-color: hsl(var(--border));
  box-shadow: 0 3px 15px -3px hsl(var(--border) / 0.2);
}

.dark .ce-inline-tool {
  color: hsl(var(--color-text-primary));
}

.dark .ce-inline-tool:hover,
.dark .ce-inline-toolbar__dropdown:hover,
.dark .ce-toolbar__plus:hover,
.dark .ce-toolbar__settings-btn:hover,
.dark .ce-conversion-tool:hover,
.dark .ce-popover-item:hover {
  background-color: hsl(var(--accent) / 0.2);
}

.dark *::selection,
.dark .ce-block.ce-block--selected .ce-block__content {
  background-color: hsl(var(--accent) / 0.2);
}

.dark .ce-popover__items {
  scrollbar-color: hsl(var(--border)) hsl(var(--background));
}

/* table class wrapper */
.dark .tc-wrap,
.dark .tc-wrap * {
  --color-border: hsl(var(--border));
  --color-text-secondary: hsl(var(--foreground));
  --color-background: hsl(var(--accent) / 0.2);
  --toggler-dots-color: hsl(var(--accent) / 0.2);
  --toggler-dots-color-hovered: hsl(var(--foreground));
}

@media (max-width: 650px) {
  .dark .ce-toolbar__settings-btn,
  .dark .ce-toolbar__plus {
    background-color: hsl(var(--popover));
    border-color: hsl(var(--border));
    box-shadow: 0 3px 15px -3px hsl(var(--border) / 0.2);
  }
}

wow, thanks man, i need this