Search code examples
sassjekyllgithub-pages

How to override theme defaults for Minimal Mistakes theme

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.

Solution

  • 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:

    enter image description here

    Overwrite and result:

    enter image description here

    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;