My custom theme (with CSS snippets) was working perfectly with 1.12.7, but after updating everything is broken and misplaced. Can’t even see the “exit” or “minimize” button in the settings window. Even the “Style Settings” plugin is barely reactive when I try to merely change the background color of my theme. Can someone point me to a resource properly documenting the changes? Surely people better at coding have had similar issues?
What I’m trying to do
Undo ALL aesthetic and layout changes the Obsidian team found necessary to implement.
Sorry to hear about that. Do you have your theme (and snippets) linked somewhere? You can link to or upload the file(s) here. If folks have time maybe they can take a look. Without having the CSS to look at and reproduce the issue(s), it will be hard for folks to help with anything specific.
In general…
As far as I know, most CSS issues with the 1.13.x update come from these changes – 1.13 ChangeLog - Developers:
Base colors have been migrated to OKLCH colorspace.
The --callout-color variable now expects a valid CSS color. This is a breaking change.
saberzero1 took the time to send out PRs for a bunch of themes (). e.g., here are two for AnuPpuccin:
Hello! I’m saberzero1, a community reviewer for Obsidian plugins and themes. We’re sending this PR out to you proactively to help you prepare for a recent Obsidian update.
Summary
Obsidian 1.13 changed how --callout-color works. It now provides a valid CSS color value (e.g. rgb(255, 0, 128)) instead of a bare RGB triplet (255, 0, 128).
This breaks two patterns:
1. Bare RGB triplets in declarations:
/* Before (broken on 1.13+) */
--callout-color: 255, 0, 128;
/* After */
--callout-color: rgb(255, 0, 128);
2. Wrapping var(--callout-color) in rgb()/rgba():
/* Before (produces invalid rgb(rgb(...)) on 1.13+) */
background: rgba(var(--callout-color), 0.1);
/* After */
background: color-mix(in srgb, var(--callout-color) 10%, transparent);
Changes
Wrapped bare RGB triplets in --callout-color declarations with rgb()
Replaced rgb(var(--callout-color)) with var(--callout-color)
Replaced rgba(var(--callout-color), <alpha>) with color-mix(in srgb, var(--callout-color) <percent>, transparent)
Updated minAppVersion in manifest.json to 1.13.0 (if it was lower)
Summary
Obsidian 1.13 changed how --canvas-color (and --canvas-color-1 through --canvas-color-6) works. It now provides a valid CSS color value (e.g. #e93147) instead of a bare RGB triplet (233, 49, 71).
This breaks two patterns:
1. Bare RGB triplets in declarations:
/* Before (broken on 1.13+) */
--canvas-color-1: 255, 0, 128;
/* After */
--canvas-color-1: rgb(255, 0, 128);
2. Wrapping var(--canvas-color) in rgb()/rgba():
/* Before (produces invalid rgb(rgb(...)) on 1.13+) */
background: rgba(var(--canvas-color), 0.1);
/* After */
background: color-mix(in srgb, var(--canvas-color) 10%, transparent);
Changes
Wrapped bare RGB triplets in --canvas-color / --canvas-color-N declarations with rgb()
Replaced rgb(var(--canvas-color)) with var(--canvas-color)
Replaced rgba(var(--canvas-color), <alpha>) with color-mix(in srgb, var(--canvas-color) <percent>, transparent)
Updated minAppVersion in manifest.json to 1.13.0 (if it was lower)
If you were setting custom colors / CSS for these buttons,
that may need to be updated. In 1.13.x the Settings window was redesigned.
Settings now open in a new window. You can turn this off in Settings → Interface → Open settings in new window.
so if you had custom CSS for that, it may need updating.
). e.g., here are two for 