1
0
Fork 0

feat(shared): Better theme support in Dot

This commit is contained in:
Joost De Cock 2022-05-20 16:27:51 +02:00
parent 108d83b834
commit 29fe78843f
4 changed files with 17 additions and 9 deletions

View file

@ -36,6 +36,12 @@ const noBlack = orig => {
if (orig.getAttribute('stroke') === '#000000') {
orig.setAttribute('stroke', 'currentColor')
}
if (orig.getAttribute('fill') === '#000000') {
orig.setAttribute('fill', 'currentColor')
}
if (orig.getAttribute('color') === '#000000') {
orig.setAttribute('color', 'currentColor')
}
return orig
}
@ -76,8 +82,8 @@ const coarse = (svg, options) => {
const rc = rough.svg(svg, options || {})
// Replace shapes
const children = svg.querySelectorAll('circle, rect, ellipse, line, polygon, polyline, path')
for(let i = 0; i < children.length; i += 1) {
const original = noBlack(children[i]);
const params = [];
@ -125,6 +131,11 @@ const coarse = (svg, options) => {
original.replaceWith(replacement);
}
// Replace text color
const text = svg.querySelectorAll('text')
for(let i = 0; i < text.length; i += 1) noBlack(text[i])
}
export default coarse

View file

@ -59,10 +59,9 @@ const Dot = props => {
// Strip width/height so it's responsive
svgRef.current.children[0].attributes.width.value = ""
svgRef.current.children[0].attributes.height.value = ""
// Set style for theme support
svgRef.current.children[0].setAttribute('stroke', "currentColor")
// Add class for specific styling
svgRef.current.children[0].setAttribute('class', "no-fs")
})
}, [dot])
return (
@ -80,7 +79,7 @@ const Dot = props => {
ref={svgRef}
onClick={() => setZoom(!zoom)}
className={zoom
? 'svg-zoom non-fs-svg'
? 'svg-zoom non-fs-svg text-base-content'
: "dot shadow p-2 rounded -mt-8 hover:cursor-zoom-in text-base-content non-fs-svg"
}
dangerouslySetInnerHTML={{__html: svg}}