Theming Guide

Customize the appearance of Code Nexus components with themes and styling options

Overview

All Code Nexus components support theming through the theme property. You can choose between light and dark themes, and customize various colors to match your application's design.

Note: Theme settings are applied consistently across all Code Nexus components, including NexusPanel, NexusSnippet, and CodeNexus.

Basic Theme Options

By default, all components use the dark theme. You can switch to light theme by setting dark: false in the theme property.

Dark Theme (Default)

HTML

// Using dark theme (default)
<nexus-panel
  type="js"
  content="console.log('Hello from Code Nexus');"
/>

Light Theme

HTML

// Using light theme
<nexus-panel
  type="js"
  content="console.log('Hello from Code Nexus');"
  theme='{ "dark": false }'
/>

Custom Colors

You can customize the color palette by providing a colors object in the theme property. Code Nexus provides a default color set that you can extend or override.

Custom Theme Colors

// Custom theme colors
import { color } from 'code-nexus';

// Create a custom color palette
const customColors = {
  ...color,
  background: '#1a1a2e',
  cursor: '#ff6b6b',
  malibu: '#4cc9f0',
  sage: '#7bf1a8',
  violet: '#ff9ef5',
  coral: '#ff6b6b'
};

// Apply custom colors
<nexus-panel
  type="js"
  content="console.log('Custom themed code');"
  theme='{ "colors": customColors, "dark": true }'
/>

Available Color Properties

Background Colors

background: Main editor background
darkBackground: Panels and gutters
highlightBackground: Active line highlight
tooltipBackground: Tooltips and popups

UI Elements

cursor: Editor cursor color
selection: Selected text background
ivory: Default text color
stone: Secondary text (line numbers)

Syntax Highlighting

violet: Keywords, operators
malibu: Functions, methods
sage: Strings
coral: Variables, properties
chalky: Classes, types
whiskey: Numbers, constants
cyan: Special tokens

Theme Examples

Here are some examples of different themes applied to the same code:

Midnight Ocean Theme

A deep blue and teal theme for night-time coding:

Before (Default Theme)

After (Midnight Ocean Theme)

Code to create this theme:

// Midnight Ocean Theme
// import { color } from 'code-nexus'; // Original import

const color = { /* Default color object defined above */ };

const midnightOceanTheme = {
  ...color,
  // Background colors
  background: '#0f1b33',
  darkBackground: '#0a142a',
  highlightBackground: '#1a2e4c',
  tooltipBackground: '#102040',
  
  // UI elements
  cursor: '#4cc9f0',
  selection: '#213b5c',
  ivory: '#e2e8f0',
  stone: '#94a3b8',
  
  // Syntax highlighting
  violet: '#ff9ef5',    // Keywords, operators
  malibu: '#4cc9f0',    // Functions, methods
  sage: '#7bf1a8',      // Strings
  coral: '#ff6b6b',     // Variables, properties
  chalky: '#e2e8f0',    // Classes, types
  whiskey: '#ffd166',   // Numbers, constants
  cyan: '#38e9e0',      // Special tokens
};

// Use the theme
<NexusPanel
  type="js"
  content="function calculateTotal(items) {
  return items.reduce((sum, item) => {
    return sum + item.price ..."
  theme={{ colors: midnightOceanTheme, dark: true }}
/>

React Integration

When using the React components, you can pass the theme as an object instead of a JSON string:

React Component with Custom Theme

// React component with custom theme
import { NexusPanel } from 'code-nexus-react';
import { color } from 'code-nexus';

// Create custom colors
const customColors = {
  ...color,
  background: '#0f172a', // Dark blue background
  selection: '#334155',
  cursor: '#38bdf8'
};

function CodeEditor() {
  return (
    <NexusPanel
      type="js"
      content="function greet() { return 'Hello, developer!'; }"
      theme={{ colors: customColors, dark: true }}
    />
  );
}

Best Practices

Maintain good contrast ratios between background colors and text for readability
Use complementary colors for syntax highlighting to make different code elements distinct
Consider creating theme variables to reuse across your application for consistency
Test your custom themes with different types of code to ensure all elements are visible

For more detailed information about using Code Nexus components, see theComponents documentation.