style(media_edit): improve markdown editor appearance

[PascalRepond]

• Updated EasyMDE CSS to correspond with the site's theme.

[coderabbitai]

📝 Walkthrough

Walkthrough

These changes implement EasyMDE editor styling with DaisyUI theme support by adding CSS styling, updating the static file discovery mechanism in settings, modifying theme attribute handling in JavaScript, and introducing CSS injection blocks in templates.

Changes

Cohort / File(s)	Summary
Static files configuration src/config/settings.py	Removed explicit BASE_DIR / "theme" / "static" from STATICFILES_DIRS, relying instead on automatic app discovery since "theme" is in INSTALLED_APPS.
EasyMDE styling src/static/css/easymde.css	New CSS file with EasyMDE styling for DaisyUI theme compatibility. Includes CodeMirror formatting for quotes, links, URLs, and strings; dark-theme overrides for forest theme (selection, cursor, toolbar, fullscreen modes); uses CSS variables and color-mix for adaptive theming.
Theme mechanism updates src/static/js/base.js	Replaced value attribute with data-theme attribute on html element when applying non-default themes; removes data-theme for default theme.
Template CSS injection blocks src/templates/base.html, src/templates/media_edit.html	Added extra_css block in base template head for page-specific CSS. media_edit.html injects link to easymde.css via this new block.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly describes the main change: improving markdown editor appearance, which aligns with the EasyMDE CSS styling additions across multiple files.
Description check	✅ Passed	The description is concise and directly related to the changeset, accurately summarizing the primary purpose of updating EasyMDE CSS for theme alignment.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b8a74dd and d3bf9eb.

📒 Files selected for processing (5)

• src/config/settings.py
• src/static/css/easymde.css
• src/static/js/base.js
• src/templates/base.html
• src/templates/media_edit.html

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-12-26T15:18:46.932Z

Learnt from: PascalRepond
Repo: PascalRepond/datakult PR: 21
File: src/templates/accounts/profile_edit.html:23-58
Timestamp: 2025-12-26T15:18:46.932Z
Learning: In Django projects, attributes added to a form field's widget via field.widget.attrs.update(...) in the form's __init__ are rendered when using {{ form.field }} in templates. No explicit attribute definitions are needed in the template. This applies to templates under src/templates in Django apps; ensure you update attrs in __init__ for consistent HTMX behavior.

Applied to files:

• src/templates/media_edit.html
• src/templates/base.html

🔇 Additional comments (7)

src/static/js/base.js (1)

6-14: LGTM! Correct DaisyUI theme attribute usage.

The change from using a value attribute to data-theme attribute correctly aligns with DaisyUI's theming mechanism. The logic properly removes the attribute for the default theme and sets it for custom themes.

src/config/settings.py (1)

157-160: LGTM! Proper use of Django's app-based static file discovery.

The removal of the explicit theme/static path is correct since Django automatically discovers static files from apps listed in INSTALLED_APPS. The comment clearly explains this behavior.

src/static/css/easymde.css (3)

1-24: Verify color-mix browser support for your target browsers.

The CSS uses the color-mix() function (lines 6, 10, 18) for creating semi-transparent colors. While this is modern and elegant, color-mix() is supported in major browsers from 2023 onwards (Chrome 111+, Firefox 113+, Safari 16.2+).

If you need to support older browsers, consider using traditional rgba() or hsla() color values instead.<!-- [scratchpad_start]
[task review_file_3/5 continue]

[observations from web search]

• color-mix() is well established and works across many devices since May 2023
• color-mix() currently has support in about 92% of browsers globally
• Browser support is now widespread as of 2026

[analysis]

• Based on the web search results, color-mix() is well-supported in 2026
• The feature has been available since May 2023 across major browsers
• My initial concern about browser support is no longer valid
• The CSS implementation is appropriate for modern browsers

[actions]

• Update the review comment to reflect that color-mix() is now well-supported
• Approve the CSS implementation

[scratchpad_end] -->

---

1-24: LGTM! color-mix() is well-supported in modern browsers.

The CSS uses the color-mix() function for creating semi-transparent colors. This feature is well established and works across many devices and browser versions since May 2023, and currently has support in about 92% of browsers globally. The implementation is appropriate for modern web applications.

---

25-64: LGTM! Forest theme overrides are well-structured.

The dark theme styling for the forest theme is comprehensive and properly scoped using the [data-theme="forest"] selector, which aligns with the JavaScript theming implementation. The styling covers all necessary editor components including selection, cursor, toolbar, buttons, and fullscreen mode.

src/templates/base.html (1)

21-21: LGTM! Standard Django template extensibility pattern.

The addition of the extra_css block in the head section follows Django best practices for template inheritance, allowing child templates to inject page-specific CSS. The placement after tailwind_css and htmx_script is appropriate.

src/templates/media_edit.html (1)

11-13: LGTM! Proper usage of the extra_css block.

The template correctly extends the extra_css block from base.html and uses Django's {% static %} tag to load the EasyMDE stylesheet. The implementation is clean and follows Django template conventions.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}