Typomagical - A theme for typographic appreciators

Hi! Amazing theme :slight_smile:

Could someone point me how to change some colours on the “Ficus Ruby” variant?

I would like to change “menu colors line”:


Also buttons color:

And also text selection color:
image

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.

2 Likes

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

1 Like

@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!

1 Like

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?:

image

Or do you mean callouts in general, like this:

image

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 :smiley: Please enjoy the theme!

1 Like

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!

1 Like

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!

1 Like

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:

  1. If you only want to do this for yourself, you can create a CSS snippet in your Obsidian vault with your palette settings
  2. You can message me with the CSS for your desired palette along with your desired name and I can put it in for you. This is how the Ficus Ruby palette was made
  3. You can make a PR as you mentioned, with the style settings, variables and name all set.

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!