Themes & Appearance

Customize the look and feel of AnySlate

Overview

AnySlate offers comprehensive theming options to create a comfortable writing environment. Choose between light and dark modes, customize accent colors, resize panels to your preferred layout, and even apply custom CSS for advanced personalization.

Theme Modes

Light Mode

A clean, bright theme optimized for daytime use and well-lit environments. Features high contrast text and subtle shadows for depth.

Dark Mode

A comfortable dark theme that reduces eye strain in low-light conditions. Carefully calibrated colors ensure readability without harsh contrasts.

System Preference

Automatically follows your operating system's appearance setting. AnySlate switches themes seamlessly when your system changes between light and dark modes.

To change your theme, click the theme toggle in the bottom of the sidebar, or go to Settings → Appearance → Theme.

Accent Colors

Choose an accent color that matches your style. The accent color is used for interactive elements, highlights, and focus indicators throughout the interface.

Blue

Default, professional

Purple

Creative, modern

Green

Fresh, natural

Orange

Energetic, warm

Pink

Playful, expressive

Red

Bold, attention-grabbing

Resizable Panels

Drag the dividers between panels to resize them to your preferred widths. Your layout preferences are automatically saved and restored when you reopen AnySlate.

Panel	Description	Default	Range
Sidebar	File browser and navigation panel	`260px`	200px - 400px
Editor	Main editing area	`Flexible`	Min 300px
Preview	Live preview panel	`50%`	20% - 80%

Press ⌘/Ctrl + \ to toggle the sidebar

Double-click a divider to reset it to the default width

Custom CSS

For advanced users, AnySlate supports custom CSS to fully customize the appearance. Access this feature via Settings → Appearance → Custom CSS.

CSS Variables

AnySlate uses CSS custom properties (variables) for theming. You can override these variables in your custom CSS:

--backgroundMain background color

--foregroundPrimary text color

--primaryAccent/primary color

--secondarySecondary background

--mutedMuted/subtle elements

--borderBorder colors

--cardCard backgrounds

Use with caution

Custom CSS can affect the usability of the interface. If something breaks, you can reset your custom CSS in Settings.

Example Custom CSS

Custom CSS Example

/* Change the accent color to teal */
:root {
  --primary: 168 84% 39%;
}

/* Custom font for the editor */
.cm-editor {
  font-family: 'Berkeley Mono', monospace;
}

/* Increase preview heading sizes */
.preview h1 { font-size: 2.5rem; }
.preview h2 { font-size: 2rem; }
.preview h3 { font-size: 1.5rem; }