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;
}
Change Underline and Text Color in Navigation, Footer Navigation, and URLs in Posts
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;
}
Link Colors
Changes Link Text Colors
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;
}