Al-folio theme Update

Designed a theme which I am sort of happy with, a departure from the generic light/dark theme people overuse. The light theme is inspired by the famous solarized color scheme, but I darken the text-color to provide a better contrast. The dark theme is modified from dracula, although the purple color for text I have lightened to be easier on the eyes.

    :root {
    --global-bg-color: #fdf6e3;
    --global-code-bg-color: #{$code-bg-color-light};
    --global-text-color: #073642;
    --global-text-color-light: #657b83	;
    --global-theme-color: #268bd2;
    --global-hover-color: #268bd2;
    --global-hover-text-color: #{$white-color};
    --global-footer-bg-color: #{$grey-color-dark};
    --global-footer-text-color: #{$grey-color-light};
    --global-footer-link-color: #BD93F9;
    --global-distill-app-color: #657b83	;
    --global-divider-color: rgba(0, 0, 0, 0.1);
    --global-card-bg-color: #eee8d5;

    --global-tip-block: #42b983;
    --global-tip-block-bg: #e2f5ec;
    --global-tip-block-text: #215d42;
    --global-tip-block-title: #359469;
    --global-warning-block: #e7c000;
    --global-warning-block-bg: #fff8d8;
    --global-warning-block-text: #6b5900;
    --global-warning-block-title: #b29400;
    --global-danger-block: #c00;
    --global-danger-block-bg: #ffe0e0;
    --global-danger-block-text: #600;
    --global-danger-block-title: #c00;

    .fa-sun {
        display: none;
    }
    .fa-moon {
        padding-left: 10px;
        padding-top: 12px;
        display: block;
    }

    .repo-img-light {
        display: block;
    }
    .repo-img-dark {
        display: none;
    }
    }

    html[data-theme="dark"] {
    --global-bg-color: #{$grey-color-dark};
    --global-code-bg-color: #{$code-bg-color-dark};
    --global-text-color: #b9a1de;
    --global-text-color-light: #b9a1de;
    --global-theme-color: #FF79C6;
    --global-hover-color: #FF79C6;
    --global-hover-text-color: #b9a1de;
    --global-footer-bg-color: #{$grey-color-light};
    --global-footer-text-color: #{$grey-color-dark};
    --global-footer-link-color: #{$black-color};
    --global-distill-app-color: #{$grey-color-light};
    --global-divider-color: #424246;
    --global-card-bg-color: #{$grey-900};

    --global-tip-block: #42b983;
    --global-tip-block-bg: #b9a1de;
    --global-tip-block-text: #215d42;
    --global-tip-block-title: #359469;
    --global-warning-block: #e7c000;
    --global-warning-block-bg: #fff8d8;
    --global-warning-block-text: #6b5900;
    --global-warning-block-title: #b29400;
    --global-danger-block: #c00;
    --global-danger-block-bg: #ffe0e0;
    --global-danger-block-text: #600;
    --global-danger-block-title: #c00;

    .fa-sun {
        padding-left: 10px;
        padding-top: 12px;
        display: block;
    }
    .fa-moon {
        display: none;
    }

    .repo-img-light {
        display: none;
    }
    .repo-img-dark {
        display: block;
    }
    }

Enjoy Reading This Article?