💡Dark Mode for Editor.JS #1537

KShivendu · 2021-02-16T17:52:04Z

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.
Describe the solution you'd like.

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

We can decide the colors as we move ahead.

The text was updated successfully, but these errors were encountered:

mrspence · 2021-02-16T18:30:06Z

This would be a fantastic addition to this issue from November - #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 · 2021-02-16T21:01:59Z

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

KShivendu · 2021-02-17T03:52:57Z

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 · 2021-09-02T21:32:08Z

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 · 2022-11-25T10:40:37Z

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

Could you please share your CSS?

fitterfizzle · 2022-11-30T08:06:47Z

Friendly bump @neSpecc

Eonasdan · 2022-11-30T13:30:45Z

@fitterfizzle copy what I posted and change the colors

fitterfizzle · 2022-11-30T14:35:28Z

    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 · 2022-11-30T15:18:34Z

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 · 2023-04-21T15:02:48Z

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

Can share these styles with us?

MussaratAziz · 2023-09-26T16:35:14Z

@neSpecc can you please share the css please.

geekyayush · 2023-10-11T11:50:00Z

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

MussaratAziz · 2023-10-11T23:06:19Z

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 · 2023-10-12T00:28:21Z

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 · 2023-11-13T13:33:32Z

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

anuragrao04 · 2023-11-13T14:43:22Z

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 · 2023-11-13T20:42:15Z

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 · 2023-11-23T17:10:59Z

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 · 2024-02-02T11:43:19Z

.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: #0000;
color: inherit;
}

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

::selection {
background: #000;
}

.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: #aaaaaa;
color: inherit;
}

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

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

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

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

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

.dark .cdx-settings-button:hover,
.dark .ce-settings__button:hover,
.dark .ce-toolbox__button--active,
.dark .ce-toolbox__button:hover,
.dark .cdx-button:hover,
.dark .ce-inline-toolbar__dropdown:hover,
.dark .ce-inline-tool:hover,
.dark .ce-popover__item:hover,
.dark .ce-toolbar__settings-btn:hover {
background-color: #4d4d4d;
color: #fff;
}

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

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

this is the css for dark and light theme nextjs shadcn

Miguel-Domingos · 2024-05-03T09:45:19Z

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 · 2024-05-03T12:04:37Z

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

KShivendu added the feature label Feb 16, 2021

neSpecc removed the feature label Jan 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

💡Dark Mode for Editor.JS #1537

💡Dark Mode for Editor.JS #1537

KShivendu commented Feb 16, 2021

mrspence commented Feb 16, 2021

neSpecc commented Feb 16, 2021

KShivendu commented Feb 17, 2021

Eonasdan commented Sep 2, 2021 •

edited

Loading

fitterfizzle commented Nov 25, 2022

fitterfizzle commented Nov 30, 2022

Eonasdan commented Nov 30, 2022

fitterfizzle commented Nov 30, 2022

Eonasdan commented Nov 30, 2022

homocodian commented Apr 21, 2023

MussaratAziz commented Sep 26, 2023

geekyayush commented Oct 11, 2023

MussaratAziz commented Oct 11, 2023

geekyayush commented Oct 12, 2023

anuragrao04 commented Nov 13, 2023

anuragrao04 commented Nov 13, 2023

geekyayush commented Nov 13, 2023

neSpecc commented Nov 23, 2023

longvo00221 commented Feb 2, 2024

Miguel-Domingos commented May 3, 2024

manuelcunga commented May 3, 2024

💡Dark Mode for Editor.JS #1537

💡Dark Mode for Editor.JS #1537

Comments

KShivendu commented Feb 16, 2021

mrspence commented Feb 16, 2021

neSpecc commented Feb 16, 2021

KShivendu commented Feb 17, 2021

Eonasdan commented Sep 2, 2021 • edited Loading

fitterfizzle commented Nov 25, 2022

fitterfizzle commented Nov 30, 2022

Eonasdan commented Nov 30, 2022

fitterfizzle commented Nov 30, 2022

Eonasdan commented Nov 30, 2022

homocodian commented Apr 21, 2023

MussaratAziz commented Sep 26, 2023

geekyayush commented Oct 11, 2023

MussaratAziz commented Oct 11, 2023

geekyayush commented Oct 12, 2023

anuragrao04 commented Nov 13, 2023

anuragrao04 commented Nov 13, 2023

geekyayush commented Nov 13, 2023

neSpecc commented Nov 23, 2023

longvo00221 commented Feb 2, 2024

Miguel-Domingos commented May 3, 2024

manuelcunga commented May 3, 2024

Eonasdan commented Sep 2, 2021 •

edited

Loading