Skip to main content

​
Overview

stevenson.space offers an extensive theming system with over 20 professionally designed themes. From light and dark modes to seasonal celebrations and cosmic imagery, you can customize your agenda to match your style and mood.

​
Accessing Theme Settings

1

Open Theme Editor

Click the “Switch Theme” card on the home page dashboard
2

Browse Themes

Scroll through the theme gallery to preview available options
3

Apply Theme

Click any theme to apply it instantly - changes take effect immediately
Themes are saved to your browser’s local storage, so your selection persists across sessions.

​
Available Themes

​
Base Themes

The foundation themes that work year-round:

Light

Clean, bright interface with high contrast for daytime use
  • Background: White and light grays
  • Accent: Customizable
  • Best for: Daytime, bright environments

Dark

Sleek dark interface that’s easy on the eyes
  • Background: Dark grays and blacks
  • Accent: Gold (#b38825)
  • Best for: Night use, reducing eye strain
  • Creator: Joseph S. (‘22)

​
Seasonal Themes

Special themes that automatically appear during relevant times of year:
Warm autumn colors perfect for the school year’s beginningActive Period: Late September through November
Spooky theme with animated particles
  • Colors: Dark background (#0f0f0f) with orange accent (#cc611b)
  • Particles: Pumpkins, candy corn, ghosts, cauldrons, and candy
  • Active Period: October 20 - November 1
  • Creator: Allan H. (‘28)
Halloween theme features 15 animated particles with gentle wind effects for a festive atmosphere.
School spirit theme for Homecoming weekActive Period: During Homecoming festivities
Cool winter theme for the holiday seasonActive Period: December through February
Romantic theme for Valentine’s DayActive Period: February 1-14
Green-themed celebration for St. Patrick’s DayActive Period: March 10-17
Cherry blossom theme with beautiful particle effects
  • Colors: Soft pink background (#ffdcdc) with pink accent (#f25477)
  • Header Images: Custom cherry grove artwork
  • Particles: Cherry blossom petals and bees (50 particles total)
  • Description: “Inspired by Minecraft’s Cherry Grove biome. This theme has a lot of particles!”
  • Active Period: November 11-21 (recommended)
  • Creator: Joshua F. (‘26)
The Sakura theme features gentle wind effects and custom header images for both desktop and mobile views.
Bright, vibrant theme for summer monthsActive Period: June through August

​
Cosmic Themes

Stunning space-themed designs featuring real NASA imagery:

Cosmic Reef

Features the Large Magellanic Cloud satellite galaxy
  • Image Source: Hubble Telescope, NASA
  • Distance: 163,000 light-years away
  • Colors: Dark base with warm orange accent (#cf6236)
  • Creator: Joseph S. (‘22)

Cosmic Tarantula

Another stunning cosmic nebula theme
  • Features: Deep space imagery
  • Colors: Dark base with cosmic accents
  • Creator: Joseph S. (‘22)

Mars

Red planet theme with Martian aestheticsFeatures: Mars-inspired color palette

​
Creative & Fun Themes

A recreation of Stevenson High School in Minecraft!
  • Header Images: Custom-built Minecraft recreation of the school
  • Available For: Desktop and mobile
  • Creator: Dan Rybin (‘23)
  • Description: “A recreation of the school, in Minecraft!”
This theme was created by a student and features incredible detail in the Minecraft school recreation visible in the header.
Stealthy, mysterious theme for covert agenda management
Sweet, colorful theme with candy-inspired colors
Deep night theme darker than standard Dark mode
Calm, minimalist theme for focused studying
Unique theme designed for display mode

​
Theme Features

​
Dynamic Elements

Many themes include special visual features:

Custom Headers

Unique header images specific to each theme (desktop and mobile versions)

Animated Particles

Floating elements like cherry blossoms, pumpkins, or snowflakes

Custom Accents

Carefully chosen accent colors that complement the theme

​
Particle System

Several themes feature animated particle effects: Halloween Example: 
"particles": {
  "images": ["pumpkin.png", "candy-corn.png", "ghost.png", ...],
  "speed": 1,
  "count": 15,
  "size": 12,
  "opacity": 0.8,
  "windPower": -0.7
}
Sakura Example: 
"particles": {
  "images": ["petal_1.png", "petal_2.png", ..., "bee.png"],
  "speed": 3,
  "count": 50,
  "size": 12,
  "opacity": 0.8,
  "windPower": -1
}
Particle effects are optimized for performance and can include multiple image variations, wind effects, and customizable speed, size, and opacity.

​
Seasonal Recommendations

The theme system includes intelligent seasonal recommendations:
  • Automatic Detection: Themes marked as seasonal appear in recommendations during their active period
  • Custom Messages: Some themes display special recommendation messages
  • Example: "[Try] The Spooky Halloween Theme 🎃" appears during Halloween season

​
How Seasonal Timing Works

"recommended": {
  "timing": "season",
  "message": "[Try] The Spooky Halloween Theme 🎃"
},
"seasonalDates": "10/20-11/01"
Themes with "timing": "always" are available year-round, while seasonal themes appear prominently during their defined date ranges.

​
Theme Structure

For those interested in how themes work technically:

​
Theme Configuration

Each theme is defined as a JSON file in src/themes/ with the following structure: 
{
  "metadata": {
    "name": "Dark",
    "author": "Joseph S. ('22)"
  },
  "visibility": "show",
  "recommended": {
    "timing": "always"
  },
  "styling": {
    "base": "dark",
    "accent": "#b38825"
  }
}

​
Theme Properties

  • name: Display name of the theme
  • author: Creator of the theme (often students!)
  • description: Optional description explaining the theme
Controls whether the theme appears in the theme selector:
  • "show": Visible to all users
  • "hide": Hidden from theme picker
  • base: Inherits from “light” or “dark” base theme
  • background: Primary background color
  • secondaryBackground: Secondary background for cards/elements
  • accent: Primary accent color used throughout UI
  • header: Custom header configuration and images
  • particles: Particle effect configuration (optional)

​
Theme Persistence

Themes are stored using the Pinia store (src/stores/themes.ts) and persisted to localStorage: 
function setStyling(value: ThemeStyling | Theme): void {
  _styling.value = 'styling' in value ? value.styling : value;
  localStorage.themeStyling = JSON.stringify(_styling.value);
}
This means:
  • Your theme choice is saved automatically
  • Themes persist across browser sessions
  • No account needed - all stored locally
  • Clearing browser data will reset to default (Light theme)

​
Student-Created Themes

Many themes are created by Stevenson students:

Joseph S. ('22)

Created: Dark, Cosmic Reef, Cosmic Tarantula

Dan Rybin ('23)

Created: Minecraft (with custom school recreation)

Joshua F. ('26)

Created: Sakura (Cherry Grove theme)

Allan H. ('28)

Created: Halloween (with particle effects)
Interested in creating your own theme? Check out the contribution guidelines to learn how you can design and submit your own theme to stevenson.space!

​
Tips for Choosing Themes

Match Your Environment

Use Light themes in bright rooms, Dark themes at night or in dim lighting

Celebrate Seasons

Try seasonal themes during their active periods for a festive experience

Reduce Eye Strain

Dark or Midnight themes are easier on eyes during extended use

Express Yourself

Choose themes that match your personality - from Zen minimalism to cosmic exploration

Build docs developers (and LLMs) love

Get started for freeTalk to us