Night Shift theme • Jean Tinland

Showcase

Night Shift theme across various code examples as it appears in VSCode. Render may differ in Zed or other editors/applications.

A React.js and JSX optimized theme

Night Shift theme primarily focuses on providing a clear distinction between markup and logic within your code base.

Your code logic in a blink of an eye

Identify the logical part of your components thanks to a sober and elegant color palette: yellow, blue and purple.

Markup made easy to read

JSX templating sections of your components are styled with calming and less vibrant colors: soft reds, greens, and blues. This choice ensures that the structure of your components is easily distinguishable without overwhelming your eyes.

import { useState, useCallback } from 'react';

interface TaskItem {
  id: number;
  title: string;
  completed: boolean;
}

export default function TaskManager() {
  const [tasks, setTasks] = useState<TaskItem[]>([]);
  const [input, setInput] = useState('');

  const addTask = useCallback(() => {
    if (!input.trim()) return 
    setTasks(prev => [
      ...prev,
      { id: Date.now(), title: input, completed: false }
    ]);
    setInput('');
  }, [input]);

  const toggleTask = useCallback((id: number) => {
    setTasks(prev =>
      prev.map(task =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  }, []);

  const removeTask = (id: number) => {
    setTasks(prev => prev.filter(task => task.id !== id));
  };

  return (
    <div className="task-manager">
      <h1>Task Manager</h1>
      
      <div className="input-group">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && addTask()}
          placeholder="Add a new task..."
        />
        <button onClick={addTask}>Add Task</button>
      </div>

      <ul className="task-list">
        {tasks.map(task => (
          <li key={task.id} className={task.completed ? 'completed' : ''}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleTask(task.id)}
            />
            <span>{task.title}</span>
            <button onClick={() => removeTask(task.id)}>Delete</button>
          </li>
        ))}
      </ul>

      {tasks.length === 0 && <p>No tasks yet!</p>}
    </div>
  );
}

CSS made simple

Night Shift theme also tries to stay simple with CSS code styling. With its carefully selected color scheme, it highlights tag and class selectors with a nice blue and attributes have the same red color they are displayed with in markup. Property names and units are a bit more discreet with a soft white color. A pastel green color decorates values.

/* Theme Variables */
:root {
  --primary-color: #6366f1;
  --secondary-color: #8b5cf6;
  --text-dark: #1f2937;
  --text-light: #f3f4f6;
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --border-color: #e5e7eb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-dark);
  line-height: 1.6;
}

/* Card Component */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Button Styles */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn.btn-primary:hover {
  background-color: #4f46e5;
  box-shadow: var(--shadow-md);
}

.btn.btn-primary:active {
  transform: scale(0.98);
}

.btn.btn-secondary {
  background-color: var(--secondary-color);
  color: white;
}

.btn.btn-secondary:hover {
  background-color: #7c3aed;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Animation Keyframes */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive Grid */
.grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-dark: #f3f4f6;
    --border-color: #374151;
  }
}

@media (prefers-color-scheme: dark) {
  .card {
    background: var(--bg-secondary);
  }
}

HTML clarity

