Skip to content

Conversation

@emir-karabeg
Copy link
Collaborator

Summary

Fixed light mode on note block. Previously, some markdown was hard to see or invisible.

Type of Change

  • Bug fix

Testing

Solo.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link

vercel bot commented Dec 29, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Review Updated (UTC)
docs Skipped Skipped Dec 29, 2025 11:37pm

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Dec 29, 2025

Greptile Summary

Replaced hardcoded hex color values with CSS variables in the NoteMarkdown component to fix light mode visibility issues.

Key changes:

  • Replaced text-[#E5E5E5] (light gray) with text-[var(--text-primary)] for paragraphs, headings, lists, and code blocks
  • Replaced text-white with text-[var(--text-primary)] for bold text
  • Replaced text-[#B8B8B8] with text-[var(--text-tertiary)] for italic text and blockquotes
  • Replaced hardcoded background colors (bg-gray-200, bg-[#1A1A1A]) with bg-[var(--surface-5)] for inline and block code
  • Removed dark: prefix from inline code background since CSS variables automatically adapt to theme

This ensures markdown content is visible in both light and dark modes by using the theme system's CSS variables that adjust based on the active theme.

Confidence Score: 5/5

  • This PR is safe to merge with no risk
  • The changes are purely cosmetic styling updates that replace hardcoded colors with theme-aware CSS variables. The modifications follow established patterns in the codebase, don't alter any logic or behavior, and directly address the stated bug of markdown being hard to see in light mode. No new functionality or edge cases introduced.
  • No files require special attention

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx Replaced hardcoded color values with CSS variables for proper light/dark mode support in markdown rendering

Sequence Diagram

sequenceDiagram
    participant User
    participant NoteBlock
    participant NoteMarkdown
    participant ReactMarkdown
    participant ThemeSystem
    
    User->>NoteBlock: View note in light mode
    NoteBlock->>NoteMarkdown: Render content with markdown
    NoteMarkdown->>ReactMarkdown: Pass custom components with CSS classes
    ReactMarkdown->>ThemeSystem: Apply text-[var(--text-primary)]
    ThemeSystem-->>ReactMarkdown: Resolve to #2d2d2d (light mode)
    ReactMarkdown->>ThemeSystem: Apply bg-[var(--surface-5)]
    ThemeSystem-->>ReactMarkdown: Resolve to #f3f3f3 (light mode)
    ReactMarkdown-->>NoteMarkdown: Render with theme-aware colors
    NoteMarkdown-->>NoteBlock: Display markdown
    NoteBlock-->>User: Show visible text in light mode
Loading

@emir-karabeg emir-karabeg merged commit a08d86d into staging Dec 29, 2025
7 checks passed
@emir-karabeg emir-karabeg deleted the fix/note branch December 29, 2025 23:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants