Hi! Amazing theme 
Could someone point me how to change some colours on the “Ficus Ruby” variant?
I would like to change “menu colors line”:
I’m no programmer, I don’t know how to use CSS. If someone can type me a CSS snippet that allow me to change colors of these components would be amazing, or even an update allowing to change these things directly on the Style setting plugin.
Thank’s.
I just want to say a big thank you for your theme. I appreciate everything about it. I feel I’ve finally found my obsidian home with your theme.
thank you
@ironhak , I’m so terribly sorry I didn’t see this, I’m not sure why the forums didn’t seem to give me a notification for your reply!
I wouldn’t be able to do a Style Setting for those things in the near future, but I can perhaps give you a CSS snippet!
I’m just about to leave the house but I’ll get back to you later today. My apologies again!
Hello thank’s and no problem. Anyway I switched back to obsidian original theme so I don’t need the snippet, thank’s for your kindness.
@hungsu - What a lovely theme!! I’m so excited to use this with Obsidian Publish. Is there a way to get the beautiful quote layout to work in Obsidian Publish? I copied the CSS file to the root like the instructions, but that doesn’t change the callouts. Anywhere I can find info on this?
Hi @dpl ,
I don’t use Obsidian Publish so will need some help helping you. By quote layout, do you mean the > [!quote] callout? The one that looks like this?:
Or do you mean callouts in general, like this:
And do you have a link to your Obsidian Publish that I can inspect?
Thanks for getting back to me. Really appreciate it!! I am referring to the quote callout, but the general callouts don’t work either. They all display like standard obsidian callouts.
I copied the CSS file from your theme in my vault and pasted in the root directory for Obsidian publish, as per the instructions I found. It changed most of the theme to match Typomagical, but not the callouts - they remain standard obsidian theme.
Here is a sample I just made to try it out.
Obsidian Publish Sample
Ah, I see what’s happening. Style Settings don’t carry over to Obsidian Publish. One way to fix this is for me to change the default settings of Typomagical, which I was planning on doing anyway.
Until then, you can try pasting the following code to the bottom of your publish.css
.callout {
background-color: transparent !important;
border-style: solid;
border-width: 1px 1px 1px 0;
border-image: linear-gradient(90deg, transparent, rgba(var(--callout-color), 0.25)) 1;
}
.callout .callout-icon {
padding-right: 10px;
}
.callout svg {
transform: scale(1.25);
}
.callout .callout-title {
padding-left: 0;
padding-top: 1em;
padding-bottom: 1em;
}
.callout .callout-content {
padding-left: 32px;
}
.callout .callout-content p:first-child {
margin-top: 0;
}
[data-callout=quote].callout.callout {
border: none;
display: flex;
flex-direction: column-reverse;
}
[data-callout=quote].callout.callout .callout-icon {
display: none;
}
[data-callout=quote]::after {
font-family: "Times New Roman", "Playfair Display";
font-size: 3em;
text-align: center;
line-height: 1;
content: "“";
font-weight: 900;
}
[data-callout=quote] .callout-content.callout-content {
padding: 0;
font-size: 1.35em;
text-align: center;
font-weight: 300;
font-variant-ligatures: discretionary-ligatures;
font-feature-settings: "liga";
}
[data-callout=quote] .callout-title.callout-title {
padding-top: 0;
justify-content: center;
color: var(--text-normal);
}
[data-callout=quote] .callout-title.callout-title .callout-title-inner {
font-weight: 400;
}
[data-callout=quote] .callout-title.callout-title::before {
content: "―";
}
[data-callout=quote] .callout-title.callout-title:hover {
cursor: pointer;
}
[data-callout=quote] .callout-fold {
transform: scale(0.75);
}
[data-callout=quote] .callout-fold svg {
stroke: var(--text-accent);
}
YES!! Thank you so much! Is there a place I can tip you to say thanks for your generous help?
Glad you’re happy with your Obsidian Publish site! No one has ever offered to tip me before so I don’t have a tip jar, but I’m just happy you’re well set up 
Please enjoy the theme!
Hello, I am very new to Obsidian so please excuse if my Question should be very basic… But I’m really glad I found this Theme. I absolutely love the way it looks!
The Problem I have is that the Graph view looks really weird, even to the point of not being usable. It doesn’t show links, I can’t tell wether a note is already created or not just from looking at it. It’s just grey text (names of the notes) floating around kind of close to each other.
Is there any way I could have screwed this up in the Settings? Any help would be very much appreciated!
This Problem solved itself somehow. Obsidian just probably needed a reboot.
Now I love the Theme even more! Thank you so much for creating and maintaining it!
Hi @Cadenza_Doppia , thank you so much for your kind words and I’m glad things resolved themselves!
this is a gorgeous theme. i just started using it for my writing vault, and i’m creating a new vault for a book project that’s been in research for some time now. i forked the repo to add a new color palette but i’m a little confused by the way things are organized–i see a lot of duplicated code and i don’t want to make assumptions about how it works lest i inadvertently break something. i want to save you the trouble of having to write this, but i also could use a walkthrough to create the palette and submit a pr. how best should i approach this?
Hi there,
There are a few ways to add a colour palette, assuming you already know enough CSS:
There isn’t a walkthrough for making a PR for a palette as no one has done this before.
I believe I found your fork, which I see you renamed to Unbalanced. I don’t see any new commits or a new palette there. How much of your palette have you made? Are you comfortable with CSS variables?
i’m just learning how to customize Obsidian, so this has been a bit of a rabbit hole for me. tbh, i’m only vaguely familiar with CSS; i thought this may be a fun way to take a deep dive but i’m recognizing i have much to learn!
i copied the vileplume file, intending to modify it with the colors i wanted thinking that would be the easiest way, but then i had trouble figuring out how to get unbalanced to show up, which led me on a wild goose chase where I ended up breaking the theme. no commits because i discarded the changes.
i thought to save you some trouble and just do the damn thing all by myself, but nope, i am nowhere near the level of proficient i need to be to set it up myself. at least not yet. i seriously thought it would be as simple as plugging in some color values. /facepalm
if i sent you the hex values and a description of where to apply them, would that work?
i still plan to play with the theme and get a feel for how it’s built. this is just such a beautiful theme and i’d love to contribute in some way in the future.
if i sent you the hex values and a description of where to apply them, would that work?
No - inevitably it would not be what you envisioned, and the resulting message-tennis to get colours to what you want would be a waste of both of our time.
There’s a couple of things I think you should explore:
while Obsidian is open, open the Developer Console. Do this by pressing Ctrl+Shift+I If you’re on a Windows or Linux machine, or Command option I on a MacOS machine
Open the Elements tab then find and click the <body> element
Look in the Styles tab, then find this big pile of CSS variables
Start fiddling with those variables to set the colours you want
Once you know which variables to set and to what colour, start saving those to a CSS file
Additionally, if you wanted to mess around with the Typomagical themes, I would recommend against customising VilePlume because it is complex. Coherence is much simpler while you start out, though it is dark only.
okay, thank you! this is very helpful. i appreciate you taking the time to show me what to look into. i’ll play around with this. many thanks!
I love your work, and this is my favorite theme! I love it so much that I’m using it for my Obsidian Publish site, which made me wonder—if I like the “Ficus Ruby” palette the most, could I similarly copy its CSS from the Style Settings plugin to the publish.css file to render its colors in my Publish site?
Hi there!
I’ve never used Obsidian Publish, but it indeed looks like you would have to copy Ficus Ruby’s CSS to the end of your publish.css file, and without the ficus-ruby class since Obsidian Publish seems to lack a way of adding classes. So try copying all of this and put this on the end and it should work:
body {
--link-external-color: #fa858f;
&.theme-dark{
--graph-line: #fa858f;
}
}
.dropdown {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23C94458' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E%0A");
}
body.theme-light {
--background-primary: #f5f5f5;
--background-primary-alt: hsl(180, 13%, 86%);
--background-secondary: #b0c6c2;
--background-secondary-alt: #d7e0e0;
--background-modifier-border: hsl(45, 27%, 65%);
--background-modifier-form-field: #fff;
--background-modifier-form-field-highlighted: #fff;
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
--background-modifier-success: #a4e7c3;
--background-modifier-error: #990000;
--background-modifier-error-rgb: 230, 135, 135;
--background-modifier-error-hover: #bb0000;
--background-modifier-cover: rgba(0, 0, 0, 0.8);
--link-color: #800000;
--link-color-hover: #c94458;
--text-normal: #333834;
--text-muted: #525e5b;
--text-muted-rgb: 136, 136, 136;
--text-faint: #525e5b;
--text-error: #800000;
--text-error-hover: #990000;
--text-highlight-bg: rgba(201, 68, 88, 0.3);
--text-highlight-bg-active: rgba(255, 128, 0, 0.4);
--text-selection: rgba(242, 186, 179, 0.66);
--text-on-accent: #f2f2f2;
--text-title-h1: hsl(159, 17%, 41%);
--text-title-h2: #417262;
--text-title-h3: #E3764F;
--text-title-h4: #E66D9B;
--text-title-h5: #9359db;
--text-title-h6: #4065dc;
--interactive-normal: #f2f3f5;
--interactive-hover: #e9e9e9;
--interactive-accent: #c94458;
--interactive-accent-rgb: 201, 68, 88;
--interactive-accent-hover: #c94458;
--interactive-success: #333834;
--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
--scrollbar-bg: rgba(0, 0, 0, 0.05);
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
--highlight-mix-blend-mode: darken;
}
body.theme-dark {
--background-primary: #305654;
--background-primary-alt: #1e3735;
--background-secondary: #305654;
--background-secondary-alt: #1e3735;
--background-accent: #fff;
--background-modifier-border: #e8aa99;
--background-modifier-form-field: rgba(0, 0, 0, 0.2);
--background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.5);
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
--background-modifier-success: #197300;
--background-modifier-error: #361c1e;
--background-modifier-error-rgb: 61, 0, 0;
--background-modifier-error-hover: #563032;
--background-modifier-cover: rgba(0, 0, 0, 0.6);
--link-color: #fa858f;
--link-color-hover: #f4465d;
--text-normal: #f9ead9;
--text-muted: #d5c4a1;
--text-faint: #bdae93;
--text-highlight-bg: rgba(181, 118, 20, 0.5);
--text-error: #800000;
--text-error-hover: #990000;
--text-selection: rgba(89, 75, 95, 0.99);
--text-title-h2: #DADC8F;
--text-title-h3: #a5e6f9;
--text-title-h4: #D1ABFF;
--text-title-h5: #FFA3C6;
--text-title-h6: #e8bb89;
--text-on-accent: #fbf1c7;
--interactive-normal: #f4465d;
--interactive-hover: #f9a8b1;
--interactive-accent: #f4465d;
--interactive-accent-rgb: 205, 123, 130;
--interactive-accent-hover: #f9a8b1;
--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.4);
--scrollbar-bg: rgba(0, 0, 0, 0.05);
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
--inline-code: #b48ead;
--code-block: #b48ead;
--pre-code-bg: rgba(0, 0, 0, 0.2);
--blockquote-border: #b57614;
--vim-cursor: #d65d0e;
--border-color: #504945;
--hover-bg: rgba(0, 0, 0, 0.5);
}
body.theme-light .is-selected kbd {
background-color: var(--background-secondary-alt);
}
body.theme-light .view-header {
border-top: 1px solid var(--background-primary-alt);
border-bottom: 2px solid var(--background-primary-alt);
background-color: var(--background-primary-alt);
}
// This is JAG's change but can't remember why he wanted it
body.plugin-sliding-panes-rotate-header .workspace > .mod-root > .workspace-leaf > .workspace-leaf-content > .view-header > .view-header-title-container:before {
background: linear-gradient(to top, transparent, transparent)!important;
}
body.plugin-sliding-panes-rotate-header .workspace > .mod-root > .workspace-leaf > .workspace-leaf-content > .view-header > .view-header-title-container:after {
background: linear-gradient(to top, transparent, transparent)!important;
}
body.theme-light .workspace-ribbon.mod-right.is-collapsed {
border-left-color: var(--background-secondary-alt);
}
body.theme-light .workspace-ribbon {
border-left: 2px solid transparent;
}
body.theme-light .status-bar {
border-top: 2px solid var(--background-secondary-alt);
}
body.theme-light .view-action {
color: var(--text-muted);
}
body.theme-dark .view-action {
color: var(--text-muted);
}
body.theme-dark .suggestion-item.is-selected {
background-color: var(--link-color-hover);
}
body.theme-dark .workspace-ribbon.mod-right.is-collapsed {
border-left-color: var(--background-secondary-alt);
}
body.theme-dark .workspace-ribbon {
border-left: 2px solid transparent;
}
body.theme-dark .status-bar {
border-top: 2px solid var(--background-secondary-alt);
}