In HTML code, Night Shift theme uses a vibrant blue to highlight tags, making the structure of your markup easily identifiable. Attributes are styled in a soft red, while values are presented in a calming blue. This thoughtful color scheme ensures that your HTML code remains clear and readable.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Design System</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header">
    <nav class="navbar">
      <div class="navbar-brand">
        <a href="/" class="logo">Brand</a>
      </div>
      <ul class="navbar-menu">
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-content">
        <h1>Welcome to Our Platform</h1>
        <p class="hero-subtitle">Build amazing things with modern tools</p>
        <div class="cta-group">
          <button class="btn btn-primary">Get Started</button>
          <button class="btn btn-secondary">Learn More</button>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features">
      <h2>Core Features</h2>
      <div class="features-grid">
        <article class="feature-card">
          <div class="feature-icon">🚀</div>
          <h3>Fast Performance</h3>
          <p>Optimized for speed and efficiency with minimal overhead</p>
        </article>
        <article class="feature-card">
          <div class="feature-icon">🔒</div>
          <h3>Secure</h3>
          <p>Enterprise-grade security with end-to-end encryption</p>
        </article>
        <article class="feature-card">
          <div class="feature-icon">📱</div>
          <h3>Responsive</h3>
          <p>Looks great on all devices and screen sizes</p>
        </article>
      </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="pricing">
      <h2>Pricing Plans</h2>
      <div class="pricing-cards">
        <div class="pricing-card">
          <h3>Starter</h3>
          <p class="price"><span class="currency">$</span>29<span class="period">/month</span></p>
          <ul class="features-list">
            <li>✓ 5 Projects</li>
            <li>✓ 100GB Storage</li>
            <li>✓ Community Support</li>
          </ul>
          <button class="btn btn-primary" disabled>Coming Soon</button>
        </div>
        <div class="pricing-card featured">
          <h3>Professional</h3>
          <p class="price"><span class="currency">$</span>79<span class="period">/month</span></p>
          <ul class="features-list">
            <li>✓ Unlimited Projects</li>
            <li>✓ 1TB Storage</li>
            <li>✓ Priority Support</li>
          </ul>
          <button class="btn btn-primary">Subscribe Now</button>
        </div>
        <div class="pricing-card">
          <h3>Enterprise</h3>
          <p class="price">Custom</p>
          <ul class="features-list">
            <li>✓ Everything in Pro</li>
            <li>✓ Unlimited Storage</li>
            <li>✓ 24/7 Dedicated Support</li>
          </ul>
          <button class="btn btn-secondary">Contact Sales</button>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
      <h2>Get in Touch</h2>
      <form class="contact-form">
        <div class="form-group">
          <label for="name">Full Name</label>
          <input type="text" id="name" name="name" required placeholder="John Doe">
        </div>
        <div class="form-group">
          <label for="email">Email Address</label>
          <input type="email" id="email" name="email" required placeholder="john@example.com">
        </div>
        <div class="form-group">
          <label for="subject">Subject</label>
          <select id="subject" name="subject">
            <option value="">Select a subject</option>
            <option value="sales">Sales Inquiry</option>
            <option value="support">Technical Support</option>
            <option value="other">Other</option>
          </select>
        </div>
        <div class="form-group">
          <label for="message">Message</label>
          <textarea id="message" name="message" rows="5" required placeholder="Your message here..."></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Send Message</button>
      </form>
    </section>
  </main>

  <footer class="footer">
    <div class="footer-content">
      <div class="footer-section">
        <h4>Company</h4>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="#careers">Careers</a></li>
        </ul>
      </div>
      <div class="footer-section">
        <h4>Legal</h4>
        <ul>
          <li><a href="#privacy">Privacy Policy</a></li>
          <li><a href="#terms">Terms of Service</a></li>
        </ul>
      </div>
      <div class="footer-section">
        <h4>Follow</h4>
        <ul>
          <li><a href="#twitter">Twitter</a></li>
          <li><a href="#linkedin">LinkedIn</a></li>
          <li><a href="#github">GitHub</a></li>
        </ul>
      </div>
    </div>
    <p class="footer-copyright">&copy; 2025 Company. All rights reserved.</p>
  </footer>
</body>
</html>

Other languages supported

Besides TypeScript, CSS and HTML, Night Shift theme supports various other programming languages including JavaScript, PHP, and Python. Others will also probably work well but haven't been tested yet.

Configuration

Installation

Launch VS Code Quick Open (⌘+p or ctrl+p), paste the following command, then press enter:

ext install jean.desaturated

Or install this theme from the extension panel : search for "Night Shift Theme".

At last, you can find this theme in the Visual Studio Code Marketplace.

Setting up Night Shift theme

Night Shift theme tries to stay as sober as possible and only lightly uses bold and italic texts.

However, if you want to get rid of all of these, you can add this configuration to your settings.json file.

"editor.tokenColorCustomizations": {
  "textMateRules": [
    // Removes bold
    {
      "name": "Function names",
      "scope": "entity.name.function",
      "settings": {
        "fontStyle": "",
      }
    },
    // Removes italic
    {
      "name": "Comments",
      "scope": "comment",
      "settings": {
        "fontStyle": "",
      }
    }
  ]
},