Nanolight Dark Theme Demo

Phase 6 Dark Theme Design:

Base font: Courier New, monospace (14px, 1.4 line height)
High contrast colors for dark background
Keywords: #ff7b72 | Strings: #a5d6ff | Numbers: #79c0ff
Comments: #8b949e (italic) | Operators: #ff7b72
Tags: #7ee787 | Attribute names: #ffa657 | Attribute values: #a5d6ff

JavaScript Example

// Modern JavaScript features demonstration
const apiConfig = {
  baseUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3
};

/* Async function with error handling */
async function fetchUserData(userId) {
  try {
    const response = await fetch(`${apiConfig.baseUrl}/users/${userId}`);
    
    if (!response.ok) {
      throw new Error("Failed to fetch user data");
    }
    
    return await response.json();
  } catch (error) {
    console.error("API Error:", error);
    return null;
  }
}

HTML Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
    <script>
      // JavaScript inside HTML
      const config = {
        version: "1.0.0",
        debug: true
      };
    </script>
  </head>
  <body>
    <!-- Main content area -->
    <div class="container" id="main-content">
      <h1>Welcome</h1>
      <p>This is a sample page.</p>
    </div>
  </body>
</html>

Mixed Content Example

<script type="module">
  // ES6 module with various token types
  import { createElement } from './utils.js';
  
  const numbers = [1, 2.5, 0xFF, 1e10];
  const operators = ['+', '-', '*', '/', '==', '==='];
  
  /* Block comment example */
  if (window.location.hostname === 'localhost') {
    console.log('Development mode');
  }
</script>