Skip to content

Commit

Permalink
Add light mode colors for text editor
Browse files Browse the repository at this point in the history
  • Loading branch information
dogmar committed Sep 19, 2023
1 parent c111305 commit 7227e0d
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 37 deletions.
17 changes: 10 additions & 7 deletions src/components/CodeEditor.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { type Dispatch, useEffect, useState } from 'react'
import { type Dispatch, useCallback, useEffect, useState } from 'react'
import { Button, Flex, P } from 'honorable'
import { useTheme } from 'styled-components'

import Editor, { useMonaco } from '@monaco-editor/react'

import { merge } from 'lodash'

import { editorTheme } from '../theme/editor'
import { editorThemeDark } from '../theme/editorThemeDark'
import { editorThemeLight } from '../theme/editorThemeLight'

import Card, { type CardProps } from './Card'
import { toFillLevel, useFillLevel } from './contexts/FillLevelContext'
Expand Down Expand Up @@ -65,9 +65,12 @@ export default function CodeEditor({
}, [copied])

useEffect(() => {
monaco?.editor?.defineTheme('plural', editorTheme)
monaco?.editor?.setTheme('plural')
}, [monaco])
monaco?.editor?.defineTheme('plural-dark', editorThemeDark)
monaco?.editor?.defineTheme('plural-light', editorThemeLight)
monaco?.editor.setTheme(
theme.mode === 'light' ? 'plural-light' : 'plural-dark'
)
}, [monaco, theme.mode])

