From ac83ff88171e3def2cab0d2eee489b170c417d1a Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Tue, 28 Jan 2025 00:34:25 +0100 Subject: [PATCH] theme glowup --- packages/codemirror/themes/abcdef.mjs | 7 +- packages/codemirror/themes/algoboy.mjs | 78 ++++++++++++-------- packages/codemirror/themes/androidstudio.mjs | 1 + packages/codemirror/themes/atomone.mjs | 4 +- packages/codemirror/themes/darcula.mjs | 18 +++-- packages/codemirror/themes/dracula.mjs | 18 +++-- 6 files changed, 76 insertions(+), 50 deletions(-) diff --git a/packages/codemirror/themes/abcdef.mjs b/packages/codemirror/themes/abcdef.mjs index a184ea72..917823b9 100644 --- a/packages/codemirror/themes/abcdef.mjs +++ b/packages/codemirror/themes/abcdef.mjs @@ -26,11 +26,14 @@ export default createTheme({ caret: '#00FF00', selection: '#515151', selectionMatch: '#515151', - gutterBackground: '#555', - gutterForeground: '#FFFFFF', + // gutterBackground: '#555', + gutterBackground: 'transparent', + /* gutterForeground: '#FFFFFF', */ + gutterForeground: '#7a7b7c', lineHighlight: '#0a6bcb3d', }, styles: [ + { tag: t.labelName, color: 'inherit' }, { tag: t.keyword, color: 'darkgoldenrod', fontWeight: 'bold' }, { tag: t.atom, color: '#77F' }, { tag: t.comment, color: '#7a7b7c', fontStyle: 'italic' }, diff --git a/packages/codemirror/themes/algoboy.mjs b/packages/codemirror/themes/algoboy.mjs index b74b4302..30812d12 100644 --- a/packages/codemirror/themes/algoboy.mjs +++ b/packages/codemirror/themes/algoboy.mjs @@ -1,42 +1,60 @@ import { tags as t } from '@lezer/highlight'; import { createTheme } from './theme-helper.mjs'; + +const palettes = { + // https://www.deviantart.com/advancedfan2020/art/Game-Boy-Palette-Set-Color-HEX-Part-09-920495662 + 'Central Florida A': ['#FFF630', '#B3AC22', '#666213', '#191905'], + 'Central Florida B': ['#38CEBA', '#279082', '#16524A', '#061513'], + 'Central Florida C': ['#FF8836', '#B35F26', '#663616', '#190E05'], + 'Central Florida D': ['#E07070', '#9D4E4E', '#5A2D2D', '#160B0B'], + 'Central Florida E': ['#7AA4CB', '#55738E', '#314251', '#0C1014'], + 'Feminine Energy A': ['#DC5686', '#9A415E', '#582536', '#16090D'], + 'Feminine Energy B': ['#D0463C', '#92312A', '#531c18', '#150706'], + 'Feminine Energy C': ['#D86918', '#974A11', '#562A0A', '#160A02'], + 'Feminine Energy D': ['#EFC54F', '#A78A36', '#604F20', '#181408'], + 'Feminine Energy E': ['#866399', '#5e456b', '#36283d', '#0d0a0f'], + 'Sour Watermelon A': ['#993366', '#6B2447', '#3D1429', '#0F050A'], + 'Sour Watermelon B': ['#996666', '#6B4747', '#3D2929', '#0F0A0A'], + 'Sour Watermelon C': ['#999966', '#686B47', '#3d3d29', '#0f0f0A'], + 'Sour Watermelon D': ['#99cc66', '#6b8f47', '#3d5229', '#0f140a'], + 'Sour Watermelon E': ['#99ff66', '#6bb347', '#3d6629', '#0f190a'], + //https://www.deviantart.com/advancedfan2020/art/Game-Boy-Palette-Set-Color-HEX-Part-02-920073260 + 'Peri Peaceful A': ['#909BE9', '#656DA3', '#3A3E5D', '#0e0f17'], + 'Peri Peaceful B': ['#68628d', '#494563', '#2a2738', '#0a0a0e'], // pretty dim + 'Peri Peaceful E': ['#b5a0a9', '#7f7076', '#484044', '#121011'], + 'Hichem Palette B': ['#4fa3a5', '#377273', '#204142', '#081010'], + 'Hichem Palette C': ['#Fe6f9b', '#b24e6d', '#662c3e', '#190b0f'], + 'Hichem Palette D': ['#ffbb5a', '#b3833f', '#664b24', '#191309'], + 'JSR2 A': ['#E0EFC0', '#9da786', '#5a604d', '#161813'], +}; +const palette = palettes['Sour Watermelon B']; export const settings = { - background: '#9bbc0f', - foreground: '#0f380f', // whats that? - caret: '#0f380f', - selection: '#306230', - selectionMatch: '#ffffff26', - lineHighlight: '#8bac0f', - lineBackground: '#9bbc0f50', + background: palette[3], + foreground: palette[1], + caret: palette[0], + selection: palette[0], + selectionMatch: palette[1], + lineHighlight: palette[3], + lineBackground: palette[3] + '90', //lineBackground: 'transparent', gutterBackground: 'transparent', - gutterForeground: '#0f380f', - light: true, + gutterForeground: palette[0], + light: false, // customStyle: '.cm-line { line-height: 1 }', }; export default createTheme({ - theme: 'light', + theme: 'dark', settings, styles: [ - { tag: t.labelName, color: 'inherit' }, - { tag: t.keyword, color: 'inherit' }, - { tag: t.operator, color: 'inherit' }, - { tag: t.special(t.variableName), color: 'inherit' }, - { tag: t.typeName, color: 'inherit' }, - { tag: t.atom, color: 'inherit' }, - { tag: t.number, color: 'inherit' }, - { tag: t.definition(t.variableName), color: 'inherit' }, - { tag: t.string, color: 'inherit' }, - { tag: t.special(t.string), color: 'inherit' }, - { tag: t.comment, color: 'inherit' }, - { tag: t.variableName, color: 'inherit' }, - { tag: t.tagName, color: 'inherit' }, - { tag: t.bracket, color: 'inherit' }, - { tag: t.meta, color: 'inherit' }, - { tag: t.attributeName, color: 'inherit' }, - { tag: t.propertyName, color: 'inherit' }, - { tag: t.className, color: 'inherit' }, - { tag: t.invalid, color: 'inherit' }, - { tag: [t.unit, t.punctuation], color: 'inherit' }, + { tag: t.comment, color: palette[2] }, + { tag: t.string, color: palette[1] }, + { tag: [t.atom, t.number], color: palette[1] }, + { tag: [t.meta, t.labelName, t.variableName], color: palette[0] }, + { + tag: [t.keyword, t.tagName, t.arithmeticOperator], + color: palette[1], + }, + { tag: [t.function(t.variableName), t.propertyName], color: palette[0] }, + { tag: t.atom, color: palette[1] }, ], }); diff --git a/packages/codemirror/themes/androidstudio.mjs b/packages/codemirror/themes/androidstudio.mjs index 6a1655ce..75958e4a 100644 --- a/packages/codemirror/themes/androidstudio.mjs +++ b/packages/codemirror/themes/androidstudio.mjs @@ -25,6 +25,7 @@ export default createTheme({ lineHighlight: '#7f85891f', }, styles: [ + { tag: t.labelName, color: 'inherit' }, { tag: [t.keyword, t.deleted, t.className], color: '#cc7832' }, { tag: [t.number, t.literal, t.derefOperator], color: '#6897bb' }, { tag: [t.link, t.variableName], color: '#629755' }, diff --git a/packages/codemirror/themes/atomone.mjs b/packages/codemirror/themes/atomone.mjs index 1839b495..85951d15 100644 --- a/packages/codemirror/themes/atomone.mjs +++ b/packages/codemirror/themes/atomone.mjs @@ -10,7 +10,7 @@ import { createTheme } from './theme-helper.mjs'; export const settings = { background: '#272C35', lineBackground: '#272C3599', - foreground: '#9d9b97', + foreground: 'hsl(220, 14%, 71%)', caret: '#797977', selection: '#ffffff30', selectionMatch: '#2B323D', @@ -40,7 +40,7 @@ export default createTheme({ }, { tag: [t.tagName, t.heading], color: '#e06c75' }, { tag: t.comment, color: '#54636D' }, - { tag: [t.propertyName], color: 'hsl(220, 14%, 71%)' }, + { tag: [t.variableName, t.propertyName, t.labelName], color: 'hsl(220, 14%, 71%)' }, { tag: [t.attributeName, t.number], color: 'hsl( 29, 54%, 61%)' }, { tag: t.className, color: 'hsl( 39, 67%, 69%)' }, { tag: t.keyword, color: 'hsl(286, 60%, 67%)' }, diff --git a/packages/codemirror/themes/darcula.mjs b/packages/codemirror/themes/darcula.mjs index ac61c6b1..176acbfe 100644 --- a/packages/codemirror/themes/darcula.mjs +++ b/packages/codemirror/themes/darcula.mjs @@ -7,8 +7,8 @@ import { tags as t } from '@lezer/highlight'; import { createTheme } from './theme-helper.mjs'; export const settings = { - background: '#2B2B2B', - lineBackground: '#2B2B2B99', + background: '#242424', + lineBackground: '#24242499', foreground: '#f8f8f2', caret: '#FFFFFF', selection: 'rgba(255, 255, 255, 0.1)', @@ -22,22 +22,24 @@ export const settings = { export default createTheme({ theme: 'dark', settings: { - background: '#2B2B2B', + background: '#242424', foreground: '#f8f8f2', caret: '#FFFFFF', selection: 'rgba(255, 255, 255, 0.1)', selectionMatch: 'rgba(255, 255, 255, 0.2)', - gutterBackground: 'rgba(255, 255, 255, 0.1)', + gutterBackground: 'transparent', gutterForeground: '#999', gutterBorder: 'transparent', lineHighlight: 'rgba(255, 255, 255, 0.1)', }, styles: [ - { tag: [t.atom, t.number], color: '#bd93f9' }, - { tag: [t.comment], color: '#61A151' }, + { tag: t.labelName, color: '#CCCCCC' }, + { tag: [t.atom, t.number], color: '#7A9EC2' }, + { tag: [t.comment], color: '#707070' }, { tag: [t.string], color: '#6A8759' }, - { tag: [t.variableName, t.operator], color: '#A9B7C6' }, - { tag: [t.meta, t.className], color: '#A9B7C6' }, + { tag: [t.variableName, t.operator], color: '#CCCCCC' }, + { tag: [t.function(t.variableName), t.propertyName], color: '#FFC66D' }, + { tag: [t.meta, t.className], color: '#FFC66D' }, { tag: [t.propertyName], color: '#FFC66D' }, { tag: [t.keyword], color: '#CC7832' }, { tag: [t.tagName], color: '#ff79c6' }, diff --git a/packages/codemirror/themes/dracula.mjs b/packages/codemirror/themes/dracula.mjs index e1e78d30..10147eda 100644 --- a/packages/codemirror/themes/dracula.mjs +++ b/packages/codemirror/themes/dracula.mjs @@ -4,6 +4,7 @@ * Michael Kaminsky (http://github.com/mkaminsky11) * Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme) */ +// this is different from https://thememirror.net/dracula import { tags as t } from '@lezer/highlight'; import { createTheme } from './theme-helper.mjs'; @@ -15,11 +16,13 @@ export const settings = { selection: 'rgba(255, 255, 255, 0.1)', selectionMatch: 'rgba(255, 255, 255, 0.2)', gutterBackground: '#282a36', - gutterForeground: '#6D8A88', + gutterForeground: '#6272a4', gutterBorder: 'transparent', lineHighlight: 'rgba(255, 255, 255, 0.1)', }; +const purple = '#BD93F9'; + export default createTheme({ theme: 'dark', settings: { @@ -29,21 +32,20 @@ export default createTheme({ selection: 'rgba(255, 255, 255, 0.1)', selectionMatch: 'rgba(255, 255, 255, 0.2)', gutterBackground: '#282a36', - gutterForeground: '#6D8A88', + gutterForeground: '#6272a4', gutterBorder: 'transparent', lineHighlight: 'rgba(255, 255, 255, 0.1)', }, styles: [ { tag: t.comment, color: '#6272a4' }, { tag: t.string, color: '#f1fa8c' }, - { tag: t.atom, color: '#bd93f9' }, - { tag: t.meta, color: '#f8f8f2' }, - { tag: [t.keyword, t.operator, t.tagName], color: '#ff79c6' }, - { tag: [t.function(t.propertyName), t.propertyName], color: '#66d9ef' }, + { tag: [t.atom, t.number], color: purple }, + { tag: [t.meta, t.labelName, t.variableName], color: '#f8f8f2' }, { - tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName], - color: '#50fa7b', + tag: [t.keyword, t.tagName, t.arithmeticOperator], + color: '#ff79c6', }, + { tag: [t.function(t.variableName), t.propertyName], color: '#50fa7b' }, { tag: t.atom, color: '#bd93f9' }, ], });