Skip to content

Theming & Customization

Jump to bottom
Electric edited this page Nov 6, 2026 · 1 revision

Theming & Customization

Selah is designed to look exactly the way you want it to. You can change the colors, add cover images, and personalize your notes.

App Themes (Light & Dark)

By default, Selah supports a crisp Light mode and a beautiful Dark mode. You can switch between them in Settings > Appearance.

If you want something unique, you can create a Custom Theme where you pick your own background colors, text colors, and accent colors.

Note Covers & Icons

Make your notes stand out! At the top of any note (including Daily Journals), you can:

  • Add an Icon: Click "Add icon" to open the emoji picker and choose an icon that represents the note (e.g., 🌸 for a journal, 📚 for a study note).
  • Add a Cover: Click "Add cover" to upload an image or paste a link. You can adjust the image position and add a gradient overlay so your text stays readable.

Adjusting the Editor Width

If you are writing on a wide monitor, long lines of text can be hard to read. In Settings > Appearance, you can change the document width to keep your notes centered and readable.

🎨 Creating a Custom Theme (Advanced)

If you know a little bit of CSS, you can create your own custom theme entirely from scratch. Selah relies on standard CSS variables (Custom Properties) to style the entire app.

To create a custom theme, you just need to override these specific variables. Here is the complete list of the most important CSS variables you can change:

/* The main app background and surface colors */
--c-bg: #1e1e2e;          /* The deepest background color (e.g., sidebar) */
--c-surface: #282a36;     /* The main background for cards, modals, and the editor */
--c-surface-alt: #2d2f3d; /* Slightly lighter surface (hover states) */

/* Text Colors */
--c-text: #f8f8f2;        /* The primary text color */
--c-text-muted: #a6accd;  /* Dimmer text (descriptions, placeholders) */
--c-text-dim: #6272a4;    /* Very dim text (icons, inactive states) */

/* Borders and Accents */
--c-border: #44475a;      /* The main border color */
--c-border-light: #6272a4;/* Lighter border for subtle separations */
--c-accent: #bd93f9;      /* The primary accent color (buttons, active tabs) */
--c-accent-hover: #ff79c6;/* Accent color when hovering over a button */

How to apply your theme

Selah has a custom theme editor built-in. When you go to Settings > Appearance and select "Custom", you can paste a color hex code (like #1e1e2e) into the color pickers provided for each part of the app (Background, Surface, Text, Accent, etc.).

Example: A "Dracula" Theme

Here is an example of what you would input to make Selah look like the popular "Dracula" color palette:

  • Main Background: #282a36
  • Sidebar Background: #21222c
  • Text Color: #f8f8f2
  • Accent Color: #bd93f9 (Purple)

Styling Plugins

If you are building a custom plugin, you should always use these variables instead of hardcoding colors (like #000000). This ensures that your plugin automatically matches the user's Light, Dark, or Custom theme!

<div style="background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border);">
  This box will automatically match the user's theme!
</div>

Clone this wiki locally