scottkirvan/githubdhc

Theme for Obsidian inspired by the GitHub Dark High Contrast theme

GitHubDHC

A GitHub Dark High Contrast theme for Obsidian!

Report Bug · Request Feature

 

I do a lot of writing in Markdown, mostly for things that I'm doing up on GitHub. (Obsidian is an great editor for this). I was running into some frustration with the formatting not mapping really well between Obsidian and GitHub, when I thought, "there has to be a theme for this!" I found @krios2146's awesome Obsidian GIthub Theme.

It was close, but not really the way my GitHub looks (I use the GitHub Dark High Contrast theme when I'm working online), so I decided to start hacking the css a bit to see how close I could get. The look of GitHubDHC is different enough from the original theme that I decided to start a new fork based on Vladimir's really nicely done Obsidian GitHub Theme -- it's worth checking out - he did all the initial work and the Kanban theme'ing - it's really good.

I'm not a css creator and I'm sure I've used some poor practices and there's probably some bugs in here (editing modes can get funky!) - but enjoy - I've been using it a ton lately and I'm really finding it difficult going back to the more normal Obsidian themes now. I started with Vladimir's css, comparing it to GitHub's own DHC css (ctrl-shift-i), and have relied on several other themes to help me understand how themes work in obsidian.

This theme DOES NOT support Obsidian's light color scheme, and I'm not sure if any of the Vladimir's original colorblind colorschemes are still working or not. I welcome the help from anyone that wants to work on this stuff, plus, GitHub uses a lot of fun style tricks in their page rendering that would be cool to see implemented.

Screenshots

Screenshots

Installation

Obsidian Marketplace (Recommended)

1. Open the Settings in Obsidian
2. Navigate to Appearances tab under Options
3. Under the Themes section, click on the Manage button across from Themes
4. Search for GitHubDHC in the Filter text input
5. Click Use and then you're done! 🎉

Manual Install

1. Download and unzip (or clone) this repo into your vault's /.obsidian/themes directory (if that directly doesn't exist yet, create it)
2. Open Settings in Obsidian
3. Navigate to the  Appearances tab under Options
4. Under the Themes section, click on the Manage button across from Themes
5. Search for GitHubDHC in the Filter text input
6. Click the reset button for the Accent color, and set your preferred Zoom level.
7. That's it! You're set up - Enjoy!

Theme Settings

Theme settings can be found in the Style Settings plugin.

Current settings include:

• Header colors
• On/Off kanban styles
• On/Off callout styles
• Colorblind colorscheme variants

Feedback

For any bugs or ideas for new features, please submit a New Issue . The best way to contribute directly is to make the changes yourself and submit them as a New Pull Request. Have a quesiton? Join the Obsidian Members Group (OMG) Discord server - I'm @cptvideo - reach out and say, "hi!" 👋

Credits

A huge thank you and all creds due to @krios2146 and his Obsidian GitHub Theme.

Vladimir Kidyaev (2022-2023)
This code includes modifications by Scott Kirvan. Modifications (c) Scott Kirvan
All rights reserved

Project Link: https://github.com/ScottKirvan/GitHubDHC
If you're writing markdown, and not using Obsidian, check it out: https://obsidian.md/

githubdhc's Issues

The underlines and format of #, ##, and ### headings get wrappy when editing

The underlined header format is really whacked when in edit mode -- the underline appears to wrap several times and even the text ends up on a separate line from the hashes.

Implement support for GitHub's Warning and Note callouts

Example:

In GitHub,

> **Note**
> This is a note

> **Warning**
> This is a warning

becomes:

Note
This is a note

Warning
This is a warning

I'm not sure how best to approach this - would it require a plugin or something to accompany this theme?

additional leading space above banner with banner.css

I use the attached css snippet on some pages, when I turn on "show inline title" in settings -> appearance settings, I end up with a ton of leading space above the page title.

/* ----- banner image variants ----- */
/* ---- majority done by efemkay ---- */

