Themes

Basic Memory Cloud includes a comprehensive theme system with 40+ preset themes and support for custom CSS. Personalize your workspace with colors, fonts, and styles that work for you.

Color Mode

Switch between light, dark, or system-based color modes:

1. Open Settings in the web app
2. Find the Theme section
3. Click Light, Dark, or System

System mode automatically matches your operating system preference.

Preset Themes

Choose from 40+ curated themes, each with coordinated colors for both light and dark modes.

Selecting a Theme

1. Open Settings in the web app
2. Find the Theme section
3. Click the theme dropdown
4. Preview themes by hovering - see the color palette
5. Click to apply

Available Themes

Popular presets include:

• Default - Clean white/dark gray base
• Modern Minimal - Blue-focused minimal design
• Violet Bloom - Purple-focused theme
• T3 Chat - Inspired by T3 Chat interface
• And 35+ more options

Each theme defines:

• Background and foreground colors
• Primary and accent colors
• Sidebar colors
• Card and border styles
• Typography (optional)

Custom Themes

Create your own theme with custom CSS variables.

Adding a Custom Theme

1. Open Settings in the web app
2. Find the Theme section
3. Click Custom Theme
4. Paste your CSS or drag-and-drop a .css file
5. Click Save

CSS Format

Custom themes use CSS variables in TweakCN format:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... dark mode overrides */
}

Required Variables

Your custom theme must define these variables for both light (:root) and dark (.dark) modes:

Optional Variables

Customize typography and layout:

:root {
  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Georgia', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --letter-spacing: -0.01em;

  /* Layout */
  --radius: 0.5rem;
  --spacing: 1rem;
}

Sidebar Variables

Customize the sidebar separately:

:root {
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

Using TweakCN

TweakCN is a theme generator compatible with Basic Memory Cloud.

Export from TweakCN

1. Visit tweakcn.com
2. Customize your theme with the visual editor
3. Export as CSS
4. Paste into Basic Memory Cloud's custom theme editor

Color Format

TweakCN uses OKLCH color format for better perceptual uniformity:

/* OKLCH format: oklch(lightness chroma hue) */
--primary: oklch(0.6 0.2 250);  /* Blue */
--accent: oklch(0.7 0.15 330);  /* Purple */

Theme Persistence

Your theme choice is saved locally in your browser:

• Persists across sessions
• Applies immediately on page load
• Separate settings for each browser/device

Troubleshooting

Theme Not Applying

1. Check browser console for CSS errors
2. Verify all required variables are defined
3. Ensure both :root and .dark sections exist
4. Try refreshing the page

Colors Look Wrong

1. Verify OKLCH values are valid (lightness 0-1, chroma 0-0.4, hue 0-360)
2. Check for typos in variable names
3. Test in both light and dark modes

Custom Theme Rejected

The editor validates your CSS. Common issues:

• Missing required variables
• Invalid CSS syntax
• CSS too large (size limit applies)

Next Steps