For example, https://imgur.com/a/ia2GCgg -- top is VSCode, bottom is Zed. Both using Svelte, and using a similar theme.
- Angle brackets are a different color
- Capitalized built-in components are a different color
- Boolean props are a different color
- Brackets are colored differently than text.
The inspector is a game changer, clicking into these specific things in the preview they provide is super helpful.
The theme builder is good and easy to use, and I only needed a few minutes to make my own.
Syntax coloring is almost there, but still lacking (I use C/C++) Small visual adjustment like line height in the UI text is not configurable enough (only two settings)
Scrolling should have a smooth option, nothing prevents it, it should be super easy to add, I find it easier on the eyes when I move around code, especially on a 240Hz monitor.
The editing experience is good, quick launch, no crashes, responsive, not too memory hungry.
The defaults all feel very low contrast, gray on gray that makes the experience feel dull and off putting to me, even if the editor itself is great.
I found one extension from a web search. Did you try this? https://zed.dev/extensions/svelte
But those are syntax highlights. What does this have to do with theming?
I'm not a Zed user, but https://zed.dev/docs/reference/all-settings#colorize-bracket... surely you can configure those.
I usually look for a dark theme that looks good and then make a custom version with darker the background colors and brighter the foreground colors.
Maybe it's time for to start publishing high contrast dark themes instead of just fixing it for myself.
But I understand your point, no reason for it not to come with a couple good high contrast dark themes.
> The page you are trying to reach either does not exist, has been removed or you are not authorized to view it.
1"use client"23import * as React from "react"4import { format, addMinutes, isAfter } from "date-fns"56// Types for our "essential" meeting system7interface Meeting {8 id: string9 title: string10 : boolean'couldHaveBeenAnEmail' is declared but its value is never read.11 attendees: string[]12 snacksProvided: boolean13 : numberType 'string' is not assignable to type 'number'.14}1516type MeetingStatus = "scheduled" | "running-late" | "cancelled" | "eternal"1718function validateMeeting(: string[]): boolean {Consider using 'attendees' instead of 'atendees' for clarity.19 return atendees.length > 0 && atendees.length < 5020}2122let = "Discuss why we need more meetings"'agendaItem' can be declared as 'const' since it is never reassigned.2324const MEETING_EXCUSES = [25 "Sorry, I was on mute",26 "Can everyone see my screen?",27 "Let's take this offline",28 "Per my last email...",29 "I have a hard stop in 5 minutes",30] as const3132/** Props for the world's most essential component */33interface MeetingSchedulerProps {34 defaultDuration?: number35 maxAttendees?: number36 requiresSnacks?: boolean37 onMeetingCreate?: (meeting: Meeting) => void38 onEscapeAttempt?: () => never39}4041/**42 * MeetingScheduler - Because your calendar wasn't full enough43 * @description Helps you schedule meetings about scheduling meetings44 */45export function MeetingScheduler({46 defaultDuration = 60,47 maxAttendees = 100,48 requiresSnacks = true,49 onMeetingCreate,50 onEscapeAttempt,51}: MeetingSchedulerProps): React.ReactElement {52 const [meetings, setMeetings] = React.useState<Meeting[]>([])53 const [excuseIndex, setExcuseIndex] = React.useState(0)54 const [isLoading, setIsLoading] = React.useState<boolean>(false)5556 const formRef = React.useRef<HTMLFormElement>(null)57 const sanityRef = React.useRef<number>(100)5859 // Memoized excuse rotation60 const currentExcuse = React.useMemo(() => {61 return MEETING_EXCUSES[excuseIndex % MEETING_EXCUSES.length]62 }, [excuseIndex])6364 // Effect: Gradually decrease sanity65 React.useEffect(() => {66 const interval = setInterval(() => {67 sanityRef.current = Math.max(0, sanityRef.current - 1)68 if (sanityRef.current === 0) {69 console.warn("Developer sanity depleted")70 }71 }, 60000)7273 return () => clearInterval(interval)74 }, [])7576 // Callback for creating meetings77 const handleCreateMeeting = React.useCallback(78 async (title: string, attendees: string[]) => {79 if (!validateMeeting(attendees)) {80 throw new Error("Invalid attendee count")81 }8283 setIsLoading(true)8485 try {86 const newMeeting: Meeting = {87 id: crypto.randomUUID(),88 title: title || "Meeting about meetings",89 couldHaveBeenAnEmail: true,90 attendees,91 snacksProvided: requiresSnacks,92 actuallyStartsOnTime: "never", // This causes the error93 }9495 setMeetings((prev) => [...prev, newMeeting])96 onMeetingCreate?.(newMeeting)97 setExcuseIndex((i) => i + 1)98 } catch (error) {99 console.error("Failed to create meeting:", error)100 } finally {101 setIsLoading(false)102 }103 },104 [requiresSnacks, onMeetingCreate]105 )106107 // Render the meeting madness108 return (109 <div className="meeting-scheduler p-6 bg-white rounded-lg shadow-xl">110 <header className="mb-4 border-b pb-2">111 <h1 className="text-2xl font-bold text-gray-900">112 📅 Meeting Scheduler Pro™113 </h1>114 <p className="text-sm text-gray-500 italic">115 "{currentExcuse}"116 </p>117 </header>118119 <form120 ref={formRef}121 onSubmit={(e) => {122 e.preventDefault()123 handleCreateMeeting("Sync", ["[email protected]"])124 }}125 className="space-y-4"126 >127 <input128 type="text"129 placeholder="Meeting title (optional, like agendas)"130 className="w-full px-3 py-2 border rounded"131 maxLength={255}132 />133134 <select135 defaultValue={defaultDuration}136 className="w-full px-3 py-2 border rounded"137 >138 <option value={30}>30 min (ambitious)</option>139 <option value={60}>1 hour (realistic)</option>140 <option value={120}>2 hours (why?)</option>141 <option value={480}>All day (send help)</option>142 </select>143144 <button145 type="submit"146 disabled={isLoading}147 className="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"148 >149 {isLoading ? "Syncing calendars..." : "Schedule Meeting"}150 </button>151 </form>152153 {meetings.length > 0 && (154 <ul className="mt-6 divide-y">155 {meetings.map((meeting) => (156 <li key={meeting.id} className="py-3">157 <span className="font-medium">{meeting.title}</span>158 <span className="text-gray-400 ml-2">159 ({meeting.attendees.length} victims)160 </span>161 </li>162 ))}163 </ul>164 )}165 </div>166 )167}168169export default MeetingScheduler