@Salamander23 : with all due respect for your far and away superior CSS knowledge than mine, and agreeing that a theme’s CSS file can be modified, I don’t think any modifications should be made in it, contrary to what you said to @Cajun.
The reason is that if the theme gets updated, all those modification will be lost as the updated theme’s CSS file overwrites the previous (= modified) one.
The best way to make changes to a them is to use snippets, as they are not affected by theme updates. Furthermore, they override the theme’s CSS.
My apologies if I sound pedantic, I don’t mean to be.
You are absolutely right. I was too quick to reply there. Sorry @Cajun. In my hopes to point you to where you may find the theme’s css to have a place to start, I was too rushed. And no, @Klaas, you don’t sound pedantic at all. You raised a very legitimate concern.
However, it is still reasonable to proceed with tweaking the css file directly, as long as you take some precautions:
Write down the name of the template you chose (to make sure you don’t forget it while doing the following steps).
Change the file name of the original template’s css to a new, custom name.
Re-install the original template’s css file back into the templates folder.
Select your new custom-named template from Obsidian’s options window.
Note: The list of templates in Obsidian’s options window automatically updates to include the newly named template.
Feel free to make changes to your custom-named css file, while also having the original css file as reference.
CSS Snippets are another equally valid, if not better, approach. I personally use a mix of directly tweaking a template css file and using CSS snippets. I especially use CSS snippets when I’m introducing new functionality that wasn’t present in the original template.
Also @Klaas, my CSS knowledge is actually not very extensive. I’m a product of the internet haha. I still consider myself a beginner, just one that sometimes puts a decent amount of time into tweaking things. I also make frequent use of Ctrl + Shift + I to open obsidian’s developer tools to see what things can be changed and how.
@Salamander23@Klaas Thank you for the information. To be honest when I asked the question, I wasn’t thinking about updates (ha!) just curious, as I like to tweak themes, if possible.
I tweaked the Kanban plugin initially, but kept comments and notes to have in the event of updates! : - )
Full credit goes to elliotboyd who created the original traffic lights theme, and also to @death.au and Andy Matuschak for the sliding panes mode which is part of the style sheet.
I love the original traffic lights theme, but I personally prefer an aesthetic closer to the default obsidian theme. So I pulled a bunch of css out that theme and left behind a lot of the style changes present in that css, just taking some elements that I liked and adding them to a fresh css file. Once again, full credit to the creator of the theme, I am not a coder and I don’t understand pretty much any of what the code means, I just used trial and error commenting out code randomly changing colours and padding to get my version to look right.
If you don’t like the sliding panes the code for it is at the end of the file you can comment it out.
Port of the awesome, eye friendly Behave theme by Christian Petersen.
Since the Behave theme is available for several tools like FreeCAD, KiCAD and VSCode you can get a full stack of software all in the same colors (just like the amazing Dracula theme)
Side by side of VSCode with Obsidian, both using the Behave theme:
@dinnerheist might be an idea to open a separate forum page for your theme so you can inform your users of upgrades with all the info in 1 place on 1 page.
