How to override theme defaults for Minimal Mistakes theme

Question

I am working on a website hosted on GitHub pages using the Minimal Mistakes Jekyll theme. I am working on some basic customization - still trying to learn - so am starting out by practicing with some simple theme changes. I am starting out by reading through the Stylesheet portion of the documentation.

Here, I decided to start out with one of the first examples listed on this page, by trying to override the theme default for the link-color. Here I am having a bit of trouble however.

I started out by following the recommendations outline on this page. I made sure to navigate to the main.scss file in my website's repo and then add the line link-color: red; at the top of the file (making sure to add it above any of the @import statements). However, after adding this line, nothing seemed to change and the default link-color for the website still displayed as a light blue.

Not sure what I am doing wrong here. I have read a few things online which have suggested similar issues and provided varying degrees of advice/solutions with varying levels of complexity. I am very new to Jekyll themes and was just trying this out as a good first intro into more complex customization.

Does anyone have any idea what I might be doing wrong here or have any links to helpful examples, tutorials, or resources?

Also, here is the link to the Minimal Mistakes repo on GitHub and my forked version of the repo here.

Answer 1

This took me some time to find out :)

Reason:

You set a color and it gets always overwritten by $info-color because the !default flag is missing in https://github.com/eolesinski/eolesinski.github.io/blob/master/_sass/_variables.scss:

$info-color                 : #52adc8;
$link-color                 : $info-color;

From css-tricks:

!default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null.

Solution:

Add !default after $info-color inside the $link-color definition to be able to overwrite $link-color on top of the main css file. New entry: $link-color: $info-color !default;

Or, change the link color directly in the _variables.scss file.

Default colors in Visual studio code:

Overwrite and result:

Details on how the theme works:

Your cloned version differs from the official repository. It also does not support skins. Not sure what else is missing. You cannot follow the docs in any case. You could update it to the official version.

The original repo imports the following sass files:

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials

This results in the following import order (skipped irrelevant imports):

1. skin
2. variable (@import "minimal-mistakes/variables";)
3. reset (@import "minimal-mistakes/reset";)

The _config.yml file defines a skin (default by default, no color set):

minimal_mistakes_skin: "default" 

Other skins (such as skins/_air.scss) define their own link color:

$link-color: #393e46 !default;

The variable CSS file (_sass/minimal-mistakes/_variables.scss) defines the default link color by using the $info-color (if not overwritten manually or by the skin before):

$link-color: mix(#000, $info-color, 20%) !default;

The reset CSS file (_sass/minimal-mistakes/_reset.scss) defines that links should use the variable:

a {
  color: $link-color;

Answer 2

The <a> elements on the website's homepage (about.md) has inline style style="color:#4196ce". Inline style is considered the highest CSS specificity and is the value that will always be used over what is found in the stylesheets.

• Note: !important is an exception to this rule and can override inline style.
• To learn more see CSS Specificity by MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

If you decide to remove the inline styles, you would have to add $link-color: red; after the line @import "variables"; where $link-color is first defined. Putting your custom style before @import "variables"; will result in $link-color value being taken from _sass/_variables.scss.