-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
💡Dark Mode for Editor.JS #1537
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
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! 👋🙌 |
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. |
Here's what I ended up with. Main body background color is .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;
} |
Friendly bump @neSpecc |
@fitterfizzle copy what I posted and change the colors |
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/ |
@neSpecc can you please share the css please. |
Friendly bump good sir @neSpecc |
most probably @neSpecc doesnt want to share @geekyayush |
If it's true, it's really sad. :( |
@neSpecc please do post if you're willing to share the styles, and if yes- please do post the styles as well. |
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;
} |
Dude, who are you? Did god send you to help me (a fellow developer)? Thank you so much. |
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. |
.ce-block--selected .ce-block__content, .ce-inline-tool, ::selection { .cdx-settings-button:hover, .cdx-notify--error { .cdx-notify__cross::after, .dark .ce-inline-toolbar, .dark .ce-inline-tool, .dark ::selection { .dark .cdx-settings-button:hover, .dark .cdx-notify--error { .dark .cdx-notify__cross::after, this is the css for dark and light theme nextjs shadcn |
I was working with the Editor yesterday and I was looking for dark mode, I saw that more people were in the same situation. See the result, bellow: |
Man you´re Hero |
I really tried my best there, please give me feedback on this, i will work on it's padding and hover effect later on
|
@vipertecpro In which file you added this ? in global.css or any custom css file and imported in editor.tsx ? |
Both should work, I did global.
|
If you happen to look for tailwind v4 compatibility with shadcn(test on vue) .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: var(--accent);
background-color: var(--accent);
border-color: var(--popover-foreground);
background: var(--background);
}
.dark .ce-popover__container {
background: var(--popover);
}
.dark .ce-popover--opened>.ce-popover__container {
border: 1px solid var(--border);
}
.dark .ce-popover-item-separator__line {
border: 1px solid 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: var(--foreground);
}
.dark .cdx-search-field.ce-popover__search {
background-color: var(--muted) / 0.3;
border-color: var(--border);
}
.dark .cdx-search-field__input {
color: var(--foreground);
}
.dark .cdx-block,
.dark .ce-block {
color: var(--foreground);
}
.dark .ce-inline-toolbar,
.dark .ce-conversion-tool__icon,
.dark .ce-popover-item__icon,
.dark .tc-popover__item-icon {
color: var(--foreground);
background-color: var(--background);
border-color: var(--border);
}
.dark .ce-popover,
.dark .ce-conversion-toolbar,
.dark .ce-inline-toolbar,
.dark .tc-popover {
background-color: var(--popover);
border-color: var(--border);
box-shadow: 0 3px 15px -3px var(--border) / 0.2;
}
.dark .ce-inline-tool {
color: 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: var(--accent);
}
.dark *::selection,
.dark .ce-block.ce-block--selected .ce-block__content {
background-color: var(--accent) / 0.2;
}
.dark .ce-popover__items {
scrollbar-color: var(--border) var(--background);
}
.ce-popover-item-html {
@apply bg-background transition-colors;
}
.dark .ce-popover-item-html {
@apply bg-popover;
}
.ce-popover-item-html:hover {
@apply bg-muted;
}
.dark .ce-popover-item-html:hover {
@apply bg-muted/30;
}
.ce-inline-tool {
@apply text-foreground transition-colors;
}
.dark .ce-inline-tool {
@apply text-foreground;
}
.ce-inline-tool--active {
@apply bg-accent text-accent-foreground;
}
.dark .ce-inline-tool--active {
@apply bg-accent text-accent-foreground;
}
.dark .ce-inline-tool-input,
.dark .ce-inline-tool-input--showed {
@apply bg-popover text-popover-foreground;
}
/* table class wrapper */
.dark .tc-wrap,
.dark .tc-wrap * {
--color-border: var(--border);
--color-text-secondary: var(--foreground);
--color-background: var(--accent) / 0.2;
--toggler-dots-color: var(--accent) / 0.2;
--toggler-dots-color-hovered: var(--foreground);
}
@media (max-width: 650px) {
.dark .ce-toolbar__settings-btn,
.dark .ce-toolbar__plus {
background-color: var(--popover);
border-color: var(--border);
box-shadow: 0 3px 15px -3px var(--border) / 0.2;
}
} |
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.
We can decide the colors as we move ahead.
The text was updated successfully, but these errors were encountered: