Made copies of a theme but it edited every copy at once

Help
1

What I’m Trying to Do

I want to have different themes for different kinds of activities I do within Obsidian, e.g. normal daily stuff, goal-setting, and creative writing. I have a theme I really like the customizability of called AnuPpuccin, so I wanted to use that for all three, but just change the colors and things so I have three different versions.

What I Did

I went into my file explorer and made two copies of it and gave them new names, just so they could all co-exist in the folder; the names weren’t set in stone or anything, and weren’t particularly important, they just needed to be distinct. Obsidian couldn’t find them copies when I went to change the themes; it could only find the original themes I already had installed.

Oh well. I decided I would figure that out later, but right now, I wanted to customize the themes. I figured that, since I had two copies of this theme: AnuPpuccin Goals and AnuPpuccin Music, I could safely make the changes I wanted to make to the theme within Obsidian, and just switch names around afterward. So if I wanted to change the colors to make my Music theme, I could do that and then afterward rename the AnuPpuccin theme I’d been working with to “Music” and rename the unedited copy to “AnuPpuccin,” and Obsidian would switch back to the theme I had before.

What Went Wrong

So I was REALLY confused when I renamed every single one of those themes separately to “AnuPpuccin,” and put them in the themes folder one at a time, restarting Obsidian each time, and they all look like the theme I just customized. Not ONE of them is the theme I had to begin with.

This makes NO sense to me, because I copy-and-pasted the original theme before making edits to it, so I essentially should have had backups, but for some bizarre reason, Obsidian seems to have been overwriting ALL THREE themes at the same time. So now I have no backups and I have to hope that I’ll remember every setting I had for my main theme, plus put in the time and effort to set it back. But also, I don’t know how to make sure it doesn’t overwrite EVERYTHING again.

My Questions

Can anyone shed light on why in the world it did what it did, and how to keep them separate going forward so everything isn’t being overwritten? Also, how to get Obsidian to recognize the “extra” two as valid themes? They’re in the folder, they just don’t show up in the drop-down to select a theme.

2

How did you change the themes? By using the Style Settings plugin, or actually changing the CSS files? And if the latter, how did you do that within Obsidian?

Many themes allow for changes to the basic theme through Style Settings, but this does not change the source files of the theme. It only changes variables related to the theme. It’s up to you to export these settings you’ve changed from that plugin.

Another way of applying changes to a theme could be to use CSS snippets, which when done correctly, could allow you to switch between them using commands or through the menu.

1 Like
3

I used the Style Settings plugin. I just talked to somebody about it in-person and she showed me that the CSS snippets such as recolor.css (which is a big part of what I was using, I think, without necessarily realizing it) are in a separate folder than the theme itself. So probably, when I edited my theme, it edited the recolor.css I had in, so now that recolor.css file applies to all of my themes. So if I want to have those separate, I may need to have separate recolor.css files and switch them out, or something similar.

4

I may be too tired to propery be able to read (I have my weaker glasses on too), so forgive me if I’m completely out of the matryoshka doll-park here:
is it not the problem that you forgot to change the names in the ‘manifest.json’ files?

1 Like
5

Ohhhh, I didn’t even realize that was something I needed to do. I just looked at the manifest.json files and I think you might be right. That may very well be the problem. Thank you for pointing that out!

Also, forget what I said about CSS snippets, because apparently I don’t have any.

6

Only needed to do if one wants multiple instances of the same thing (plugins, even). I do that for image converter plugin, and others.

If you didn’t do what I thought you were doing, then I’m actually off base.

1 Like
7

That is what I’m going for. Three different versions of the ‘AnuPpuccin’ theme. I renamed the ‘manifest.json’ files for two of the theme copies (so now all three are unique) but the changes are still carrying over between them.

8

There’s a file which is vault/.obsidian/appearance.json and there’s a line of code in that file which is:

"cssTheme": "AnuPpuccin",

Is it possible that’s related and contributing to the issue?

9

Probably because the Style Settings plugin sees the three as one.

1 Like
10

Try the following:
Add completely different names, not even containing AnuPpuccin, even but for example ‘Boris’, ‘Sergey’, ‘Sasha’, and edit the data.json of the Style settings plugin (look for what is set for AnuPpucin, but you will see only one set, the other 2 are gone, I’m afraid).
Hacky, but doable, if you know what color and other settings belong to which, if you have some backups of the olders ones.
You need to set the other two for the other 2 types all over again.

1 Like
11

You do need to sort out the different bits and pieces, as they have different caveats as to how they work and affect stuff.

If you make changes to the files in <vault>/.obsidian/themes and subfolders, you’re playing a dangerous game as your changes will most likely be removed at the next update of that theme. If you still want to do this, you can indeed change the manifest.json to “make your own variant” of that theme, but I’m not sure it’s the best way forward.

If you’re using Style Settings to do the changes, then you need to use the Export and Import links available within that plugin. And after you change something in the menus, you need to remember to actually change that export using the “cloud-with-arrow” icon. Sadly, it’s not easy (AFAIK) to switch between different settings other than doing the Import with the different files every now and then. And no, these files can’t be stored as a CSS snippet.

Lastly, if you add files to <vault>/.obsidian/snippets, you can switch between which snippet is active using Settings > Appearance > CSS Snippets. And there exists plugins both to help editing snippets, and to switch between the snippets you’ve got. The downside to this method, is that you need to figure out what i.e. AnuPpuccin calls the different variables/styles/CSS selectors you need to change. (One option here could be to copy a given file out, like recolors.css, out of the theme folder, and into the snippet folder, and remove the stuff you’ve not changed, and only keep your changes)

In order to keep getting updates from the main theme, I’d go for using CSS snippets which would allow for the main theme to be update when it needs to, and this should in most cases still allow your changes to be applied after the update.

I wouldn’t copy a theme, and start changing that around, unless you’re really wanting to change major aspects of that theme, and you want to develop your own theme entirely.

1 Like
12

How do you plan to switch between the themes? Are you planning to actually change the theme when you switch focus between your “normal daily stuff”, “goal-setting” and/or “creative writing”?

Or are you thinking that if you switch to a note in either category that the theme should change automatically? (Spoiler alert: That’s not how themes works in general)

1 Like
13

Holroy is right. Editing the source directly is not desirable. Unless it’s a unmaintained theme.

BTW: and as for the ‘next update’, this is what I do to stop updating a plugin. Edit the manifest.

1 Like
14

When I change my focus for a given “session,” I figured I would change the theme, and then switch back when I’m done. I know it has to be done manually and can’t be connected to individual notes.

15

Then I would strongly consider going for using CSS snippets and installing some plugin to change which snippets are active or not.

If going down that route, you might with a little bit of extra CSS actually be able to add cssclasses to your notes, which could affect the local note settings allowing for it to be shown in the “correct” style.

1 Like
16

How do I go about creating a CSS snippet? And do you have any particular plugins you’d recommend?

17

I’d recommend using the CSS Editor for editing, and basic manipulating of CSS files. It provides a syntax highlighter for CSS to help and guide you when editing the CSS. The quick switcher also allows for easy opening of the CSS snippets, and toggling the snippets on and off.

Regarding what to write in that snippets, that’s another thing. If all of the stuff you want to change is available through Style Settings you could opt for copying the theme.css into your snippets (and not enable it), and have an open CSS snippet window to correlate which setting in Style Settings you want to change, and then look at the top of the copy-of-theme.css what it actually changes, and then set that variable in the snippet you want to use.

Hopefully that make sense, and if not, you could try fiddling about a little, and ask related to where you’re stuck. I’m going to sign off soon for tonight, so I won’t answer anymore today (I think… :upside_down_face: )

1 Like
18

Thanks for your help!!