[Bug] Incompatibility between AnuPpuccin Theme and Excalidraw Mode: Zoom Button Background Issue

[swtsang]

Describe the bug

Currently, when using the AnuPpuccin dark theme in conjunction with the light mode of Excalidraw plugin, the text color of the zoom button becomes challenging to read. This issue arises from an inconsistency between the color schemes of the zoom button and the chosen theme/mode combination.

To Reproduce

Steps to reproduce the behavior:

1. Apply AnuPpuccin dark theme.
2. Enable Excalidraw light mode.

Current Behavior

The zoom button background adheres to the AnuPpuccin Theme regardless of the Excalidraw mode. Consequently, a mismatch between the AnuPpuccin dark theme and Excalidraw's light mode causes difficulty in reading the zoom button's text color.

Fig. 1: AnuPpuccin Theme (Dark) x Excalidraw Mode (Light)

Expected behavior

The anticipated behavior is for the zoom button's word color and background to seamlessly adapt to the chosen light/dark mode of Excalidraw.

Fig. 2: Default Theme (Dark) x Excalidraw Mode (Light)

Problem Analysis

The following table illustrates the observed discrepancies between theme, mode, zoom button word color, zoom button background, and the resulting appearance of the zoom button:

AnuPpuccin Theme	Excalidraw Mode	Zoom Button Word Color	Zoom Button Background	Zoom Button Visibility
Dark	Dark	BBBBBB	181926 (Expected: 050505ED)	Dark BG with Light Word
Light	Light	383838	DBDBDC (Expected: FAFAFAED)	Light BG with Dark Word
Dark	Light	383838	181926❌ (Expected: FAFAFAED)	Dark BG with Dark Word (hard to read)❌
Light	Dark	BBBBBB	DBDBDC❌ (Expected: 050505ED)	Light BG with Light Word (hard to read)❌

Additional context

This issue may extend to other combinations of themes and modes, warranting a comprehensive assessment of the theme's compatibility with Excalidraw. Further investigation has revealed subtle variations in the zoom button background color even within the same theme/mode pairing (e.g., Dark x Dark or Light x Light) when compared to other themes (e.g. Default).

Proposed Solution

The color of the Zoom Button Background is suggested to align with the selected Excalidraw mode, thereby superseding any potential interference from the AnuPpuccin Theme.

Thank you

I've noticed an issue here, but my knowledge of CSS is limited, so I can't precisely identify the code that's causing the zoom button to misbehave. A big thank you in advance for helping to fix the issue with the background color of the Zoom Button.

Also, a huge shout-out to AnubisNekhet for creating this amazing theme.

[swtsang]

Upon further investigation, it appears I've identified a likely cause and a potential solution.

Likely Cause

In Obsidian-Excalidraw plugin #923, there's a similar compatibility issue between the Minimal theme and the Excalidraw Plugin. The problem arose when the theme style setting potentially overrode specific Excalidraw CSS variables.

Potential Solution

However, unlike the situation with the Minimal theme, this issue is confined to the Zoom button. There's no need to completely eliminate Excalidraw support from the AnuPpuccin Theme. It seems that by commenting out the following CSS code, we could potentially resolve the problem:

https://github.com/AnubisNekhet/AnuPpuccin/blob/5a1e7738d669de6d42f436bcd524614f24983bcf/theme.css#L7557-L7563

Given my uncertainty about how this CSS change might affect other elements, I'd appreciate the AnuPpuccin Theme maintainer's help in implementing this fix. Hopefully, this method could tackle the main problem and sort out the issue.

[AnubisNekhet]

Hi there, I'm really, really sorry for the late response! It seems that excalidraw has changed its classes and I might need to change the corresponding CSS to comply with the changes. Thank you for pointing it out, I'll get to it as soon as possible!

[AnubisNekhet]

Temporarily suspending support for excalidraw due to rapidly changing styling.