Dracula Theme - Color Issue
Description: Encountered an issue with the Dracula theme on our Discourse site. The theme’s appearance differs from its expected look, particularly in color schemes and tab appearances. Initially, the theme displayed differently on my test site compared to other sites using Dracula. After reinstalling from the GitHub repository, the appearance aligned, suggesting a potential issue with outdated code or variable usage.
Reproduction Steps:
- Installed the Dracula theme via Admin → Customize → Themes.
- Set it as the default theme.
- Disabled other themes and color scheme options for users under Admin → Customize.
- Confirmed in my profile (Preferences → Interface) that Dracula was the only selectable theme, ensuring I viewed it in its default setup.
- Noted differences in the appearance, especially the tabs, which didn’t look as expected (indicating a potential issue with the theme).
Screenshots:
Platform:
- Mac (Desktop)
Browser:
- Chrome
Additional Comments: The issue appears to stem from the use of outdated CSS variables in the theme. The current syntax in the Dracula theme ($primary, $tertiary, $secondary) is obsolete compared to the newer variable format (var(–tertiary), var(–secondary)) used in recent Discourse themes, as seen in this GitHub example. This old variable usage likely causes the unusual rendering, especially when no alternative theme or color scheme is selectable. The problem remained even after a theme reinstallation, indicating a deeper issue within the theme’s code structure.