Dark Theme Changes

I’ve compiled a list of CSS changes that were necessary to make the transition from the modified Marfa theme I was using to a Dark themed Marfa.

Navigation

Change Background in Navigation to Match Site Background

nav.main-nav {
	background: #3d3c3e;
}

This change depends on your Text Color and Underline Color set by default. If you use the default, you will most likely need to change these to new colors.

nav.main-nav a, #footer a, #post-nav a, p a{
   box-shadow: inset 0 -2px 0 rgba(71, 145, 192, 0.99);
   color: #29ff28
}

Change Author Name Color at the Bottom of a Post Page

#post-meta span.p-author.h-card.dark{
    color: #FFFFFF;
}

Body, Post Page, and Post List Changes

Body

Changes background of site and changes Font Color to White

body {
 color: #FFFFFF;
 background: #3d3c3e;
}

Dates

Underlines and Changes Color of Date

.dates {
  text-decoration: underline;
  color: #FFFFFF;
}

Changes Date Color When Hovered Over

.dates:hover {
    color: #29ff28
}

Headers

Change Header Colors

h1, h2, h3 {
	color: rgba(71, 145, 192, 0.99) !important;
}

Change Header Color on Archive Page

b, strong {
    font-weight: bold !important;
    color: #45b75d !important;
}
a {
	text-decoration: none;
	color: #45b75d;
}

Changes the Post Heading Color in the Post List

Source: A big thanks to Simon Woods for the inspiration

#post-list h2 a {
  color: #45b75d;
  text-decoration: underline;
}

Change the color of the post heading in the post list when hovering over.

Source: Again Thanks to Simon Woods this time for making me realize !important was necessary to change the color.

#post-list h2 a:hover {
  color: #29ff28 !important;
  box-shadow: none;
  text-decoration: underline #29ff28;
}

Change the header color on the Post Page

h1.p-name {
    color: #29ff28 !important;
}

Archive Page

Bolds Header in Archive Page

b, strong {
    font-weight: bold !important;
    color: #45b75d !important;
}
Josh Sullivan @joshsullivan