[Bug] manual-*.css variables are overridden due to markdown.scss re-importing base themes after globals.css #15953

Closed
opened 2026-02-21 19:24:06 -05:00 by yindo · 3 comments
Owner

Originally created by @tomorrowthief on GitHub (Aug 6, 2025).

Originally assigned to: @tomorrowthief on GitHub.

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :)
  • Please do not modify this template :) and fill in all the required fields.

Dify version

1.7.1

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

In our theming system, we include both system-generated theme files (light.css, dark.css) and manual overrides (manual-light.css, manual-dark.css). However, if a variable is defined in both the manual files and the system-generated files, the variable from the manual file does not take effect — it gets overridden by the system's variable.

  1. /web/app/layout.tsx
    In our layout file, we import the global and markdown styles like this:
Image
  1. in /web/app/styles/globals.css imports the following in correct order:
Image
  1. However in /web/app/styles/markdown.scss uses:
Image

This causes variables defined in manual-light.css / manual-dark.css to be overridden, because the Sass @used modules emit new :root { --var } declarations after globals.css has already set the correct values.

✔️ Expected Behavior

Manual theme overrides should take precedence over system defaults.

Actual Behavior

manual-*.css variables are overridden due to markdown.scss re-importing base themes after globals.css

Originally created by @tomorrowthief on GitHub (Aug 6, 2025). Originally assigned to: @tomorrowthief on GitHub. ### Self Checks - [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542). - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report, otherwise it will be closed. - [x] 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :) - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 1.7.1 ### Cloud or Self Hosted Self Hosted (Source) ### Steps to reproduce In our theming system, we include both system-generated theme files (light.css, dark.css) and manual overrides (manual-light.css, manual-dark.css). However, if a variable is defined in both the manual files and the system-generated files, the variable from the manual file does not take effect — it gets overridden by the system's variable. 1. [/web/app/layout.tsx](https://github.com/langgenius/dify/blob/main/web/app/layout.tsx#L9) In our layout file, we import the global and markdown styles like this: <img width="388" height="56" alt="Image" src="https://github.com/user-attachments/assets/95d62de7-cc50-407e-873d-aadf17af3458" /> 2. in [/web/app/styles/globals.css](https://github.com/langgenius/dify/blob/85f33fb73d154c5b8312dd06785baceb4d85b4ef/web/app/styles/globals.css#L5) imports the following in correct order: <img width="490" height="127" alt="Image" src="https://github.com/user-attachments/assets/6d6c7342-8639-4861-ab0b-3d9b5504ad0a" /> 3. However in [/web/app/styles/markdown.scss](https://github.com/langgenius/dify/blob/85f33fb73d154c5b8312dd06785baceb4d85b4ef/web/app/styles/markdown.scss#L1) uses: <img width="547" height="139" alt="Image" src="https://github.com/user-attachments/assets/2727b8fe-b7c7-4e64-9488-ece795386c36" /> This causes variables defined in manual-light.css / manual-dark.css to be overridden, because the Sass @used modules emit new :root { --var } declarations after globals.css has already set the correct values. ### ✔️ Expected Behavior Manual theme overrides should take precedence over system defaults. ### ❌ Actual Behavior manual-*.css variables are overridden due to markdown.scss re-importing base themes after globals.css
yindo added the 🐞 bug label 2026-02-21 19:24:06 -05:00
yindo closed this issue 2026-02-21 19:24:06 -05:00
Author
Owner

@tomorrowthief commented on GitHub (Aug 6, 2025):

https://chatgpt.com/s/t_68941afacff481918a094bb50d94651e

@tomorrowthief commented on GitHub (Aug 6, 2025): https://chatgpt.com/s/t_68941afacff481918a094bb50d94651e
Author
Owner

@tomorrowthief commented on GitHub (Aug 6, 2025):

I can submit a PR to fix this issue soon.

@tomorrowthief commented on GitHub (Aug 6, 2025): I can submit a PR to fix this issue soon.
Author
Owner

@crazywoola commented on GitHub (Aug 6, 2025):

I will assign it to you then :)

@crazywoola commented on GitHub (Aug 6, 2025): I will assign it to you then :)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#15953