@softwarity/geojson-editor 1.0.24 → 1.0.25

package/src/geojson-editor.css

@@ -11,10 +11,15 @@
 }
 
 :host {
+  /* Color scheme - inherits from parent, falls back to system preference if not set */
+  color-scheme: inherit;
+
+  /* Layout variables (internal only) */
   --line-height: 19.5px;
   --gutter-width: 50px;
   --editor-padding-y: 8px;
   --editor-padding-x: 12px;
+
   display: flex;
   flex-direction: column;
   position: relative;
@@ -39,7 +44,7 @@
   position: relative;
   width: 100%;
   flex: 1;
-  background: var(--bg-color, #fff);
+  background: var(--geojson-editor-bg-color, light-dark(#fff, #2b2b2b));
   display: flex;
   overflow: hidden;
 }
@@ -47,8 +52,8 @@
 /* ========== Gutter ========== */
 .gutter {
   width: var(--gutter-width);
-  background: var(--gutter-bg, #f0f0f0);
-  border-right: 1px solid var(--gutter-border, #e0e0e0);
+  background: var(--geojson-editor-gutter-bg, light-dark(#f0f0f0, #313335));
+  border-right: 1px solid var(--geojson-editor-gutter-border, light-dark(#e0e0e0, #3c3f41));
   overflow: hidden;
   flex-shrink: 0;
   position: relative;
@@ -90,12 +95,12 @@
   top: 0;
   bottom: 0;
   width: 3px;
-  background: var(--error-color, #dc3545);
+  background: var(--geojson-editor-error-color, light-dark(#dc3545, #ff6b68));
 }
 
 .line-number {
   font-size: 11px;
-  color: var(--gutter-text, #999);
+  color: var(--geojson-editor-gutter-text, light-dark(#999, #606366));
   user-select: none;
   min-width: 20px;
   text-align: right;
@@ -118,7 +123,7 @@
   flex-shrink: 0;
   background: transparent;
   border: none;
-  color: var(--json-punct, #a9b7c6);
+  color: var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6));
   font-size: 10px;
   display: flex;
   align-items: center;
@@ -178,7 +183,7 @@
   padding: var(--editor-padding-y) var(--editor-padding-x);
   overscroll-behavior: contain; /* Prevent scroll chaining to parent */
   scrollbar-width: thin;
-  scrollbar-color: var(--control-border, #c0c0c0) var(--control-bg, #e8e8e8);
+  scrollbar-color: var(--geojson-editor-control-border, light-dark(#c0c0c0, #5a5a5a)) var(--geojson-editor-control-bg, light-dark(#e8e8e8, #3c3f41));
 }
 
 /* Scroll content - defines total scrollable height */
@@ -209,7 +214,7 @@
   position: absolute;
   width: 2px;
   height: 1em;
-  background: var(--caret-color, #000);
+  background: var(--geojson-editor-caret-color, light-dark(#000, #bbb));
   top: 0.15em;
   pointer-events: none;
   animation: cursor-blink 1s step-end infinite;
@@ -237,7 +242,7 @@
   position: absolute;
   height: 100%;
   top: 0;
-  background: var(--selection-color, rgba(51, 153, 255, 0.3));
+  background: var(--geojson-editor-selection-color, light-dark(rgba(51, 153, 255, 0.3), rgba(51, 153, 255, 0.4)));
   pointer-events: none;
   z-index: 0;
 }
@@ -259,47 +264,47 @@
 }
 
 /* ========== Syntax Highlighting ========== */
-.json-key { color: var(--json-key, #660e7a); }
-.json-string { color: var(--json-string, #008000); }
-.json-number { color: var(--json-number, #00f); }
-.json-boolean, .json-null { color: var(--json-boolean, #000080); }
-.json-punctuation { color: var(--json-punct, #000); }
-.json-error { color: var(--json-error, #f00); }
+.json-key { color: var(--geojson-editor-json-key, light-dark(#660e7a, #9876aa)); }
+.json-string { color: var(--geojson-editor-json-string, light-dark(#008000, #6a8759)); }
+.json-number { color: var(--geojson-editor-json-number, light-dark(#00f, #6897bb)); }
+.json-boolean, .json-null { color: var(--geojson-editor-json-boolean, light-dark(#000080, #cc7832)); }
+.json-punctuation { color: var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6)); }
+.json-error { color: var(--geojson-editor-json-error, light-dark(#f00, #ff6b68)); }
 
-.geojson-key { color: var(--geojson-key, #660e7a); font-weight: 600; }
-.geojson-type { color: var(--geojson-type, #008000); font-weight: 600; }
-.geojson-type-invalid { color: var(--geojson-type-invalid, #f00); font-weight: 600; }
+.geojson-key { color: var(--geojson-editor-geojson-key, light-dark(#660e7a, #9876aa)); font-weight: 600; }
+.geojson-type { color: var(--geojson-editor-geojson-type, light-dark(#008000, #6a8759)); font-weight: 600; }
+.geojson-type-invalid { color: var(--geojson-editor-geojson-type-invalid, light-dark(#f00, #ff6b68)); font-weight: 600; }
 
 /* Collapsed node styling */
 .collapsed-bracket-array,
 .collapsed-bracket-object {
-  color: var(--json-punct, #000);
+  color: var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6));
 }
 .collapsed-bracket-array::after,
 .collapsed-bracket-object::after {
   content: '…';
-  color: var(--json-punct, #888);
+  color: var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6));
 }
 
 /* ========== Prefix/Suffix ========== */
 .prefix-wrapper, .suffix-wrapper {
   display: flex;
   flex-shrink: 0;
-  background: var(--bg-color, #fff);
+  background: var(--geojson-editor-bg-color, light-dark(#fff, #2b2b2b));
 }
 
 .prefix-gutter, .suffix-gutter {
   width: var(--gutter-width);
-  background: var(--gutter-bg, #f0f0f0);
-  border-right: 1px solid var(--gutter-border, #e0e0e0);
+  background: var(--geojson-editor-gutter-bg, light-dark(#f0f0f0, #313335));
+  border-right: 1px solid var(--geojson-editor-gutter-border, light-dark(#e0e0e0, #3c3f41));
   flex-shrink: 0;
 }
 
 .editor-prefix, .editor-suffix {
   flex: 1;
   padding: 4px 12px;
-  color: var(--text-color, #000);
-  background: var(--bg-color, #fff);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
+  background: var(--geojson-editor-bg-color, light-dark(#fff, #2b2b2b));
   user-select: none;
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -316,7 +321,7 @@
   transform: translateY(-50%);
   background: transparent;
   border: none;
-  color: var(--text-color, #000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   opacity: 0.15;
   cursor: pointer;
   font-size: 0.7rem;
@@ -339,8 +344,8 @@
   top: 2rem;
   right: 0.5rem;
   z-index: 1000;
-  background: var(--bg-color, #ffffff);
-  border: 1px solid var(--gutter-border, #e0e0e0);
+  background: var(--geojson-editor-bg-color, light-dark(#fff, #2b2b2b));
+  border: 1px solid var(--geojson-editor-gutter-border, light-dark(#e0e0e0, #3c3f41));
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   padding: 12px 16px;
@@ -356,13 +361,13 @@
 .info-popup-title {
   font-weight: bold;
   font-size: 13px;
-  color: var(--text-color, #000000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   margin-bottom: 4px;
 }
 .info-popup-version {
   display: block;
   font-size: 11px;
-  color: var(--text-color, #000000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   opacity: 0.6;
   margin-bottom: 8px;
   text-decoration: none;
@@ -373,7 +378,7 @@
 }
 .info-popup-copyright {
   font-size: 10px;
-  color: var(--text-color, #000000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   opacity: 0.5;
 }
 
@@ -384,7 +389,7 @@
   transform: translateY(-50%);
   background: transparent;
   border: none;
-  color: var(--text-color, #000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   opacity: 0.3;
   cursor: pointer;
   font-size: 0.65rem;
@@ -413,7 +418,7 @@
 .error-nav-btn {
   background: transparent;
   border: none;
-  color: var(--error-color, #dc3545);
+  color: var(--geojson-editor-error-color, light-dark(#dc3545, #ff6b68));
   cursor: pointer;
   font-size: 8px;
   width: 16px;
@@ -429,7 +434,7 @@
   opacity: 1;
 }
 .error-count {
-  color: var(--error-color, #dc3545);
+  color: var(--geojson-editor-error-color, light-dark(#dc3545, #ff6b68));
   font-size: 11px;
   min-width: 20px;
   text-align: center;
@@ -437,9 +442,9 @@
 
 /* ========== Scrollbar ========== */
 .viewport::-webkit-scrollbar { width: 10px; height: 10px; }
-.viewport::-webkit-scrollbar-track { background: var(--control-bg, #e8e8e8); }
-.viewport::-webkit-scrollbar-thumb { background: var(--control-border, #c0c0c0); border-radius: 5px; }
-.viewport::-webkit-scrollbar-thumb:hover { background: var(--control-color, #000080); }
+.viewport::-webkit-scrollbar-track { background: var(--geojson-editor-control-bg, light-dark(#e8e8e8, #3c3f41)); }
+.viewport::-webkit-scrollbar-thumb { background: var(--geojson-editor-control-border, light-dark(#c0c0c0, #5a5a5a)); border-radius: 5px; }
+.viewport::-webkit-scrollbar-thumb:hover { background: var(--geojson-editor-control-color, light-dark(#000080, #cc7832)); }
 
 /* ========== Inline Controls (using ::before pseudo-elements) ========== */
 
@@ -464,24 +469,24 @@
 .json-color:hover::before,
 .json-boolean:hover::before {
   transform: translateY(-50%) scale(1.2);
-  border-color: var(--control-color, #000080);
+  border-color: var(--geojson-editor-control-color, light-dark(#000080, #cc7832));
 }
 
 /* Color swatch specific styles */
 .json-color::before {
   background-color: var(--swatch-color);
-  border: 1px solid var(--json-punct, #a9b7c6);
+  border: 1px solid var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6));
 }
 
 /* Boolean checkbox specific styles */
 .json-boolean::before {
-  border: 1.5px solid var(--control-border, #c0c0c0);
+  border: 1.5px solid var(--geojson-editor-control-border, light-dark(#c0c0c0, #5a5a5a));
   background: transparent;
 }
 .json-bool-true::before {
   content: '✔';
-  border-color: var(--control-color, #000080);
-  color: var(--control-color, #000080);
+  border-color: var(--geojson-editor-control-color, light-dark(#000080, #cc7832));
+  color: var(--geojson-editor-control-color, light-dark(#000080, #cc7832));
   font-size: 8px;
   display: flex;
   align-items: center;
@@ -496,7 +501,7 @@
   left: 0;
   top: 3px;
   font-size: 10px;
-  color: var(--control-color, #000080);
+  color: var(--geojson-editor-control-color, light-dark(#000080, #cc7832));
   opacity: 0.6;
   cursor: pointer;
   z-index: 1;

package/src/geojson-editor.ts

@@ -4,8 +4,7 @@ import type { Feature } from 'geojson';
 
 // ========== Imports from extracted modules ==========
 import type {
-  SetOptions,
-  ThemeSettings
+  SetOptions
 } from './types.js';
 
 import type {
@@ -35,19 +34,18 @@ import {
   RE_BRACKET_POS,
   RE_IS_WORD_CHAR,
   RE_ATTR_AND_BOOL_VALUE,
-  RE_TO_KEBAB,
   RE_OPEN_BRACES,
   RE_CLOSE_BRACES,
   RE_OPEN_BRACKETS,
   RE_CLOSE_BRACKET
 } from './constants.js';
 
-import { createElement, countBrackets, parseSelectorToHostRule } from './utils.js';
+import { createElement, countBrackets } from './utils.js';
 import { validateGeoJSON, normalizeToFeatures } from './validation.js';
 import { highlightSyntax, namedColorToHex, isNamedColor } from './syntax-highlighter.js';
 
 // Re-export public types
-export type { SetOptions, ThemeConfig, ThemeSettings } from './types.js';
+export type { SetOptions } from './types.js';
 
 // Alias for minification
 const _ce = createElement;
@@ -94,8 +92,6 @@ class GeoJsonEditor extends HTMLElement {
   private renderTimer: ReturnType<typeof setTimeout> | undefined = undefined;
   private inputTimer: ReturnType<typeof setTimeout> | undefined = undefined;
 
-  // ========== Theme ==========
-  themes: ThemeSettings = { dark: {}, light: {} };
 
   // ========== Undo/Redo History ==========
   private _undoStack: EditorSnapshot[] = [];
@@ -116,6 +112,7 @@ class GeoJsonEditor extends HTMLElement {
   private _contextMapFirstLine: string | undefined = undefined;
   private _contextMapLastLine: string | undefined = undefined;
   private _errorLinesCache: Set<number> | null = null;
+  private _lastCursorFeatureIndex: number | null = null; // For current-feature event deduplication
 
   // ========== Cached DOM Elements ==========
   private _viewport: HTMLElement | null = null;
@@ -440,7 +437,7 @@ class GeoJsonEditor extends HTMLElement {
 
   // ========== Observed Attributes ==========
   static get observedAttributes() {
-    return ['readonly', 'value', 'placeholder', 'dark-selector', 'internal-add-shortcut'];
+    return ['readonly', 'value', 'placeholder', 'internal-add-shortcut'];
   }
 
   // ========== Lifecycle ==========
@@ -449,7 +446,6 @@ class GeoJsonEditor extends HTMLElement {
     this._cacheElements();
     this.setupEventListeners();
     this.updatePrefixSuffix();
-    this.updateThemeCSS();
 
     if (this.value) {
       this.setValue(this.value);
@@ -484,9 +480,6 @@ class GeoJsonEditor extends HTMLElement {
       case 'placeholder':
         this.updatePlaceholderContent();
         break;
-      case 'dark-selector':
-        this.updateThemeCSS();
-        break;
     }
   }
 
@@ -697,12 +690,16 @@ class GeoJsonEditor extends HTMLElement {
       editorWrapper.classList.add('focused');
       this._invalidateRenderCache(); // Force re-render to show cursor
       this.scheduleRender();
+      // Emit current feature on focus (force to always emit on focus gain)
+      this._emitCurrentFeature(true);
     });
 
     hiddenTextarea.addEventListener('blur', () => {
       editorWrapper.classList.remove('focused');
       this._invalidateRenderCache(); // Force re-render to hide cursor
       this.scheduleRender();
+      // Emit null on blur
+      this._emitCurrentFeatureNull();
     });
 
     // Scroll handling
@@ -1324,11 +1321,16 @@ class GeoJsonEditor extends HTMLElement {
     
     linesContainer.innerHTML = '';
     linesContainer.appendChild(fragment);
-    
+
     // Render gutter with same range
     this.renderGutter(startIndex, endIndex);
+
+    // Emit current-feature event if feature changed (only when editor is focused)
+    if (this._editorWrapper?.classList.contains('focused')) {
+      this._emitCurrentFeature();
+    }
   }
-  
+
   /**
    * Insert cursor element at the specified column position
    * Uses absolute positioning to avoid affecting text layout
@@ -2757,7 +2759,14 @@ class GeoJsonEditor extends HTMLElement {
     // Try to parse as GeoJSON and normalize
     let pastedFeatureCount = 0;
     try {
-      const parsed = JSON.parse(text);
+      // First try direct parse (single Feature, Feature[], or FeatureCollection)
+      let parsed;
+      try {
+        parsed = JSON.parse(text);
+      } catch {
+        // If direct parse fails, try wrapping with [] (for "feature, feature" format from editor copy)
+        parsed = JSON.parse('[' + text + ']');
+      }
       const features = normalizeToFeatures(parsed);
       pastedFeatureCount = features.length;
       // Valid GeoJSON - insert formatted features
@@ -3532,6 +3541,51 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
+  /**
+   * Emit current-feature event when cursor moves to a different feature
+   * Only emits when the feature changes (not on every cursor move)
+   * @param force - If true, emit even if feature hasn't changed (used on focus)
+   */
+  private _emitCurrentFeature(force: boolean = false): void {
+    const featureIndex = this._getFeatureIndexForLine(this.cursorLine);
+
+    // Only emit if feature changed (unless forced)
+    if (!force && featureIndex === this._lastCursorFeatureIndex) return;
+    this._lastCursorFeatureIndex = featureIndex;
+
+    if (featureIndex === -1) {
+      // Cursor is not in a feature
+      this.dispatchEvent(new CustomEvent('current-feature', {
+        detail: null,
+        bubbles: true,
+        composed: true
+      }));
+    } else {
+      // Get the feature at cursor
+      const features = this._parseFeatures();
+      const feature = features[featureIndex] || null;
+
+      this.dispatchEvent(new CustomEvent('current-feature', {
+        detail: feature,
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+
+  /**
+   * Emit current-feature with null (used on blur)
+   * Always emits to ensure map is cleared when editor loses focus
+   */
+  private _emitCurrentFeatureNull(): void {
+    this._lastCursorFeatureIndex = null;
+    this.dispatchEvent(new CustomEvent('current-feature', {
+      detail: null,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   // ========== UI Updates ==========
 
   updateReadonly() {
@@ -3573,74 +3627,6 @@ class GeoJsonEditor extends HTMLElement {
     if (this._editorSuffix) this._editorSuffix.textContent = this.suffix;
   }
 
-  // ========== Theme ==========
-  
-  updateThemeCSS() {
-    const darkSelector = this.getAttribute('dark-selector') || '.dark';
-    const darkRule = parseSelectorToHostRule(darkSelector);
-
-    let themeStyle = this._id('theme-styles') as HTMLStyleElement;
-    if (!themeStyle) {
-      themeStyle = _ce('style') as HTMLStyleElement;
-      themeStyle.id = 'theme-styles';
-      this.shadowRoot!.insertBefore(themeStyle, this.shadowRoot!.firstChild);
-    }
-    
-    const darkDefaults = {
-      bgColor: '#2b2b2b',
-      textColor: '#a9b7c6',
-      caretColor: '#bbb',
-      gutterBg: '#313335',
-      gutterBorder: '#3c3f41',
-      gutterText: '#606366',
-      jsonKey: '#9876aa',
-      jsonString: '#6a8759',
-      jsonNumber: '#6897bb',
-      jsonBoolean: '#cc7832',
-      jsonNull: '#cc7832',
-      jsonPunct: '#a9b7c6',
-      jsonError: '#ff6b68',
-      controlColor: '#cc7832',
-      controlBg: '#3c3f41',
-      controlBorder: '#5a5a5a',
-      geojsonKey: '#9876aa',
-      geojsonType: '#6a8759',
-      geojsonTypeInvalid: '#ff6b68',
-      jsonKeyInvalid: '#ff6b68'
-    };
-    
-    RE_TO_KEBAB.lastIndex = 0;
-    const toKebab = (str: string) => str.replace(RE_TO_KEBAB, '-$1').toLowerCase();
-    const generateVars = (obj: Record<string, string | undefined>) => Object.entries(obj)
-      .filter((entry): entry is [string, string] => entry[1] !== undefined)
-      .map(([k, v]) => `--${toKebab(k)}: ${v};`)
-      .join('\n        ');
-    
-    const lightVars = generateVars(this.themes.light as Record<string, string | undefined> || {});
-    const darkTheme = { ...darkDefaults, ...this.themes.dark };
-    const darkVars = generateVars(darkTheme as Record<string, string | undefined>);
-    
-    let css = lightVars ? `:host {\n        ${lightVars}\n      }\n` : '';
-    css += `${darkRule} {\n        ${darkVars}\n      }`;
-    
-    themeStyle.textContent = css;
-  }
-
-  setTheme(theme: ThemeSettings): void {
-    if (theme.dark) this.themes.dark = { ...this.themes.dark, ...theme.dark };
-    if (theme.light) this.themes.light = { ...this.themes.light, ...theme.light };
-    this.updateThemeCSS();
-  }
-
-  resetTheme(): void {
-    this.themes = { dark: {}, light: {} };
-    this.updateThemeCSS();
-  }
-
-  getTheme(): ThemeSettings {
-    return { ...this.themes };
-  }
-
   /**
    * Find all collapsible ranges using the mappings built by _rebuildNodeIdMappings
    * This method only READS the existing mappings, it doesn't create new IDs
@@ -4066,6 +4052,10 @@ class GeoJsonEditor extends HTMLElement {
     this.lines = [];
     this.collapsedNodes.clear();
     this.hiddenFeatures.clear();
+    this.cursorLine = 0;
+    this.cursorColumn = 0;
+    this.selectionStart = null;
+    this.selectionEnd = null;
     this.updateModel();
     this.scheduleRender();
     this.updatePlaceholderVisibility();

package/src/types.ts

@@ -16,33 +16,3 @@ export interface SetOptions {
    */
   collapsed?: string[] | ((feature: Feature | null, index: number) => string[]);
 }
-
-/** Theme configuration */
-export interface ThemeConfig {
-  bgColor?: string;
-  textColor?: string;
-  caretColor?: string;
-  gutterBg?: string;
-  gutterBorder?: string;
-  gutterText?: string;
-  jsonKey?: string;
-  jsonString?: string;
-  jsonNumber?: string;
-  jsonBoolean?: string;
-  jsonNull?: string;
-  jsonPunct?: string;
-  jsonError?: string;
-  controlColor?: string;
-  controlBg?: string;
-  controlBorder?: string;
-  geojsonKey?: string;
-  geojsonType?: string;
-  geojsonTypeInvalid?: string;
-  jsonKeyInvalid?: string;
-}
-
-/** Theme settings for dark and light modes */
-export interface ThemeSettings {
-  dark?: ThemeConfig;
-  light?: ThemeConfig;
-}

package/themes/github.css

@@ -0,0 +1,43 @@
+/**
+ * GitHub Theme for @softwarity/geojson-editor
+ *
+ * Clean theme inspired by GitHub's code styling.
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="themes/github.css">
+ *   <geojson-editor></geojson-editor>
+ */
+
+:root {
+  /* Editor background and text */
+  --geojson-editor-bg-color: light-dark(#ffffff, #0d1117);
+  --geojson-editor-text-color: light-dark(#24292f, #c9d1d9);
+  --geojson-editor-caret-color: light-dark(#24292f, #c9d1d9);
+
+  /* Gutter (line numbers area) */
+  --geojson-editor-gutter-bg: light-dark(#f6f8fa, #161b22);
+  --geojson-editor-gutter-border: light-dark(#d0d7de, #30363d);
+  --geojson-editor-gutter-text: light-dark(#8c959f, #6e7681);
+
+  /* JSON syntax highlighting */
+  --geojson-editor-json-key: light-dark(#0550ae, #79c0ff);
+  --geojson-editor-json-string: light-dark(#0a3069, #a5d6ff);
+  --geojson-editor-json-number: light-dark(#0550ae, #79c0ff);
+  --geojson-editor-json-boolean: light-dark(#cf222e, #ff7b72);
+  --geojson-editor-json-punct: light-dark(#24292f, #c9d1d9);
+  --geojson-editor-json-error: light-dark(#cf222e, #ff7b72);
+
+  /* GeoJSON-specific */
+  --geojson-editor-geojson-key: light-dark(#8250df, #d2a8ff);
+  --geojson-editor-geojson-type: light-dark(#116329, #7ee787);
+  --geojson-editor-geojson-type-invalid: light-dark(#cf222e, #ff7b72);
+
+  /* Controls (checkboxes, color swatches) */
+  --geojson-editor-control-color: light-dark(#0550ae, #79c0ff);
+  --geojson-editor-control-bg: light-dark(#f6f8fa, #21262d);
+  --geojson-editor-control-border: light-dark(#d0d7de, #30363d);
+
+  /* Selection and errors */
+  --geojson-editor-selection-color: light-dark(rgba(5, 80, 174, 0.2), rgba(56, 139, 253, 0.3));
+  --geojson-editor-error-color: light-dark(#cf222e, #ff7b72);
+}

package/themes/monokai.css

@@ -0,0 +1,43 @@
+/**
+ * Monokai Theme for @softwarity/geojson-editor
+ *
+ * Classic dark theme inspired by Monokai color scheme.
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="themes/monokai.css">
+ *   <geojson-editor></geojson-editor>
+ */
+
+:root {
+  /* Editor background and text */
+  --geojson-editor-bg-color: light-dark(#fafafa, #272822);
+  --geojson-editor-text-color: light-dark(#49483e, #f8f8f2);
+  --geojson-editor-caret-color: light-dark(#49483e, #f8f8f0);
+
+  /* Gutter (line numbers area) */
+  --geojson-editor-gutter-bg: light-dark(#f0f0f0, #3e3d32);
+  --geojson-editor-gutter-border: light-dark(#e0e0e0, #49483e);
+  --geojson-editor-gutter-text: light-dark(#999, #75715e);
+
+  /* JSON syntax highlighting */
+  --geojson-editor-json-key: light-dark(#f92672, #f92672);
+  --geojson-editor-json-string: light-dark(#718c00, #e6db74);
+  --geojson-editor-json-number: light-dark(#ae81ff, #ae81ff);
+  --geojson-editor-json-boolean: light-dark(#66d9ef, #66d9ef);
+  --geojson-editor-json-punct: light-dark(#49483e, #f8f8f2);
+  --geojson-editor-json-error: light-dark(#f92672, #f92672);
+
+  /* GeoJSON-specific */
+  --geojson-editor-geojson-key: light-dark(#f92672, #a6e22e);
+  --geojson-editor-geojson-type: light-dark(#718c00, #e6db74);
+  --geojson-editor-geojson-type-invalid: light-dark(#f92672, #f92672);
+
+  /* Controls (checkboxes, color swatches) */
+  --geojson-editor-control-color: light-dark(#66d9ef, #66d9ef);
+  --geojson-editor-control-bg: light-dark(#e8e8e8, #3e3d32);
+  --geojson-editor-control-border: light-dark(#c0c0c0, #75715e);
+
+  /* Selection and errors */
+  --geojson-editor-selection-color: light-dark(rgba(174, 129, 255, 0.2), rgba(174, 129, 255, 0.3));
+  --geojson-editor-error-color: light-dark(#f92672, #f92672);
+}