feat: support monaco theme toggle
Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
parent
430d813a67
commit
c45fc71f4f
|
|
@ -0,0 +1,7 @@
|
|||
import Editor, { EditorProps } from "@monaco-editor/react"
|
||||
import { useMonacoTheme } from "./use-theme"
|
||||
|
||||
export function MonacoEditor(props: EditorProps) {
|
||||
useMonacoTheme()
|
||||
return <Editor {...props} />
|
||||
}
|
||||
|
|
@ -0,0 +1,244 @@
|
|||
{
|
||||
"base": "vs-dark",
|
||||
"inherit": true,
|
||||
"rules": [
|
||||
{
|
||||
"background": "000000",
|
||||
"token": ""
|
||||
},
|
||||
{
|
||||
"foreground": "969896",
|
||||
"token": "comment"
|
||||
},
|
||||
{
|
||||
"foreground": "eeeeee",
|
||||
"token": "keyword.operator.class"
|
||||
},
|
||||
{
|
||||
"foreground": "eeeeee",
|
||||
"token": "constant.other"
|
||||
},
|
||||
{
|
||||
"foreground": "eeeeee",
|
||||
"token": "source.php.embedded.line"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "variable"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "support.other.variable"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "string.other.link"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "string.regexp"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "entity.name.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "entity.other.attribute-name"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "meta.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "declaration.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "d54e53",
|
||||
"token": "markup.deleted.git_gutter"
|
||||
},
|
||||
{
|
||||
"foreground": "e78c45",
|
||||
"token": "constant.numeric"
|
||||
},
|
||||
{
|
||||
"foreground": "e78c45",
|
||||
"token": "constant.language"
|
||||
},
|
||||
{
|
||||
"foreground": "e78c45",
|
||||
"token": "support.constant"
|
||||
},
|
||||
{
|
||||
"foreground": "e78c45",
|
||||
"token": "constant.character"
|
||||
},
|
||||
{
|
||||
"foreground": "e78c45",
|
||||
"token": "variable.parameter"
|
||||
},
|
||||
{
|
||||
"foreground": "e78c45",
|
||||
"token": "punctuation.section.embedded"
|
||||
},
|
||||
{
|
||||
"foreground": "e78c45",
|
||||
"token": "keyword.other.unit"
|
||||
},
|
||||
{
|
||||
"foreground": "e7c547",
|
||||
"token": "entity.name.class"
|
||||
},
|
||||
{
|
||||
"foreground": "e7c547",
|
||||
"token": "entity.name.type.class"
|
||||
},
|
||||
{
|
||||
"foreground": "e7c547",
|
||||
"token": "support.type"
|
||||
},
|
||||
{
|
||||
"foreground": "e7c547",
|
||||
"token": "support.class"
|
||||
},
|
||||
{
|
||||
"foreground": "b9ca4a",
|
||||
"token": "string"
|
||||
},
|
||||
{
|
||||
"foreground": "b9ca4a",
|
||||
"token": "constant.other.symbol"
|
||||
},
|
||||
{
|
||||
"foreground": "b9ca4a",
|
||||
"token": "entity.other.inherited-class"
|
||||
},
|
||||
{
|
||||
"foreground": "b9ca4a",
|
||||
"token": "markup.heading"
|
||||
},
|
||||
{
|
||||
"foreground": "b9ca4a",
|
||||
"token": "markup.inserted.git_gutter"
|
||||
},
|
||||
{
|
||||
"foreground": "70c0b1",
|
||||
"token": "keyword.operator"
|
||||
},
|
||||
{
|
||||
"foreground": "70c0b1",
|
||||
"token": "constant.other.color"
|
||||
},
|
||||
{
|
||||
"foreground": "7aa6da",
|
||||
"token": "entity.name.function"
|
||||
},
|
||||
{
|
||||
"foreground": "7aa6da",
|
||||
"token": "meta.function-call"
|
||||
},
|
||||
{
|
||||
"foreground": "7aa6da",
|
||||
"token": "support.function"
|
||||
},
|
||||
{
|
||||
"foreground": "7aa6da",
|
||||
"token": "keyword.other.special-method"
|
||||
},
|
||||
{
|
||||
"foreground": "7aa6da",
|
||||
"token": "meta.block-level"
|
||||
},
|
||||
{
|
||||
"foreground": "7aa6da",
|
||||
"token": "markup.changed.git_gutter"
|
||||
},
|
||||
{
|
||||
"foreground": "c397d8",
|
||||
"token": "keyword"
|
||||
},
|
||||
{
|
||||
"foreground": "c397d8",
|
||||
"token": "storage"
|
||||
},
|
||||
{
|
||||
"foreground": "c397d8",
|
||||
"token": "storage.type"
|
||||
},
|
||||
{
|
||||
"foreground": "c397d8",
|
||||
"token": "entity.name.tag.css"
|
||||
},
|
||||
{
|
||||
"foreground": "ced2cf",
|
||||
"background": "df5f5f",
|
||||
"token": "invalid"
|
||||
},
|
||||
{
|
||||
"foreground": "ced2cf",
|
||||
"background": "82a3bf",
|
||||
"token": "meta.separator"
|
||||
},
|
||||
{
|
||||
"foreground": "ced2cf",
|
||||
"background": "b798bf",
|
||||
"token": "invalid.deprecated"
|
||||
},
|
||||
{
|
||||
"foreground": "ffffff",
|
||||
"token": "markup.inserted.diff"
|
||||
},
|
||||
{
|
||||
"foreground": "ffffff",
|
||||
"token": "markup.deleted.diff"
|
||||
},
|
||||
{
|
||||
"foreground": "ffffff",
|
||||
"token": "meta.diff.header.to-file"
|
||||
},
|
||||
{
|
||||
"foreground": "ffffff",
|
||||
"token": "meta.diff.header.from-file"
|
||||
},
|
||||
{
|
||||
"foreground": "718c00",
|
||||
"token": "markup.inserted.diff"
|
||||
},
|
||||
{
|
||||
"foreground": "718c00",
|
||||
"token": "meta.diff.header.to-file"
|
||||
},
|
||||
{
|
||||
"foreground": "c82829",
|
||||
"token": "markup.deleted.diff"
|
||||
},
|
||||
{
|
||||
"foreground": "c82829",
|
||||
"token": "meta.diff.header.from-file"
|
||||
},
|
||||
{
|
||||
"foreground": "ffffff",
|
||||
"background": "4271ae",
|
||||
"token": "meta.diff.header.from-file"
|
||||
},
|
||||
{
|
||||
"foreground": "ffffff",
|
||||
"background": "4271ae",
|
||||
"token": "meta.diff.header.to-file"
|
||||
},
|
||||
{
|
||||
"foreground": "3e999f",
|
||||
"fontStyle": "italic",
|
||||
"token": "meta.diff.range"
|
||||
}
|
||||
],
|
||||
"colors": {
|
||||
"editor.foreground": "#DEDEDE",
|
||||
"editor.background": "#00000000",
|
||||
"editor.selectionBackground": "#424242",
|
||||
"editor.lineHighlightBackground": "#2A2A2A",
|
||||
"editorCursor.foreground": "#9F9F9F",
|
||||
"editorWhitespace.foreground": "#343434"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
{
|
||||
"base": "vs",
|
||||
"inherit": true,
|
||||
"rules": [
|
||||
{
|
||||
"background": "FFFFFF",
|
||||
"token": ""
|
||||
},
|
||||
{
|
||||
"foreground": "008e00",
|
||||
"token": "comment"
|
||||
},
|
||||
{
|
||||
"foreground": "7d4726",
|
||||
"token": "meta.preprocessor"
|
||||
},
|
||||
{
|
||||
"foreground": "7d4726",
|
||||
"token": "keyword.control.import"
|
||||
},
|
||||
{
|
||||
"foreground": "df0002",
|
||||
"token": "string"
|
||||
},
|
||||
{
|
||||
"foreground": "3a00dc",
|
||||
"token": "constant.numeric"
|
||||
},
|
||||
{
|
||||
"foreground": "c800a4",
|
||||
"token": "constant.language"
|
||||
},
|
||||
{
|
||||
"foreground": "275a5e",
|
||||
"token": "constant.character"
|
||||
},
|
||||
{
|
||||
"foreground": "275a5e",
|
||||
"token": "constant.other"
|
||||
},
|
||||
{
|
||||
"foreground": "c800a4",
|
||||
"token": "variable.language"
|
||||
},
|
||||
{
|
||||
"foreground": "c800a4",
|
||||
"token": "variable.other"
|
||||
},
|
||||
{
|
||||
"foreground": "c800a4",
|
||||
"token": "keyword"
|
||||
},
|
||||
{
|
||||
"foreground": "c900a4",
|
||||
"token": "storage"
|
||||
},
|
||||
{
|
||||
"foreground": "438288",
|
||||
"token": "entity.name.class"
|
||||
},
|
||||
{
|
||||
"foreground": "790ead",
|
||||
"token": "entity.name.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "450084",
|
||||
"token": "entity.other.attribute-name"
|
||||
},
|
||||
{
|
||||
"foreground": "450084",
|
||||
"token": "support.function"
|
||||
},
|
||||
{
|
||||
"foreground": "450084",
|
||||
"token": "support.constant"
|
||||
},
|
||||
{
|
||||
"foreground": "790ead",
|
||||
"token": "support.type"
|
||||
},
|
||||
{
|
||||
"foreground": "790ead",
|
||||
"token": "support.class"
|
||||
},
|
||||
{
|
||||
"foreground": "790ead",
|
||||
"token": "support.other.variable"
|
||||
}
|
||||
],
|
||||
"colors": {
|
||||
"editor.foreground": "#000000",
|
||||
"editor.background": "#FFFFFF00",
|
||||
"editor.selectionBackground": "#B5D5FF",
|
||||
"editor.lineHighlightBackground": "#00000012",
|
||||
"editorCursor.foreground": "#000000",
|
||||
"editorWhitespace.foreground": "#BFBFBF"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { useMonaco } from "@monaco-editor/react"
|
||||
import { useEffect } from "react"
|
||||
import { useMediaStore } from "~/hooks/useDarkMode"
|
||||
import Dark from "./theme/dark.json"
|
||||
import Light from "./theme/light.json"
|
||||
|
||||
const set = new Set()
|
||||
const useDefineTheme = (theme: string, json: any) => {
|
||||
const monaco = useMonaco()
|
||||
useEffect(() => {
|
||||
if (set.has(theme)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (monaco) {
|
||||
monaco.editor.defineTheme(theme, json)
|
||||
|
||||
set.add(theme)
|
||||
}
|
||||
}, [monaco, theme])
|
||||
}
|
||||
|
||||
export const useMonacoTheme = () => {
|
||||
useDefineTheme("light", Light)
|
||||
useDefineTheme("dark", Dark)
|
||||
const isDark = useMediaStore((state) => state.isDark)
|
||||
const monaco = useMonaco()
|
||||
|
||||
useEffect(() => {
|
||||
monaco?.editor.setTheme(isDark ? "dark" : "light")
|
||||
}, [monaco, isDark])
|
||||
}
|
||||
|
|
@ -5,13 +5,14 @@ import { DashboardLayout } from "~/components/dashboard/DashboardLayout"
|
|||
import { SettingsLayout } from "~/components/dashboard/SettingsLayout"
|
||||
import { Button } from "~/components/ui/Button"
|
||||
import { useGetSite, useUpdateSite } from "~/queries/site"
|
||||
import Editor from "@monaco-editor/react"
|
||||
|
||||
import { FieldLabel } from "~/components/ui/FieldLabel"
|
||||
import type { ReactElement } from "react"
|
||||
import { useTranslation } from "next-i18next"
|
||||
import { getServerSideProps as getLayoutServerSideProps } from "~/components/dashboard/DashboardLayout.server"
|
||||
import { GetServerSideProps } from "next"
|
||||
import { serverSidePropsHandler } from "~/lib/server-side-props"
|
||||
import { MonacoEditor } from "~/components/common/Monaco"
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
|
||||
async (ctx) => {
|
||||
|
|
@ -106,13 +107,14 @@ export default function SettingsCSSPage() {
|
|||
</p>
|
||||
</div>
|
||||
<FieldLabel label={t("Custom CSS")} />
|
||||
<Editor
|
||||
<MonacoEditor
|
||||
className="w-full h-96 border outline-none py-3 rounded-lg inline-flex items-center overflow-hidden"
|
||||
defaultLanguage="css"
|
||||
defaultValue={css}
|
||||
onChange={(value) => setCss(value || "")}
|
||||
options={{
|
||||
fontSize: 14,
|
||||
minimap: { enabled: false },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue