Visual Editor

VS Code Theme Builder

Craft a custom editor theme and export it as a VS Code extension

§ 01 — Name001 / 003

Theme Name

Installs asmy-custom-theme· default

§ 02 — Editor002 / 003

Live Preview

Editor.tsx — project

Explorer

▾PROJECT

▸src

▸components

·Editor.tsx

·Preview.tsx

·ColorField.tsx

▸lib

·presets.ts

·utils.ts

▸types

·theme.ts

▸app

·page.tsx

·layout.tsx

TSEditor.tsx×

TSPreview.tsx×

MDREADME.md×

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import { useState, useEffect } from 'react';

import type { FC } from 'react';

interface Props {

theme: ThemeColors;

onUpdate: (key: string, val: string) => void;

}

const Editor: FC<Props> = ({ theme }) => {

const [open, setOpen] = useState(false);

// apply colors from theme state

useEffect(() => {

document.title = 'Theme Builder';

}, []);

return (

<div className="editor">

<Preview theme={theme} />

</div>

);

};

TerminalProblemsOutput

~/project $ npm run dev

▶ next dev

- ready on http://localhost:3000

⎇ main✓ 0⚠ 0

TypeScriptUTF-8Ln 10, Col 28