Dark Mode Test

This is a dark mode test post with various content elements. It should look great in both light and dark modes.

Code Blocks

Here’s some JavaScript:

function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

Some CSS:

:root {
  --page-bg: #161b1a;
  --code-color: #d8e0df;
}

@media (prefers-color-scheme: dark) {
  body { background: var(--page-bg); }
}

A bash command:

npm run build && npm run preview

Inline Code and Links

Use npm run dev to start the dev server. Check the Astro docs for more info.

Blockquote

This is a blockquote. It should have a colored left border and readable text in both modes.

Lists

Unordered:

• First item with inline code
• Second item with bold text
• Third item with italic text

Ordered:

1. Step one
2. Step two
3. Step three

Keyboard Shortcuts

Press Cmd + Shift + P to open the command palette.

Bold and Italic

This paragraph has bold text, italic text, and bold italic text to verify color contrast in dark mode.

That’s all the elements. Toggle your system appearance to verify everything looks correct.