Hi forum,
I was wondering if anybody has translated the JD website theme to an Obsidian theme? Typography, colors, etc., it looks amazing and can imagine it working great for Obsidian.
Cheers!
1 Like
If it helps you can have the CSS. Hit me up.
Though it’s all pretty obvious.
- Berkeley Mono.
- International Orange (Aerospace).
- Success guaranteed.
2 Likes
The moment I started reading JD’s site, I asked myself the same thing. I tried looking for a similar theme or plugin but couldn’t find one, so I wanted to create one myself (I am a software engineer, but not necessarily on the front end).
Sadly, Berkeley Mono is a paid-for font (there’s a free trial license, but that’s not worth relying on since that font version comes with a very limited charset). Moreover, when I asked them if I could use the font (even after buying it) in such a free plugin/theme, they kindly asked me not to do so since their licenses are incompatible with free software packages.
I was also hooked on the frames around the location sections; however, those are not plain CSS but divs with characters, so that might make theme creation a bit more complicated.
I would still try my hand at a theme, though 
IBM Plex Mono - Google Fonts looks like a nice replacement font
You sure about this bit? You mean could you use it locally within a theme? I’m pretty sure you can do that — and that’s exactly what the cheaper ‘indie dev’ licence is for.
A different matter if you intend to distribute something, obviously.
Indeed, it’s most likely related to the distribution of a software package embedding the font. Here’s a screenshot with the more relevant part of my exchange with them (for reference?).
Ah sorry I misunderstood your intent to distribute vs. do your own private thing.
I’m probably biased by my own start with Berkeley: I bought the ‘indie dev’ licence and used it as my own VSCode font for a while. Then I upgraded to the next one so I could use it on johnnydecimal.com (a free ‘product), and then Neil kindly upgraded me to the next level so that I could typeset the workbook, which is a commercial product. (This involved email conversations and buy-this-version-and-I’ll-refund-you-this-version; an effort he didn’t need to make.)
He’s been nothing but a gentleman the entire time so if this is what he says, I trust him 100%. At the end of the day he’s someone like me: just ‘one guy’ trying to make a business out of a thing.
Buy his font! And just use it locally. You’ll be happier every day.
Yep, Neil seems like a wonderful guy, and the font instantly hooked me (not to mention it’s quite complete, offering support for many languages, etc.)
I might just buy it for my personal use…
Moreover, a carefully designed one might use a font stack, referencing Berkeley Mono as the first font and, if that’s not available on the machine, falling back on something else
I just went all in and aqcuired the font as well. What a beauty! Aaaand then into the rabbit hole… The following CSS mimicks the website as close as I could get without any knowledge of CSS (thank you AI-chat bot…). It should work with the default theme. The CSS is only changing colors, making it typeface independant.
Feel free to use and edit as you like 
2025-03-17 update: Made borders for inline and multiline code blocks
/* ========================================
GLOBAL STYLES
======================================== */
/* Text selection colors */
::selection {
background-color: var(--selection-background) !important;
color: var(--selection-text) !important;
}
/* General link styling */
.cm-s-obsidian span.cm-link,
.markdown-preview-view a,
.markdown-source-view a {
color: var(--link-color) !important;
}
/* Link hover effect */
.cm-s-obsidian span.cm-link:hover,
.markdown-preview-view a:hover,
.markdown-source-view a:hover {
color: var(--link-hover-text) !important;
background-color: var(--link-hover-background) !important;
}
/* Folder and file hover effects */
.nav-folder-title:hover,
.nav-file-title:hover {
background-color: var(--hover-background) !important;
color: var(--hover-text) !important;
}
/* Active file highlight */
.nav-file-title.is-active {
background-color: var(--active-file-background) !important;
color: var(--active-file-text) !important;
font-weight: bold;
}
/* Navigation tree vertical lines */
.nav-folder-children {
border-left: 3px solid var(--folder-border) !important;
}
/* Style for multi line code blocks in Preview Mode */
.markdown-preview-view pre {
border: 3px solid var(--selection-background);
border-radius: 0px;
padding: 15px;
background-color: var(--background-primary);
}
/* Style for inline code blocks in Preview Mode */
.markdown-preview-view code{
border: 3px solid var(--selection-background);
border-radius: 0px;
padding: 3px;
background-color: var(--background-primary);
}
/* Style for multi-line code blocks in Source Mode */
.cm-s-obsidian pre.HyperMD-codeblock { /* Additional compatibility */
border: 3px solid var(--selection-background);
border-radius: 0px;
padding: 15px;
background-color: var(--background-primary);
}
/* Style for inline code in Live Preview */
.markdown-source-view.mod-cm6 .cm-inline-code {
border: 3px solid var(--selection-background);
border-radius: 0px;
padding: 3px 3px;
background-color: var(--background-primary);
}
/* Style for multi-line code blocks in Live Preview */
/* Top and side border for the beginning of the code block */
.markdown-source-view.mod-cm6 div.HyperMD-codeblock-begin {
border-top: 3px solid var(--selection-background);
border-left: 3px solid var(--selection-background);
border-right: 3px solid var(--selection-background);
border-radius: 0px;
padding: 2px;
background-color: var(--background-primary);
}
/* Bottom and side border for the end of the code block */
.markdown-source-view.mod-cm6 div.HyperMD-codeblock-end {
border-bottom: 3px solid var(--selection-background);
border-left: 3px solid var(--selection-background);
border-right: 3px solid var(--selection-background);
border-radius: 0px;
padding: 2px;
background-color: var(--background-primary);
}
/* Side borders for the middle of the code block */
.markdown-source-view.mod-cm6 div.HyperMD-codeblock-bg {
border-left: 3px solid var(--selection-background);
border-right: 3px solid var(--selection-background);
background-color: var(--background-primary);
}
/* Headings and text emphasis */
.markdown-preview-view h1,
.cm-s-obsidian .cm-header-1,
.markdown-source-view h1,
.markdown-preview-view h2,
.cm-s-obsidian .cm-header-2,
.markdown-source-view h2,
.markdown-preview-view h3,
.cm-s-obsidian .cm-header-3,
.markdown-source-view h3,
.markdown-preview-view h4,
.cm-s-obsidian .cm-header-4,
.markdown-source-view h4,
.markdown-preview-view h5,
.cm-s-obsidian .cm-header-5,
.markdown-source-view h5,
.markdown-preview-view h6,
.cm-s-obsidian .cm-header-6,
.markdown-source-view h6,
.markdown-preview-view strong,
.cm-s-obsidian .cm-strong,
.markdown-preview-view em,
.cm-s-obsidian .cm-em,
.markdown-preview-view em strong,
.markdown-preview-view strong em,
.cm-s-obsidian .cm-strong.cm-em {
color: var(--heading-text);
}
/* ========================================
THEME VARIABLES
======================================== */
/* Light Theme */
.theme-light {
--accent-color: #ff4f00;
--selection-background: #ff4f00;
--selection-text: #ffffff;
--link-color: var(--accent-color);
--link-hover-text: #ffffff;
--link-hover-background: var(--accent-color);
--background-primary: #ffffff;
--background-secondary: #ffffff;
--text-normal: #521a00;
--text-muted: #832a00;
--hover-background: var(--accent-color);
--hover-text: #ffffff;
--active-file-background: var(--accent-color);
--active-file-text: #ffffff;
--folder-border: var(--accent-color);
--heading-text: #832a00;
}
/* Dark Theme */
.theme-dark {
--accent-color: #69b4c3;
--selection-background: #69b4c3;
--selection-text: #11262a;
--link-color: #69b4c3;
--link-hover-text: #11262a;
--link-hover-background: #bedfe5;
--background-primary: #11262a;
--background-secondary: #11262a;
--text-normal: #bedfe5;
--text-muted: #9fbcc2;
--hover-background: #69b4c3;
--hover-text: #11262a;
--active-file-background: #69b4c3;
--active-file-text: #11262a;
--folder-border: #69b4c3;
--heading-text: #bedfe5;
}
Oh what! Amazing!
I’d offer to give you the CSS but I’m not sure it’d help. 
It’s pretty atrocious code.
This is mad. I feel like John Malkovich.
1 Like