return (
<Card
Expand All @@ -92,7 +95,7 @@ export default function CodeEditor({
if (onChange) onChange(v)
}}
options={merge(defaultOptions, options)}
theme="plural"
theme={theme.mode === 'light' ? 'plural-light' : 'plural-dark'}
/>
{save && (
<Flex
Expand Down
2 changes: 2 additions & 0 deletions src/theme/colors-codeblock-dark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export const colorsCodeBlockDark = prefixKeys(
[`yellow`]: '#FFF48F',
[`mid-grey`]: '#C5C9D3',
[`dark-green`]: '#3CECAF',
[`dark-lilac`]: '#BE5EEB',
[`light-lilac`]: '#D596F4',
[`dark-purple`]: '#7075F5',
[`light-grey`]: '#EBEFF0',
[`light-blue`]: '#C2E9FF',
Expand Down
2 changes: 2 additions & 0 deletions src/theme/colors-codeblock-light.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export const colorsCodeBlockLight = prefixKeys(
[`yellow`]: '#C3B853',
[`mid-grey`]: '#898D97',
[`dark-green`]: '#00B073',
[`dark-lilac`]: '#BE5EEB',
[`light-lilac`]: '#D596F4',
[`dark-purple`]: '#3439B9',
[`light-grey`]: '#AFB3B4',
[`light-blue`]: '#86ADC3',
Expand Down
61 changes: 31 additions & 30 deletions src/theme/editor.ts → src/theme/editorThemeDark.ts
Original file line number Diff line number Diff line change
@@ -1,120 +1,121 @@
import { semanticColorsDark as semanticColors } from './colors-semantic-dark'
import { blue, red } from './colors-base'

export const editorTheme = {
export const editorThemeDark = {
inherit: true,
base: 'vs-dark',
rules: [
{
background: '21242C',
background: semanticColors['fill-one'],
token: '',
},
{
foreground: 'A1A5B0',
foreground: semanticColors['text-xlight'],
token: 'comment',
},
{
foreground: '66C7FF',
foreground: blue[300],
token: 'string',
},
{
foreground: '99F5D5',
foreground: semanticColors['code-block-light-green'],
token: 'constant.numeric',
},
{
foreground: '3CECAF',
foreground: semanticColors['code-block-dark-green'],
token: 'constant.language',
},
{
foreground: '969AF8',
foreground: semanticColors['code-block-purple'],
token: 'keyword',
},
{
foreground: '969AF8',
foreground: semanticColors['code-block-purple'],
token: 'support.constant.property-value',
},
{
foreground: '969AF8',
foreground: semanticColors['code-block-purple'],
token: 'constant.other.color',
},
{
foreground: 'FFF9C2',
foreground: semanticColors['code-block-yellow'],
token: 'keyword.other.unit',
},
{
foreground: 'D596F4',
foreground: semanticColors['code-block-light-lilac'],
token: 'entity.other.attribute-name.html',
},
{
foreground: '454954',
foreground: semanticColors['text-disabled'],
token: 'keyword.operator',
},
{
foreground: 'F599A8',
foreground: red[200],
token: 'storage',
},
{
foreground: '747B8B',
foreground: semanticColors['code-block-dark-grey'],
token: 'entity.other.inherited-class',
},
{
foreground: '747B8B',
foreground: semanticColors['code-block-dark-grey'],
token: 'entity.name.tag',
},
{
foreground: 'BE5EEB',
foreground: semanticColors['code-block-dark-lilac'],
token: 'constant.character.entity',
},
{
foreground: 'BE5EEB',
foreground: semanticColors['code-block-dark-lilac'],
token: 'support.class.js',
},
{
foreground: '747B8B',
foreground: semanticColors['code-block-dark-grey'],
token: 'entity.other.attribute-name',
},
{
foreground: 'F599A8',
foreground: red[200],
token: 'meta.selector.css',
},
{
foreground: 'F599A8',
foreground: red[200],
token: 'entity.name.tag.css',
},
{
foreground: 'F599A8',
foreground: red[200],
token: 'entity.other.attribute-name.id.css',
},
{
foreground: 'F599A8',
foreground: red[200],
token: 'entity.other.attribute-name.class.css',
},
{
foreground: '747B8B',
foreground: semanticColors['code-block-dark-grey'],
token: 'meta.property-name.css',
},
{
foreground: 'F599A8',
foreground: red[200],
token: 'support.function',
},
{
foreground: 'EBEFF0',
background: 'F599A8',
foreground: semanticColors['code-block-light-grey'],
background: red[200],
token: 'invalid',
},
{
foreground: 'F599A8',
foreground: red[200],
token: 'punctuation.section.embedded',
},
{
foreground: '747B8B',
foreground: semanticColors['code-block-dark-grey'],
token: 'punctuation.definition.tag',
},
{
foreground: 'BE5EEB',
foreground: semanticColors['code-block-dark-lilac'],
token: 'constant.other.color.rgb-value.css',
},
{
foreground: 'BE5EEB',
foreground: semanticColors['code-block-dark-lilac'],
token: 'support.constant.property-value.css',
},
],
Expand Down
136 changes: 136 additions & 0 deletions src/theme/editorThemeLight.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import { semanticColorsLight as semanticColors } from './colors-semantic-light'
import { red } from './colors-base'

export const editorThemeLight = {
inherit: true,
base: 'vs',
rules: [
{
background: semanticColors['fill-one'],
token: '',
},
{
foreground: semanticColors['text-xlight'],
token: 'comment',
},
{
foreground: semanticColors['code-block-mid-blue'],
token: 'string',
},
{
foreground: semanticColors['code-block-light-green'],
token: 'constant.numeric',
},
{
foreground: semanticColors['code-block-dark-green'],
token: 'constant.language',
},
{
foreground: semanticColors['code-block-purple'],
token: 'keyword',
},
{
foreground: semanticColors['code-block-purple'],
token: 'support.constant.property-value',
},
{
foreground: semanticColors['code-block-purple'],
token: 'constant.other.color',
},
{
foreground: semanticColors['code-block-yellow'],
token: 'keyword.other.unit',
},
{
foreground: semanticColors['code-block-light-lilac'],
token: 'entity.other.attribute-name.html',
},
{
foreground: semanticColors['text-disabled'],
token: 'keyword.operator',
},
{
foreground: red[300],
token: 'storage',
},
{
foreground: semanticColors['code-block-dark-grey'],
token: 'entity.other.inherited-class',
},
{
foreground: semanticColors['code-block-dark-grey'],
token: 'entity.name.tag',
},
{
foreground: semanticColors['code-block-dark-lilac'],
token: 'constant.character.entity',
},
{
foreground: semanticColors['code-block-dark-lilac'],
token: 'support.class.js',
},
{
foreground: semanticColors['code-block-dark-grey'],
token: 'entity.other.attribute-name',
},
{
foreground: red[300],
token: 'meta.selector.css',
},
{
foreground: red[300],
token: 'entity.name.tag.css',
},
{
foreground: red[300],
token: 'entity.other.attribute-name.id.css',
},
{
foreground: red[300],
token: 'entity.other.attribute-name.class.css',
},
{
foreground: semanticColors['code-block-dark-grey'],
token: 'meta.property-name.css',
},
{
foreground: red[300],
token: 'support.function',
},
{
foreground: semanticColors['code-block-light-grey'],
background: red[300],
token: 'invalid',
},
{
foreground: red[300],
token: 'punctuation.section.embedded',
},
{
foreground: semanticColors['code-block-dark-grey'],
token: 'punctuation.definition.tag',
},
{
foreground: semanticColors['code-block-dark-lilac'],
token: 'constant.other.color.rgb-value.css',
},
{
foreground: semanticColors['code-block-dark-lilac'],
token: 'support.constant.property-value.css',
},
],
colors: {
'editor.foreground': semanticColors['text-light'],
'editor.errorForeground': semanticColors['text-danger-light'],
'editor.descriptionForeground': semanticColors['text-xlight'],
'editor.background': semanticColors['fill-one'],
'editor.lineHighlightBackground': semanticColors['fill-one-hover'],
'editor.selectionBackground': semanticColors['fill-one-selected'],
'editor.inactiveSelectionBackground': semanticColors['fill-one-hover'],
'editorCursor.foreground': semanticColors.text,
'editorWhitespace.foreground': semanticColors['text-light'],
'editorLineNumber.foreground': semanticColors['text-light'],
'scrollbarSlider.background': semanticColors['fill-three'],
'scrollbarSlider.hoverBackground': semanticColors['fill-three'],
},
}

0 comments on commit 7227e0d

Please sign in to comment.