style: fix Raw JSON visibility in dark mode

[MrJarnould]

Description

Fixed an issue where the "Raw JSON" query output was effectively invisible in Dark Mode because it lacked specific styling and inherited a dark text color from the base theme.

Changes

• Modified static/dark.css to explicitly set pre and code tags to a light color (#e9ebf0) in the dark theme.

Verification

• Verified on a local development server (npm run serve) connected to a testing server (aw-server --testing).
• Confirmed that Raw JSON output is now clearly readable against the dark background.

---

Important

Fixes dark mode visibility issue for 'Raw JSON' by setting light text color for pre and code in static/dark.css.

• Styling:
  • Modified static/dark.css to set pre and code tags to color #e9ebf0 for better visibility in dark mode.
• Verification:
  • Tested on local server with npm run serve and confirmed readability of Raw JSON output.

^{This description was created by for 1541e26. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 1541e26 in 22 seconds. Click for details.

• Reviewed 13 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 1 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. static/dark.css:11

• Draft comment:
  Good fix: including pre and code ensures that Raw JSON in dark mode gets a light text color. Verify this doesn't unintentionally override other code styling if needed.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

Workflow ID: wflow_GOz09JqP2csx2k5B

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[greptile-apps]

Greptile Summary

This PR fixes a dark mode visibility issue where Raw JSON output displayed in pre tags was virtually invisible due to inheriting dark text color. The fix adds pre and code elements to the existing CSS rule that sets light text color (#e9ebf0) for basic elements in the dark theme.

The change is minimal, surgical, and follows the existing pattern in static/dark.css where other elements like body, button, html, and table already receive the same light text color treatment. The Raw JSON view uses a <pre> tag in SelectableEventView.vue:18 to display event data, which now properly inherits the light text color.

Confidence Score: 5/5

• This PR is safe to merge with no risk
• The change is a simple CSS addition that fixes a genuine visibility bug. It adds pre and code to an existing color rule, following the established pattern. The !important flag is already used consistently throughout the dark theme stylesheet, and the change is scoped to dark mode only. No logic changes, no security implications, and the fix directly addresses the reported issue.
• No files require special attention

Important Files Changed

Filename	Overview
static/dark.css	Added light text color to pre and code elements for dark mode visibility

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant App.vue
    participant Theme Settings
    participant dark.css
    participant SelectableEventView

    User->>Theme Settings: Enable dark mode
    Theme Settings->>Browser: Create link element
    Browser->>dark.css: Load /dark.css
    dark.css->>Browser: Apply dark theme styles
    Note over dark.css: Sets pre, code { color: #e9ebf0 !important }
    User->>SelectableEventView: Select "Raw JSON" view
    SelectableEventView->>Browser: Render <pre> with events data
    Browser->>Browser: Apply color from dark.css rule
    Browser->>User: Display light text on dark background

Loading

[greptile-apps]

Greptile found no issues!

From now on, if a review finishes and we haven't found any issues, we will not post anything, but you can confirm that we reviewed your changes in the status check section.

_{This feature can be toggled off in your Code Review Settings by deselecting "Create a status check for each PR".}

[ErikBjare]

Thanks!

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 26.30%. Comparing base (6e3c4d8) to head (1541e26).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #736   +/-   ##
=======================================
  Coverage   26.30%   26.30%           
=======================================
  Files          29       29           
  Lines        1684     1684           
  Branches      288      301   +13     
=======================================
  Hits          443      443           
  Misses       1219     1219           
  Partials       22       22           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.