Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A customizable skin #347

Merged
merged 8 commits into from
Oct 28, 2019
Merged

A customizable skin #347

merged 8 commits into from
Oct 28, 2019

Conversation

alxddh
Copy link
Contributor

@alxddh alxddh commented Oct 18, 2019

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
Copy link
Owner

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
Copy link
Contributor Author

alxddh commented Oct 22, 2019

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.

@mmistakes mmistakes merged commit 8d7015d into mmistakes:master Oct 28, 2019
@mmistakes mmistakes mentioned this pull request Oct 28, 2019
mmistakes added a commit that referenced this pull request Oct 30, 2019
## Added
- Add light and dark skins. [#347]
- Add support for customizable skins. [#347]

## Fixed
- Fix security alerts and update [onchange](https://www.npmjs.com/package/onchange) development dependency in `package.json`. [#341]
clarafy pushed a commit to clarafy/clarafy.github.io that referenced this pull request Mar 24, 2021
clarafy pushed a commit to clarafy/clarafy.github.io that referenced this pull request Mar 24, 2021
## Added
- Add light and dark skins. [mmistakes#347]
- Add support for customizable skins. [mmistakes#347]

## Fixed
- Fix security alerts and update [onchange](https://www.npmjs.com/package/onchange) development dependency in `package.json`. [mmistakes#341]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants