README file from
Githubcosmic for Obsidian
A colorful, customizable theme for Obsidian, inspired by painted night skies.
cosmic pairs deep, atmospheric surfaces with expressive color, readable typography, and coordinated light and dark modes. It includes ten complete color schemes, optional workspace atmospheres, and focused customization through the Style Settings plugin.


Features
- Coordinated light and dark mode
- Ten complete color schemes
- Colorful headings and interface accents
- Adjustable workspace backgrounds and sidebar contrast
- Customizable typography, note width, and interface density
- Continuous, readable code blocks with colorful syntax highlighting
- Styled tables, properties, callouts, embeds, Canvas, Graph, Bases, and PDF views
- Colored highlights and styled Bases tables, cards, and Kanban boards
- Styled editor focus, search, footnotes, media controls, outlines, backlinks, and bookmarks
- Semantic alternate checkboxes
- Optional per-note layouts for cards, images, tables, properties, and wide media
- Print-friendly and reduced-motion styles
- Responsive adjustments for smaller screens
cosmic does not require any companion plugins to function. The optional Style Settings plugin unlocks the theme's built-in customization controls.
Technical Design
cosmic is built as a standalone CSS theme that extends Obsidian's existing interface without requiring companion plugins. The theme uses reusable CSS custom properties and Obsidian's design tokens to coordinate ten color systems across light and dark modes.
The stylesheet includes responsive layouts, print-specific styling, reduced-motion support, forced-colors accessibility handling, and optional Style Settings configuration. Custom CSS classes provide reusable per-note layouts without requiring changes to note content or application code.
Installation
Obsidian Community Themes
cosmic is available in the Obsidian Community Themes directory:
- Open Settings > Appearance
- Next to Themes, select Manage
- Search for cosmic
- Select Install and use
Manual Installation
- Download
theme.cssandmanifest.jsonfrom the latest GitHub release - Create a folder named
cosmicinside your vault's.obsidian/themes/directory - Place
theme.cssandmanifest.jsoninside thecosmicfolder - Restart Obsidian or reload the available themes
- Open Settings > Appearance and select cosmic
Your theme directory should look like this:
.obsidian/
└── themes/
└── cosmic/
├── manifest.json
└── theme.css
Color Schemes
cosmic includes ten unique palettes. Every palette has separate colors designed for light and dark mode, respectively.
- Original — dusky indigo, soft rose, and a little lavender.
- Red Dwarf — deep plum, bright berry pink, and pale blush.
- Blue Blob — midnight blue, icy cyan, and a wash of sky blue.
- Aurora — deep teal, glowing turquoise, and soft mint.
- Eclipse — near-black violet, lilac accents, and pale lavender.
- Stardust — warm amber, honey gold, and soft cream.
- Comet — dark wine, bright coral, and soft petal pink.
- Dark Nebula pairs blackened pine and moss with a pale sage light mode.
- Solar Flare pairs smoked umber and copper with warm ivory and rust.
- Moonstone pairs graphite and silver with chalk and slate.
To change palettes with Style Settings:
- Install and enable the Style Settings community plugin
- Open Settings > Style Settings
- Expand cosmic
- Under Colors and Moods, select a Color Scheme
Changing between Obsidian's light and dark appearance automatically activates the corresponding version of the selected palette.
Style Settings
The full list of cosmic's customizable options under Style Settings are as follows:
Colors and Moods
- Choose one of cosmic's ten color schemes (Original, Red Dwarf, Blue Blob, Aurora, Eclipse, Stardust, Comet, Dark Nebula, Solar Flare, or Moonstone)
- Change the primary accent and hover accent
- Customize the colors used for H1, H2, and H3 headings
Fonts and Headings
- Choose the main note font
- Choose the display font used for titles and prominent headings
Cosmic's default typography uses:
- Yeseva One for prominent headings
- Tirra for note text
- Inter for the interface
- IBM Plex Mono for inline code and code blocks
Alternative heading and note fonts are available through Style Settings.
Size and Spacing
- Adjust the maximum note width
- Choose Cozy, Compact, or Airy interface spacing
Backgrounds and Surfaces
Choose a sidebar treatment:
- Muted
- Separated
- Deep, available in dark mode
Choose a workspace background:
- Flat for a plain, uniform workspace
- Nebula for broad, palette-colored clouds and ambient glow
- Deep Space for a near-black star field with restrained color and a stronger vignette
Finishing Touches
- Choose Soft, Solid, or Outlined callouts
- Choose Default, Pill, or Minimal status bar styling
- Remove frames from embedded notes and files
- Turn off ambient glow, decorative shadows, and transitions
Callouts
cosmic styles Obsidian's standard callouts and includes three additional callout styles:
> [!constellation]
> A highlighted idea or collection of related notes.
> [!orbit]
> Supporting information connected to a larger topic.
> [!signal]
> An important message, observation, or update.
The active cosmic palette supplies the colors for these callouts.
Alternate Checkboxes
cosmic provides distinct colors and symbols for several semantic task states.
| Syntax | Meaning |
|---|---|
- [ ] |
Incomplete |
- [x] |
Complete |
- [/] |
In progress |
- [!] |
Important |
- [?] |
Question |
- [*] |
Star |
- [>] |
Forwarded |
- [-] |
Cancelled |
- [i] |
Information |
Per-note Layouts
cosmic includes optional CSS classes that can change the presentation of individual notes without affecting the rest of the vault.
Add classes through the note's cssclasses property:
---
cssclasses:
- cosmic-image-grid
---
Multiple classes can be combined.
Content Layouts
| CSS class | Effect |
|---|---|
cosmic-card-grid |
Arranges supported content blocks and callouts in a responsive card grid |
cosmic-image-grid |
Arranges groups of images in a responsive gallery |
cosmic-list-cards |
Turns a top-level list into a responsive card layout |
cosmic-wide-media |
Allows images, videos, iframes, and embeds to extend beyond the normal note width |
Properties
| CSS class | Effect |
|---|---|
cosmic-properties-card |
Displays note properties in a card-style grid |
cosmic-properties-compact |
Reduces property spacing |
cosmic-properties-plain |
Removes the surrounding properties treatment |
Tables
| CSS class | Effect |
|---|---|
cosmic-table-compact |
Reduces table cell spacing |
cosmic-table-center |
Centers the table and its cell content |
cosmic-table-nowrap |
Prevents table-cell text from wrapping |
cosmic-table-striped |
Adds alternating row backgrounds |
cosmic-table-numbered |
Adds visible row numbers |
Code Blocks
| CSS class | Effect |
|---|---|
cosmic-code-nowrap |
Prevents code lines from wrapping |
cosmic-code-lines |
Adds line numbers in Live Preview |
cosmic-code-compact |
Reduces code-block spacing |
Fonts
Cosmic embeds its primary typefaces directly in theme.css, so its typography works offline without loading assets from the network.
The bundled typefaces are Cormorant Garamond, IBM Plex Mono, Inter, Source Serif 4, Tirra, and Yeseva One. Copyright notices and license details are available in FONT-LICENSES.md.
You can also override Obsidian's interface, text, or monospace fonts through Obsidian's built-in font settings.
Compatibility
cosmic 1.2.0 requires Obsidian 1.15.0 or later and includes styling for colored highlights and Bases Kanban.
The theme includes adjustments for narrow screens, printing, reduced-motion preferences, and forced-colors accessibility mode. Because cosmic modifies many parts of Obsidian's interface, future Obsidian updates or unrelated CSS snippets may occasionally cause visual conflicts.
If you encounter a problem, temporarily disable other CSS snippets before reporting it.
Feedback and contributing
Bug reports, feature requests, and pull requests are all welcome through the project's GitHub Issue Tracker.
When reporting a visual problem, please include:
- Your Obsidian version
- Your operating system
- Whether you are using light or dark mode
- The selected cosmic color scheme
- A screenshot of the affected area
- Any CSS snippets or appearance-related plugins that may be active
For more intimate guidance on contributing to this project, please check out contributing.md.
License
cosmic is available under the MIT License.