Skip to content
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

Editor: Fix background-color in dark mode themes #13787

Closed
wants to merge 6 commits into from

Conversation

SoyDiego
Copy link
Contributor

@SoyDiego SoyDiego commented Sep 30, 2023

Fix #13786

The solution of this issue, you can find in primeng-sass-theme project primefaces/primeng-sass-theme#55. Here I only compiled all the scss of the project in all the themes and the only line that was changed for the compilation in all the files is:

.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options adding only !important in background-color property.

I added the !important because the styles were being taken by Quill Editor and I cannot remove the line of that file because is imported from node_modules in PrimeNG project:

image

If something is not OK or exists a better way, let me know and I can change it :)

CURRENTLY

problem editor PRIMENG

AFTER SOLUTION

fix editor PRIMENG

@vercel
Copy link

vercel bot commented Sep 30, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
primeng-ssr-test ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 9, 2023 3:18pm
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
primeng ⬜️ Ignored (Inspect) Visit Preview Oct 9, 2023 3:18pm

@SoyDiego SoyDiego changed the title Compiled scss from primeng-sass-theme Editor: Fix background-color in dark mode themes Sep 30, 2023
@vercel vercel bot temporarily deployed to Preview – primeng-ssr-test September 30, 2023 15:23 Inactive
@vercel vercel bot temporarily deployed to Preview – primeng-ssr-test October 6, 2023 18:22 Inactive
# Conflicts:
#	src/assets/components/themes/arya-blue/theme.css
#	src/assets/components/themes/arya-green/theme.css
#	src/assets/components/themes/arya-orange/theme.css
#	src/assets/components/themes/arya-purple/theme.css
#	src/assets/components/themes/bootstrap4-dark-blue/theme.css
#	src/assets/components/themes/bootstrap4-dark-purple/theme.css
#	src/assets/components/themes/bootstrap4-light-blue/theme.css
#	src/assets/components/themes/bootstrap4-light-purple/theme.css
#	src/assets/components/themes/fluent-light/theme.css
#	src/assets/components/themes/lara-dark-blue/theme.css
#	src/assets/components/themes/lara-dark-indigo/theme.css
#	src/assets/components/themes/lara-dark-purple/theme.css
#	src/assets/components/themes/lara-dark-teal/theme.css
#	src/assets/components/themes/lara-light-blue/theme.css
#	src/assets/components/themes/lara-light-indigo/theme.css
#	src/assets/components/themes/lara-light-purple/theme.css
#	src/assets/components/themes/lara-light-teal/theme.css
#	src/assets/components/themes/luna-amber/theme.css
#	src/assets/components/themes/luna-blue/theme.css
#	src/assets/components/themes/luna-green/theme.css
#	src/assets/components/themes/luna-pink/theme.css
#	src/assets/components/themes/md-dark-deeppurple/theme.css
#	src/assets/components/themes/md-dark-indigo/theme.css
#	src/assets/components/themes/md-light-deeppurple/theme.css
#	src/assets/components/themes/md-light-indigo/theme.css
#	src/assets/components/themes/mdc-dark-deeppurple/theme.css
#	src/assets/components/themes/mdc-dark-indigo/theme.css
#	src/assets/components/themes/mdc-light-deeppurple/theme.css
#	src/assets/components/themes/mdc-light-indigo/theme.css
#	src/assets/components/themes/mira/theme.css
#	src/assets/components/themes/nano/theme.css
#	src/assets/components/themes/nova-accent/theme.css
#	src/assets/components/themes/nova-alt/theme.css
#	src/assets/components/themes/nova/theme.css
#	src/assets/components/themes/rhea/theme.css
#	src/assets/components/themes/saga-blue/theme.css
#	src/assets/components/themes/saga-green/theme.css
#	src/assets/components/themes/saga-orange/theme.css
#	src/assets/components/themes/saga-purple/theme.css
#	src/assets/components/themes/soho-dark/theme.css
#	src/assets/components/themes/soho-light/theme.css
#	src/assets/components/themes/tailwind-light/theme.css
#	src/assets/components/themes/vela-blue/theme.css
#	src/assets/components/themes/vela-green/theme.css
#	src/assets/components/themes/vela-orange/theme.css
#	src/assets/components/themes/vela-purple/theme.css
#	src/assets/components/themes/viva-dark/theme.css
#	src/assets/components/themes/viva-light/theme.css
@vercel vercel bot temporarily deployed to Preview – primeng-ssr-test October 9, 2023 11:43 Inactive
# Conflicts:
#	src/assets/components/themes/arya-blue/theme.css
#	src/assets/components/themes/arya-green/theme.css
@vercel vercel bot temporarily deployed to Preview – primeng-ssr-test October 9, 2023 14:46 Inactive
@vercel vercel bot temporarily deployed to Preview – primeng-ssr-test October 9, 2023 15:18 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Editor: Dark themes are broken
2 participants