body {
    --banner-height: 250px;
   }
   
   /* ---- the code below is a slightly modified version of efemkay's banner image in this forum post: https://forum.obsidian.md/t/css-how-to-style-the-first-image-in-a-note/52839/ ---- */
   
   /* banner using css only -- https://forum.obsidian.md/t/css-how-to-style-the-first-image-in-a-note/52839/ */
   
       /* make the div (in LP) containing the image doesn't control the css box-sizing */
       .internal-embed.image-embed[alt*="banner"] { 
           display: contents; 
       }
       /* original forum post snippet with minor tweak */
       .obsidian-banner img[alt*="banner"] {
           /* position: absolute; */
           position: relative; 
           top: 0;
           left: 0;
           right: 0;
           height: var(--banner-height);
           width: 100%;
           margin-right: auto;
           margin-left: auto;
           object-fit: cover;
           object-position: 50% 50%;
           overflow: hidden;
           user-select: none;
           border-radius: 0px; 
        }
        /* add option to adjust vertical position by adding the alt metadata "higher" or "lower" */
        .obsidian-banner img[alt*="banner"][alt*="higher"] { object-position: 50% 30%; }
        .obsidian-banner img[alt*="banner"][alt*="lower"] { object-position: 50% 70%; }
       
        
   
        /* ---- note title placements --- */
        .banner-title .obsidian-banner .inline-title {
            position: relative;
            margin-top: calc(var(--banner-height) - 100px);
            margin-bottom: 50px !important;
            line-height: 1.2em ;
            text-align: center;
            color: white;
            padding: 7px 0px 7px 20px !important;
            /*background: radial-gradient(circle, rgba(0, 0, 0, 0.416) 0%, rgba(0, 0, 0, 0.233) 53%, rgba(0,0,0,0) 100%);    */
        }
        
        .obsidian-banner .inline-title, .banner-fade .obsidian-banner .inline-title{
           position: relative;
           padding-top: calc(var(--banner-height) - 60px);
           z-index: 1;
        }
        .obsidian-banner img[alt*="banner-fade"], .banner-fade .obsidian-banner img[alt*="banner"]{
           -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
           mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
       }
        .banner-title .obsidian-banner img[alt*="banner"]{
           -webkit-mask-image: none;
           mask-image: none;
        }
   
   
        .banner-notion .obsidian-banner img[alt*="banner"] {
           -webkit-mask-image: none;
           mask-image: none;
        }
        .banner-notion .obsidian-banner .inline-title{
           position: relative;
           padding-top: calc(var(--banner-height) + 5px) !important;
           line-height: 1em !important;
           font-size: 2em !important;
           padding-bottom: 0.3em;
           z-index: 1;
        }
   
       
   
   /* --- profile image --- */
   img[alt*="circle"], 
   img[alt*="profile"],
   img[alt*="round"] {
       display: block;
       border-radius: 100%;
       aspect-ratio: 1/1;
       object-fit: cover;
       width: 60%;
       position: 50% 50%;
       margin-right: auto;
       margin-left: auto;
   }
   
   /* --- float images --- */
   .markdown-rendered img[alt*="right"] {
       display: flexbox;
       float: right;
       clear:right;
       max-width: 40%;
       margin-left: 15px;
   }
   .markdown-rendered img[alt*="left"] {
       display: flexbox;
       float: left;
       clear:left;
       max-width: 40%;
       margin-right: 15px;
   }
   
   
   /* --- EXPERIMENTAL: icon image feature --- */
   /* Uncomment the section below if you want to try it out */
   /* To use, type `obsidian-icon` in the frontmatter and use the alt `icon` on an image. 
    WARNING: icons may not respond to custom page widths in certain themes.*/
   
   
   
   /*
   .obsidian-icon .inline-title {
       position: relative;
       margin-top: 175px;
       z-index: 1;
   }
   
   .obsidian-icon img[alt*="icon"] {
       position: absolute;
       top: 2em;
       left: 1.8em;
       right: unset;
       width: 9% !important;
       object-fit: cover;
       border-radius: 100%;
       aspect-ratio: 1/1;
       z-index: 1;
   }
   .obsidian-icon.is-readable-line-width img[alt*="icon"] {
       top: 2em;
       left: 26em;
       width: 9%;
   }
   
   
   
   .obsidian-banner.obsidian-icon .inline-title,
   .banner-fade .obsidian-banner.obsidian-icon .inline-title {
       margin-top: 0px;
   }
   .obsidian-banner.obsidian-icon img[alt*="icon"], .banner-fade .obsidian-banner.obsidian-icon img[alt*="icon"]{
       position: absolute;
       top: 1.2em;
       left: 1.8em;
   }
   .obsidian-banner.obsidian-icon.obsidian-icon.is-readable-line-width img[alt*="icon"], 
   .banner-fade .obsidian-banner.obsidian-icon.is-readable-line-width img[alt*="icon"] {
       position: absolute;
       top: 2.5em;
       left: 26em;
       width: 7% !important;
   }
    
   
   
   .banner-title .obsidian-banner.obsidian-icon .inline-title {
       margin-top: 3.94em;
   }
   .banner-title .obsidian-banner.obsidian-icon img[alt*="icon"] {
       top: 1.1em;
       width: 10% !important;
       left: 1.5em;
   }
   .banner-title .obsidian-banner.obsidian-icon.obsidian-icon.is-readable-line-width img[alt*="icon"] {
       top: 5.5em;
       left: 25em;
   }
   
   
   .banner-notion .obsidian-banner.obsidian-icon img[alt*="icon"] {
       top: 6.65em;
       width: 6% !important;
       left: 1.5em;
   }
   .banner-notion .obsidian-banner.obsidian-icon.obsidian-icon.is-readable-line-width img[alt*="icon"] {
       top: 6.7em;
       left: 25em;
       width: 6% !important;
   }
   */
   
/* @settings

name: Image Features
id: image-features
description: Change the banner style.
settings:
    - 
        id: banner-type
        title: Banner Style
        type: class-select
        allowEmpty: false
        default: banner-fade
        options:
            - 
                label: Fancy Title
                value: banner-title
            -
                label: Fade
                value: banner-fade
            - 
                label: Notion
                value: banner-notion
    -
        id: banner-height
        title: Banner Height
        type: variable-number-slider
        default: 250
        min: 100
        max: 350
        step: 5
        format: px
*/

Update main appearance settings on install

I've seen some themes that appear to override some of Obsidian's default appearance settings the first time you install -- I want to do this for this theme for things like the default font and the highlight color

Update README.md

This is just a hack page right now - I kept the original readme and just added some "notes to self" at the top. Make this it's own repo/theme, and credit/copyright it correctly.

Some life goals for this theme - github markdown tricks

https://notes.aliciasykes.com/36402/github-markdown-tricks