Theme Showcase

This page demonstrates all the available themes in the blog. Use the theme switcher in the header to try different themes!

Code Examples

Here are some code examples to see how syntax highlighting looks with different themes:

JavaScript Example

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci of 10 is: ${result}`);

Hacker Theme Test

Try switching to the Hacker theme to see the black background with green text and monospace font:

# This should have a black background with green text in hacker theme
echo "Hello, World!"
ls -la
cd /home/user

Python Example

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

# Example usage
numbers = [3, 6, 8, 10, 1, 2, 1]
sorted_numbers = quicksort(numbers)
print(f"Sorted: {sorted_numbers}")

CSS Example

.theme-switcher {
  position: relative;
  display: inline-block;
}

.theme-switcher button {
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-switcher button:hover {
  background: var(--muted);
}

Available Themes

The following themes are available:

• Light: Clean and bright theme
• Dark: Classic dark theme
• Gruvbox: Retro groove color scheme
• GitHub Dark: GitHub’s dark theme
• Dark One: VS Code Dark+ inspired
• Hacker: Classic hacker terminal theme (with monospace font)
• Dracula: Dark theme with purple accents
• Monokai: Popular Sublime Text theme
• Nord: Arctic-inspired color palette
• Solarized Dark: Carefully designed dark theme
• Solarized Light: Carefully designed light theme

Features

• Font Support: The Hacker theme automatically switches to monospace fonts
• Code Highlighting: All themes include matching syntax highlighting for code blocks
• Persistent: Your theme choice is saved in localStorage
• System Integration: Respects system dark/light mode preferences
• Accessibility: All themes maintain proper contrast ratios

Try switching between themes using the theme switcher in the header to see how the entire blog adapts to your chosen theme!