Default Theme Enjoyers Thread

I’ve personally looked at and tried the various other custom themes the community provides (they’re great to be sure), but none of them just felt “right” like the default theme to me.

For any little “problem” areas of the theme, I just create/request small css snippets to make adjustments as needed.


Who else here really likes the Default Theme?

2 Likes

I do. Mostly because I don’t have to wait for bug fixes when Obsidian has new updates. And I like how clearly separated and contrasted the elements are in the default theme.

1 Like

same here. I made a css snippet to colorize headers and lists based on endentation level and that’s all I need from a theme :slight_smile:

2 Likes

@chrsle Do you mind sharing the snippet? That would be very helpful.

Thanks!

@I-d-as With pleasure! And a warning / request: I don’t know how to code and have hacked this together with trial and error. if you find an elegant way to make this CSS prettier, please kindly let me know :grinning:

Uploaded and as code below:
obsidian default colorized_v03_SHARED.css (5.0 KB)

/*---- HEADER COLORS ----*/

.cm-header-1, 
.markdown-preview-view h1 {
    font-size: 175%;
    line-height: 150%;
  color: rgb(255, 165, 74);
}

.cm-header-2, 
.markdown-preview-view h2 {
    font-size: 150%;
    line-height: 140%;
  color: rgb(60, 173, 127);
}

.cm-header-3, 
.markdown-preview-view h3 {
    font-size: 130%;
    line-height: 130%;
  color: rgb(189, 147, 249);
}

.cm-header-4, 
.markdown-preview-view h4 {
    font-size: 120%;
    line-height: 120%;
  color: rgb(203, 77, 73);
}

.cm-header-5, 
.markdown-preview-view h5 {
    font-size: 110%;
    line-height: 110%;
  color: rgb(98, 183, 222);
}

.theme-light  cm-header-6,
.theme-light  markdown-preview-view h6 {
  color: black
}







/*---- ITALICS AND BOLD COLORIZED ----*/
i, em, span.cm-em {   
color: #f9c746; }     

/* Different color for bold*/
.cm-strong,
.markdown-preview-section strong {
  color: #ff3c32;
  font-style: !important; 
  font-weight: !important;
}

/* Different color for italic */
.cm-em,
.markdown-preview-section em {
  color: #f9c746;
  font-style: !important; 
}





/*---- CHANGE COLOR OF TEXT BASED ON LEVEL OF INDENTATION ----*/
/*---- EDITOR ----*/



.theme-light .cm-s-obsidian .HyperMD-list-line-1 {
     color: black;
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-1 {
     color: #dcddde;
}


.theme-light .cm-s-obsidian .HyperMD-list-line-2 {
    color: rgb(0,0,139);
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-2 {
    color: rgb(201,226,255);
}


.theme-light .cm-s-obsidian .HyperMD-list-line-3 {
    color: rgb(75,0,130);
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-3 {
    color: rgb(220,183,255);
}


.theme-light .cm-s-obsidian .HyperMD-list-line-4 {
    color: rgb(0,128,128);
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-4 {
    color: rgb(192,255,255);
}


.theme-light .cm-s-obsidian .HyperMD-list-line-5 {
    color: rgb(128,128,0);
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-5 {
    color: rgb(255,255,191);
}


.theme-light .cm-s-obsidian .HyperMD-list-line-6 {
    color: rgb(139,69,19);
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-6 {
    color: rgb(255,206,168);
}


.theme-light .cm-s-obsidian .HyperMD-list-line-7 {
    color: rgb(220,20,60);
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-7 {
    color: rgb(255,165,183);
}


.theme-light .cm-s-obsidian .HyperMD-list-line-8 {
    color: rgb(255,20,147);
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-8 {
    color: rgb(255,185,222);
}


.theme-light .cm-s-obsidian .HyperMD-list-line-9 {
    color: rgb(188,143,143);
}
.theme-dark .cm-s-obsidian .HyperMD-list-line-9 {
    color: rgb(255,205,205);
}




/*---- PREVIEW UNORDERED ----*/


.theme-light ul {
     color: black;
}
.theme-dark ul {
     color: #dcddde;
}


.theme-light ul ul {
    color: rgb(0,0,139);
}
.theme-dark ul ul {
    color: rgb(206,206,255);
}


.theme-light ul ul ul {
    color: rgb(75,0,130);
}
.theme-dark ul ul ul {
    color: rgb(220,183,255);
}


.theme-light ul ul ul ul {
    color: rgb(0,128,128);
}
.theme-dark ul ul ul ul {
    color: rgb(192,255,255);
}


.theme-light ul ul ul ul ul {
    color: rgb(128,128,0);
}
.theme-dark ul ul ul ul ul {
    color: rgb(255,255,191);
}


.theme-light ul ul ul ul ul ul {
    color: rgb(139,69,19);
}
.theme-dark ul ul ul ul ul ul {
    color: rgb(255,206,168);
}


.theme-light ul ul ul ul ul ul ul {
    color: rgb(220,20,60);
}
.theme-dark ul ul ul ul ul ul ul {
    color: rgb(255,165,183);
}


.theme-light ul ul ul ul ul ul ul ul {
    color: rgb(255,20,147);
}
.theme-dark ul ul ul ul ul ul ul ul {
    color: rgb(255,185,222);
}


.theme-light ul ul ul ul ul ul ul ul ul {
    color: rgb(188,143,143);
}
.theme-dark ul ul ul ul ul ul ul ul ul {
    color: rgb(255,205,205);
}





/*---- PREVIEW ORDERED ----*/


.theme-light ol {
     color: black;
}
.theme-dark ol {
     color: #dcddde;
}


.theme-light ol ol {
    color: rgb(0,0,139);
}
.theme-dark ol ol {
    color: rgb(206,206,255);
}


.theme-light ol ol ol {
    color: rgb(75,0,130);
}
.theme-dark ol ol ol {
    color: rgb(220,183,255);
}


.theme-light ol ol ol ol {
    color: rgb(0,128,128);
}
.theme-dark ol ol ol ol {
    color: rgb(192,255,255);
}


.theme-light ol ol ol ol ol {
    color: rgb(128,128,0);
}
.theme-dark ol ol ol ol ol {
    color: rgb(255,255,191);
}


.theme-light ol ol ol ol ol ol {
    color: rgb(139,69,19);
}
.theme-dark ol ol ol ol ol ol {
    color: rgb(255,206,168);
}


.theme-light ol ol ol ol ol ol ol {
    color: rgb(220,20,60);
}
.theme-dark ol ol ol ol ol ol ol {
    color: rgb(255,165,183);
}


.theme-light ol ol ol ol ol ol ol ol {
    color: rgb(255,20,147);
}
.theme-dark ol ol ol ol ol ol ol ol {
    color: rgb(255,185,222);
}


.theme-light ol ol ol ol ol ol ol ol ol {
    color: rgb(188,143,143);
}
.theme-dark ol ol ol ol ol ol ol ol ol {
    color: rgb(255,205,205);
}


4 Likes

@chrsle Thanks for sharing!

2 Likes