chore(app): enable moonlight theme

riccardoperra · Oct 8, 2022 · 00446b5 · 00446b5
1 parent 15e6f54
commit 00446b5
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 21 deletions.
diff --git a/apps/codeimage/src/state/theme/themeRegistry.ts b/apps/codeimage/src/state/theme/themeRegistry.ts
@@ -71,6 +71,11 @@ export const THEME_REGISTRY: ReadonlyArray<ThemeRegistryEntry> = [
     // prettier-ignore
     load: () => import('@codeimage/highlight/themes').then(m => m.githubLightTheme),
   },
+  {
+    id: 'moonlight',
+    // prettier-ignore
+    load: () => import('@codeimage/highlight/themes').then(m => m.moonlightTheme),
+  },
   {
     id: 'duotoneSea',
     // prettier-ignore

diff --git a/packages/highlight/dev/Editor/preview.ts b/packages/highlight/dev/Editor/preview.ts
@@ -1,6 +1,3 @@
-import prettier from 'prettier';
-import tsParser from 'prettier/parser-typescript';
-
 export const PREVIEW_CODE =
   'var globalVar;\n' +
   '/**\n' +

diff --git a/packages/highlight/dev/index.tsx b/packages/highlight/dev/index.tsx
@@ -5,7 +5,6 @@ import {
   FieldLabel,
   FlexField,
   Select,
-  VStack,
 } from '@codeimage/ui';
 import {setElementVars} from '@vanilla-extract/dynamic';
 import {createEffect, on} from 'solid-js';

diff --git a/packages/highlight/src/lib/themes/moonlight/index.ts b/packages/highlight/src/lib/themes/moonlight/index.ts
@@ -1,15 +1,15 @@
 import {createTheme} from '../../core';
-import {moonlight} from './moonlight';
+import {moonlight, palette} from './moonlight';
 
 export const moonlightTheme = createTheme({
   id: 'moonlight',
   editorTheme: moonlight,
   properties: {
     darkMode: true,
     label: 'Moonlight',
-    previewBackground: ``,
+    previewBackground: `linear-gradient(135deg, #6a3cc0 0%, #240573 100%)`,
     terminal: {
-      main: '#212539',
+      main: palette.foreground,
       text: '#e4f3fa',
     },
   },

diff --git a/packages/highlight/src/lib/themes/moonlight/moonlight.ts b/packages/highlight/src/lib/themes/moonlight/moonlight.ts
@@ -5,7 +5,7 @@ export const palette = {
   foreground: '#222244',
   numbers: '#f3c1ff',
   strings: '#7af8ca',
-  className :'#FFCB6B',
+  className: '#FFCB6B',
   lineNumbers: '#5b6395',
   punctuation: '#7fdaff',
   function: '#34d3fb',
@@ -15,15 +15,14 @@ export const palette = {
   base: '#ffffff',
   tag: '#9effff',
   property: '#ffdb8e',
-  selection :'#717CB450',
+  selection: '#717CB450',
   text: '#FAD000',
   white: '#FFFFFF',
   self: '#ff757f',
-  module:'#34d3fb',
+  module: '#34d3fb',
   regexp: '#a6eefb',
 };
 
-
 export const moonlight = [
   defineEditorTheme({
     highlight: {
@@ -55,12 +54,10 @@ export const moonlight = [
       color: palette.cursor,
     },
     autocomplete: {
-      background: palette.strings,
+      background: '#212539',
       border: palette.property,
-      selectedBackground: palette.strings,
+      selectedBackground: '#34d3fb',
     },
     darkMode: true,
   }),
 ];
-
-
diff --git a/packages/highlight/src/lib/themes/shadeOfPurple/shadeOfPurple.ts b/packages/highlight/src/lib/themes/shadeOfPurple/shadeOfPurple.ts
@@ -5,7 +5,7 @@ export const palette = {
   foreground: '#222244',
   numbers: '#c42f98',
   strings: '#92FC79',
-  className :' #59e366',
+  className: ' #59e366',
   lineNumbers: '#A599E9',
   punctuation: '#E1EFFF',
   function: '#FAD000',
@@ -15,12 +15,11 @@ export const palette = {
   base: '#59e3de',
   tag: '#9effff',
   property: '#FFEE80',
-  selection :'#B362FF88',
+  selection: '#B362FF88',
   text: '#FAD000',
-  white: '#FFFFFF'
+  white: '#FFFFFF',
 };
 
-
 export const shadeOfPurple = [
   defineEditorTheme({
     highlight: {
@@ -57,5 +56,3 @@ export const shadeOfPurple = [
     darkMode: true,
   }),
 ];
-
-