zsviczian
commented
2 months ago yes, that is a known issue with dark mode. I don't have a solution for you. sorry.
Closed SandmansDreams closed 2 months ago
zsviczian
commented
2 months ago yes, that is a known issue with dark mode. I don't have a solution for you. sorry.
SandmansDreams
commented
2 months ago yes, that is a known issue with dark mode. I don't have a solution for you. sorry.
Dang, sorry for the repeat bug report then. Didn't see it anywhere. That is a very strange bug to not have a way to fix. Wild lmao.
zsviczian
commented
2 months ago Here's what ChatGPT has to say on the topic. If you know a solution, please...
The issue you're encountering is that CSS filter properties like invert and hue-rotate affect the element itself (in this case, the color input field) but do not propagate to the native color picker popup that the browser renders. The appearance of the color picker is controlled by the browser and cannot be styled with CSS.
Unfortunately, there isn't a direct way to apply CSS styles, including filters, to the color picker popup itself. The popup is a part of the browser's native UI and is not part of the HTML document, so it isn't accessible for styling with CSS.
Custom Color Picker: You can implement a custom color picker using a JavaScript library. Libraries like Pickr or Spectrum allow you to fully customize the color picker UI and apply any CSS styles you like.
JavaScript to Synchronize Value: Another approach is to use JavaScript to synchronize the value of a hidden color input field with a visible, styled element that mimics the behavior of a color picker. This gives you more control over the appearance while still using the native color picker for the actual selection.
<input type="color" id="colorPicker" value="#1e1e1e" style="display:none;">
<div id="customColor" style="width: 30px; height: 30px; background-color: #1e1e1e; margin: auto -0.625rem auto 4px; filter: invert(93%) hue-rotate(180deg);"></div>
<script>
const colorPicker = document.getElementById('colorPicker');
const customColor = document.getElementById('customColor');
customColor.addEventListener('click', () => {
colorPicker.click();
});
colorPicker.addEventListener('input', () => {
customColor.style.backgroundColor = colorPicker.value;
});
</script>This code hides the native color input, shows a styled div instead, and syncs the selected color back to the div. However, note that the color picker's UI won't be affected by any styling, only the appearance of the div.
Browser-Specific Solutions: If you're targeting a specific browser or set of browsers, there might be browser-specific APIs or solutions available, but these are typically non-standard and not recommended for production code due to cross-browser compatibility concerns.
In summary, to fully control the appearance, including filters, consider implementing or using a custom color picker.
SandmansDreams
commented
2 months ago Lmao I was also looking to ChatGPT for answers. I wish I was more educated on scripting in order to actually take a look at the code but I have an idea or two. It seems like something about how the colors are being inverted creates this issue. The spherical color picker option is accurate, but the square color preview and the actual element itself seems to be inaccurate. Is there a portion of the code where the inversion takes place between those two steps? Thats where I imagine the color issue would lie. Seems like an interpretation issue (but again I am uninformed). Looking at the invert color.md it looks like the same problem lies there (although I don't know what that would be). My question is why even invert the colors at all? Why not just keep whatever colors the user already had and then if they need to adjust they can do so accordingly? Maybe people are switching between dark and light mode frequently? I cant imagine that is the case.
zsviczian
commented
2 months ago There is not much I can / want to do about how colors are inverted. That comes from the Excalidraw component and would have too many knock-on effects that I would need to change and then keep track of all those changes. Out of the question.
I dislike and practically never use dark mode in Excalidraw due to its very poor color accuracy. If I need a dark background I draw on a dark canvas. I have my custom color palette so that is ok for me. You can raise an issue about colors with Excalidraw.com - but I doubt anything will be done, especially, because the additional color picker you find in Obsidian is not implemented on Excalidraw.com.
This is my solution to invert colors in a more accurate way: https://youtu.be/fypDth_-8q0
It results in much better color accuracy, the only issue is it does not invert the colors of embedded images...
SandmansDreams
commented
2 months ago This is my solution to invert colors in a more accurate way: https://youtu.be/fypDth_-8q0
Oh okay sick this will work! Now I just have to figure out how to open that menu lol. Thanks!
zsviczian
commented
2 months ago yeah, (un)fortunately menus and features have since evolved/changed. You can find the script store button here:
Eusorph
commented
2 months ago I've had the same issue. I resolved by switching to light theme, then selecting the same background color as my obsidian vault. That way I have a "faux" dark theme inside of Exalidraw with colors that work normally.
Describe the bug When selecting a color for text using the gradient color selector (the custom color circle icon), its no longer working as expected. When I go bottom right, the color turn white when it should be black. When I go top left, the color turns black when it should be white. There also seem to be some weird color mixing issues as the color that is hovered over in the gradient is not the color the text becomes. The text had 100% opacity. Additionally, the color shown in the color square at the right of the main side UI is not the same color as the one being selected. Eureka! I was doing some testing in a sandbox vault and found out this only happens in dark mode and not in light mode. Must be some color conversion that happens when dark mode is turned on. Good luck finding the error! Love the plugin.
Steps to reproduce the behavior:
Expected behavior The color of the text should be accurate to the color selected as it was in previous versions.
Additional context Only happens in dark mode