Create Variations of CSS Themes with Cursor's Composer

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 4 months ago
Updated 2 months ago

Cursor's Composer feature lets us input multiple files as context for us to run commands on. In this lesson we'll give Cursor a handful of theme files that we've created to have it create more popular themes for us. You'll see that it generates popular themes such as monokai and solarized-light

[00:00] Open composer with command I. We'll type hash to add some files, and I'm just gonna add in all of these CSS files here. You can see them referenced over on the left. And so once all of those are added, you'll see that they're in context for any prompt you add here. And I'll just dictate based on these files, create 4 more files following the same naming scheme and [00:20] the same CSS variables and base them on popular themes used in IDE's such as Versus Code. So I'll paste my dictation in and once I hit enter here, it's gonna start working on the task I gave it. And you'll see it created monochi, solarized light, 1 dark pro, GitHub light, and these [00:39] files will pop up in here, and you can accept each of these individually. You'll see all of these buttons as I switch through, or in the main Composer tab, you can accept all of them, which I'll just go ahead and do. And this is an in progress feature in ScriptKit for a theme selector based on CSS. And just to see if these are working, I'll kind of go through, see what [00:59] they gave me. So you can see Solarized, One Dark Pro, Monokai, GitHub Lite. And I'll just keep on repeating this process to generate more and more themes.