Zenn
🎨

Svelteサイトの埋め込みエディタを自分好みにカスタマイズしてみた

2022/03/26に公開
CSS
デザイン
Svelte
#
stylish
tech

概要

タイトル通りなのですが、https://svelte.dev/ の埋め込みのエディタを自分好みにカスタマイズしてみました。

なんで？
SvelteのReplが非常に便利でSvelteのコードを共有する際にはとても頻繁に使われている様でした。ただ個人的に普段黒色ベースのエディタを使っているので、どうも明るめのエディタに馴染めなかったので変えてみました。

Before

img

After

img

img

変え方

ブラウザ上のCSSの変更

これは皆さんお馴染みかと思いますがStylishのChome拡張を使いました。

変更内容

SvelteのReplは内部でCodeMirrorと呼ばれるライブラリを使用しています。

そしてhttps://github.com/sveltejs/sites/blob/9dca3c11a6/packages/repl/src/lib/theme.css でテーマを書いていたので、これをStylishで下記の様に書き換えました。

.cm-s-svelte.CodeMirror {
	--base: #999FAA;
	--comment: #5B6470;
	--keyword: #AA69BE;
	--tags: #E06B74;
	--string: #99C379;
	--number: #D29966;
	background: #151515;
	color: var(--base);
}

.cm-s-svelte .CodeMirror-selected {
	background: #1E2F3E;
}

.cm-s-svelte.CodeMirror-focused .CodeMirror-selected {
	background: #1E2F3E;
}

.cm-s-svelte .CodeMirror-gutters {
	padding: 0 16px 0 8px;
	background: #151515;
	border: none;
}

.cm-s-svelte .CodeMirror-guttermarker-subtle {
	color: #E6E6E6;
}

.cm-s-svelte .CodeMirror-linenumber {
	color: #E6E6E6;
	opacity: 0.6;
}

.cm-s-svelte .CodeMirror-cursor {
	border-left: 2px solid #E6E6E6;
}

.cm-s-svelte span.cm-comment {
	color: var(--comment);
}

.cm-s-svelte span.cm-atom {
	color: var(--keyword);
}

.cm-s-svelte span.cm-number {
	color: var(--number);
}

.cm-s-svelte span.cm-attribute,
.cm-s-svelte span.cm-keyword {
	color: var(--keyword);
}

.cm-s-svelte span.cm-string,
.cm-s-svelte span.cm-string-2 {
	color: var(--string);
}

.cm-s-svelte span.cm-variable,
.cm-s-svelte span.cm-variable-2,
.cm-s-svelte span.cm-variable-3,
.cm-s-svelte span.cm-tag,
.cm-s-svelte span.cm-bracket {
	color: var(--tags);
}

.cm-s-svelte span.cm-link {
	color: #999999;
}

.cm-s-svelte span.cm-error,
.cm-s-svelte span.cm-invalidchar {
	color: #ff008c;
}

.cm-s-svelte .CodeMirror-foldgutter {
	width: 0.7em;
}

.cm-s-svelte .CodeMirror-foldgutter-open,
.cm-s-svelte .CodeMirror-foldgutter-folded {
	cursor: pointer;
}

.cm-s-svelte .CodeMirror-foldgutter-open:after,
.cm-s-svelte .CodeMirror-foldgutter-folded:after {
	content: '>';
	font-size: 0.8em;
	opacity: 0.8;
	transition: transform 0.2s;
	display: inline-block;
	top: -0.1em;
	position: relative;
	transform: rotate(90deg);
}

.cm-s-svelte .CodeMirror-foldgutter-folded:after {
	transform: none;
}

Discussion