Day Shift theme • Jean Tinland

Showcase

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

Clarity in every component

Day Shift brings warm, natural tones to your TypeScript and React code. Logic stands out in golden yellow and airy blue, while JSX markup uses gentle reds and greens, so structure and logic never blur together.

Built for bright environments

Unlike dark themes that can feel harsh when the sun is out, Day Shift is tuned for well-lit spaces. High contrast on a clean white background keeps your eyes comfortable across long sessions.

A palette rooted in nature

Every color draws from a coherent family: sunrise yellows, coastal blues, forest greens, and soft corals. The result is a theme that feels alive without being distracting.

import { useState, useEffect, useRef } from 'react';

interface Note {
  id: string;
  content: string;
  createdAt: Date;
  pinned: boolean;
}

function useNotes(initialNotes: Note[] = []) {
  const [notes, setNotes] = useState<Note[]>(initialNotes);

  const addNote = (content: string): void => {
    const note: Note = {
      id: crypto.randomUUID(),
      content,
      createdAt: new Date(),
      pinned: false,
    };
    setNotes(prev => [note, ...prev]);
  };

  const togglePin = (id: string): void => {
    setNotes(prev =>
      prev.map(note =>
        note.id === id ? { ...note, pinned: !note.pinned } : note
      )
    );
  };

  const remove = (id: string): void => {
    setNotes(prev => prev.filter(note => note.id !== id));
  };

  const sorted = [...notes].sort((a, b) =>
    a.pinned === b.pinned ? 0 : a.pinned ? -1 : 1
  );

  return { notes: sorted, addNote, togglePin, remove };
}

export default function NoteBoard() {
  const { notes, addNote, togglePin, remove } = useNotes();
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const value = inputRef.current?.value.trim();
    if (value) {
      addNote(value);
      if (inputRef.current) inputRef.current.value = '';
    }
  };

  return (
    <div className="note-board">
      <h1>My Notes</h1>
      <form onSubmit={handleSubmit} className="note-form">
        <input ref={inputRef} placeholder="Write a note..." />
        <button type="submit">Add</button>
      </form>
      <ul className="note-list">
        {notes.map(note => (
          <li key={note.id} className={note.pinned ? 'pinned' : ''}>
            <p>{note.content}</p>
            <div className="actions">
              <button onClick={() => togglePin(note.id)}>
                {note.pinned ? 'Unpin' : 'Pin'}
              </button>
              <button onClick={() => remove(note.id)}>Delete</button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Styling, styled

Day Shift makes CSS a pleasure to write. Custom properties shine in yellow, selectors are given a clear blue, and values are adorned in soft green. Property names stay understated in deep navy, letting the structure breathe.

/* Design Tokens */
:root {
  --color-sunrise: #e0b972;
  --color-sky: #6db3ce;
  --color-leaf: #8fc8bb;
  --color-bloom: #ad82cb;
  --color-coral: #e78482;
  --color-ink: #1e2737;
  --color-mist: #98a8c5;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --radius: 8px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Layout */
.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  background-color: #fff;
  color: var(--color-ink);
}

/* Card component */
.card {
  background: #fafbfc;
  border: 1px solid #e1e4e8;
  border-radius: var(--radius);
  padding: var(--space-lg);
  transition: box-shadow var(--transition);
}

.card:hover {
  box-shadow: 0 4px 16px rgba(30, 39, 55, 0.1);
}

.card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.card__badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-sunrise);
  color: #fff;
  font-size: 0.75rem;
  border-radius: calc(var(--radius) / 2);
  font-weight: 500;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid #e1e4e8;
}

.nav__link {
  color: var(--color-mist);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}

.nav__link:hover,
.nav__link.active {
  color: var(--color-ink);
}

Markup that breathes

HTML reads like a clean document under Day Shift. Tags are highlighted in a warm blue, attributes softened in coral, and string values carry a calm green. The hierarchy of your markup is immediately apparent at a glance.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day Shift - Light Theme Demo</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="tokens.css">
  <link rel="stylesheet" href="layout.css">
</head>
<body class="page">

  <header class="site-header">
    <nav class="nav" aria-label="Main navigation">
      <a href="/" class="nav__logo">Brand</a>
      <ul class="nav__links" role="list">
        <li><a href="/features" class="nav__link active">Features</a></li>
        <li><a href="/pricing" class="nav__link">Pricing</a></li>
        <li><a href="/docs" class="nav__link">Docs</a></li>
      </ul>
      <a href="/get-started" class="btn btn--primary">Get started →</a>
    </nav>
  </header>

  <main>
    <!-- Hero -->
    <section class="hero" aria-labelledby="hero-title">
      <h1 id="hero-title">
        Code in the <mark>daylight</mark>
      </h1>
      <p class="hero__subtitle">
        A soft, readable light theme built for long sessions.
        Crafted with warmth, no glare and no strain.
      </p>
      <div class="hero__actions">
        <a href="/download" class="btn btn--primary">Download now</a>
        <a href="/demo" class="btn btn--ghost">See it in action</a>
      </div>
    </section>

    <!-- Feature Grid -->
    <section class="features" aria-labelledby="features-title">
      <h2 id="features-title">Why Day Shift?</h2>
      <div class="features__grid">
        <article class="card">
          <h3 class="card__title">Warm tones</h3>
          <p>Golden yellows and soft blues reduce eye strain in bright rooms.</p>
          <span class="card__badge">Accessibility</span>
        </article>
        <article class="card">
          <h3 class="card__title">Sharp contrast</h3>
          <p>Deep navy text on clean white for crystal-clear readability.</p>
          <span class="card__badge">Readability</span>
        </article>
        <article class="card">
          <h3 class="card__title">Consistent palette</h3>
          <p>Every token color is part of the same harmonious family.</p>
          <span class="card__badge">Design</span>
        </article>
      </div>
    </section>
  </main>

</body>
</html>

More languages, same warmth

Beyond TypeScript, CSS and HTML, Day Shift supports JavaScript, Python, PHP, and many more. Its carefully tested token mappings hold up across any language you reach for.

Color Palette

A harmonious set of warm, natural tones designed to keep your code readable and your eyes comfortable under daylight.

Interface

Deep#141b27

Darkest#1b222d

Background#1e2737

Border#39465e

Muted#74829b

Lighter#98a8c5

Warm White#fff9ee

White#f5f5f5

Syntax, light & dark variants

Red light#fb918f

Red#e78482

Green light#a1ded0

Green#8fc8bb

Yellow light#e0b972

Yellow#d1ab66

Blue light#78c3df

Blue#6db3ce

Magenta light#bf91e0

Magenta#ad82cb

Cyan light#35d8d9

Cyan#2fc2c3

Configuration

Installation

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

ext install jean.day-shift-theme

Or install directly from the extension panel: search for "Day Shift Theme".

You can also find it in the Visual Studio Code Marketplace.

Fine-tuning Day Shift

Day Shift uses bold sparingly for keywords and italic for comments, keeping the visual weight light and clean.

If you prefer a fully flat style, you can disable font styles by adding this snippet to your settings.json.

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