search

hunghg255 / reactjs-tiptap-editor

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for Reactjs
https://reactjs-tiptap-editor.vercel.app/
MIT License
203 stars 37 forks source link

How change dark mode color to Like Black, bg-gray-950 #87

Closed mishraasaurabh closed 3 weeks ago

mishraasaurabh commented 3 weeks ago

i have not found any for change bg-color

hunghg255 commented 3 weeks ago

@mishraasaurabh Screenshot 2024-10-29 at 09 55 17 you can check by inspect element

mishraasaurabh commented 3 weeks ago

I have added custom css style.css

:root { --richtext-bg-color: gray; / Light background / --richtext-border-color: gray; / Light border color / --outline-color :red; }

body.dark { --richtext-bg-color: red; --richtext-border-color: 60, 60, 160; --outline-color :red; }

.richtext-outline{ border-color: white !important; /outline-style: none !important;/ }

.richtext-outline-1{ outline-width: 1px !important; outline-color: hsl(var(--outline-color) / 1) !important;

border: 1px solid hsl(var(--richtext-border-color) / 1) !important;

}

.richtext-bg-background, .reactjs-tiptap-editor { background-color: hsl(var(--richtext-bg-color) / 1) !important; }

can you help me pls to do in dark mode backgroud-color and outline color

when wtich to dark mode in body tag like this

i am using vite react typescript with tailwind css
hunghg255 commented 3 weeks ago

@mishraasaurabh Im using color hls, so you need to set value is hls check this file https://github.com/hunghg255/reactjs-tiptap-editor/blob/ec29cb37a8a10fcf16b9aa4bb231a733ee351ca1/src/styles/global.scss#L5