A customizable skin

[alxddh]

This is an enhancement or feature.

Summary

This PR implements a feature that users can make their skins.

I have moved all color-related properties into a single file _sass/so-simple/_skin.scss, and made a default skin file assets/css/skins/default.scss:

---
---

@charset "utf-8";

@import "so-simple/functions";
@import "so-simple/variables";
@import "so-simple/notices";

/* Colors */
$base-color: #000 !default;
$text-color: #000 !default;
$accent-color: #34374C !default;
$nav-color: #fff !default;
$background-color: #fff !default;
$nav-background-color: #000 !default;
$code-background-color: tint($base-color, 95%) !default;
$border-color: tint($base-color, 80%) !default;

$primary-color: #000 !default;
$success-color: #62c462 !default;
$warning-color: #f89406 !default;
$danger-color: #ee5f5b !default;
$info-color: #52adc8 !default;

/* Syntax highlighting (base16) colors */
$base00: #fafafa !default;
$base01: #073642 !default;
$base02: #586e75 !default;
$base03: #657b83 !default;
$base04: #839496 !default;
$base05: #586e75 !default;
$base06: #eee8d5 !default;
$base07: #fdf6e3 !default;
$base08: #dc322f !default;
$base09: #cb4b16 !default;
$base0a: #b58900 !default;
$base0b: #859900 !default;
$base0c: #2aa198 !default;
$base0d: #268bd2 !default;
$base0e: #6c71c4 !default;
$base0f: #d33682 !default;

@import "so-simple/skin";

A skin file would be referenced in the template head.html according to the user's configuration:

<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
<link rel="stylesheet" href="{{ site.skin | default: '/assets/css/skins/default.css' | relative_url }}">

If the user wants to use a custom skin, he or she just needs to copy default.css, and rename it, and override these color variables.

I have also made two additional skins: light.scss and dark.scss.

I think this implementation is very flexible. Users can even select different skins according to different hours in a day, for example, they can write below scripts in their head-custom.html:

<script>
    var hours = (new Date()).getHours();
    var node = document.createElement('link');
    node.rel = 'stylesheet';
    if (hours >= 6 && hours < 18) {
      node.href = "{{ '/assets/css/skins/light.css' | relative_url }}";
    } else {
      node.href = "{{ '/assets/css/skins/dark.css' | relative_url }}";
    }
    document.getElementsByTagName('head')[0].appendChild(node);
</script>

Context

#344

[mmistakes]

Great work on this pull request @alxddh!
I'd like some time to give it a better review but everything is looking good from my point of view. Might want to adjust some of the color variables for the light and dark skins, but overall I think it's solid.

[alxddh]

Great work on this pull request @alxddh!
I'd like some time to give it a better review but everything is looking good from my point of view. Might want to adjust some of the color variables for the light and dark skins, but overall I think it's solid.

Thanks. Looking forward to your follow-up improvement.