Fixed Dark Theme

Alexander Bilz

21.21.2021 b99cf69567b8f32dc8431deed0bf75b240c3e3c4

Fixed Dark Theme

 assets/scss/_base_dark.scss

@@ -1,40 +1,42 @@
@mixin base_dark {
 
    html {
        background-color: $bg-color-dark;
    }

    
    body {
        color: $body-color-dark;
        background-color: $bg-color-dark;
    }

    
    
    blockquote {
        border-left: .25em solid $blockquote-border-color-dark;
        color: $blockquote-text-color-dark;
    }

    
    .category {
        color: $tag-color-dark !important;
        color: var(--tag-color-dark)!important;
        background-color: $secondary-bg-color-dark;
        border: 1px solid $border-color-dark;
    }

    
    
    pre {
        background-color: $pre-bg-color-dark;
    }
    }   
}

    a:link,
    a:visited {
        color: $tag-color-dark;
    }

@media screen and (max-width: 960px),
print {
    .page-top .nav {
        background-color: $secondary-bg-color;
        background-color: $secondary-bg-color-dark;
    }

    .navbar-burger span {
        background-color: $heading-color;
        background-color: $heading-color-dark;
    }
}

html[data-theme='dark']  {
    @include base_dark()
}

 assets/scss/_buttons_dark.scss

@@ -2,4 +2,8 @@
    .btn {
        border: 1px solid $border-color-dark;
    }
}

html[data-theme='dark']  {
    @include buttons_dark()
}

 assets/scss/_content.scss

@@ -21,7 +21,7 @@
    float: left;
    font-size: 12px;
    display: block;
    width: calc(100% - 30px;
    width: calc(100% - 30px);
}

.page-top .nav li {

 assets/scss/_content_dark.scss

@@ -1,15 +1,22 @@
@mixin content_dark {
    .content {
        background-color: $bg-color-dark;
    }
    .page-top {
        background-color: $bg-color-dark;
        border-bottom: 1px solid $border-color-dark;
    }

    .page-top .nav a {
        color: $nav-text-dark;
        color: $nav-text-color-dark;
    }

    .page-top .nav a.current {
        color: $nav-text-dark;
        border-bottom: 1px solid $nav-text-dark;
        color: $nav-text-color-dark;
        border-bottom: 1px solid $nav-text-color-dark;
    }
}

html[data-theme='dark']  {
    @include content_dark()
}

 assets/scss/_menu_dark.scss

@@ -4,4 +4,8 @@
        border: 1px solid $border-color-dark;
    }
    
}

html[data-theme='dark']  {
    @include menu_dark()
}

 assets/scss/_pagination_dark.scss

@@ -5,3 +5,7 @@
    }
    
}

html[data-theme='dark']  {
    @include pagination_dark();
}

 assets/scss/_post_dark.scss

@@ -15,10 +15,15 @@
        color: $heading-color-dark;
    }
    
    
    .post .post-footer {
        border-bottom: 1px solid $border-color-dark;
    }
    
    .post .post-footer .meta .info {
        color: $body-color-dark;
    }
    
    .post .post-footer .meta a {
        color: $body-color-dark;
    }
@@ -29,5 +34,9 @@
    
    .post .post-thumbnail img {
        border: 1px solid $border-color-dark;
    } 
    }
}

html[data-theme='dark']  {
    @include post_dark()
}

 assets/scss/_sidebar_dark.scss

@@ -10,4 +10,8 @@
        color:$heading-color-dark;
    }

}

html[data-theme='dark']  {
    @include sidebar_dark()
}

 assets/scss/_variables.scss

@@ -22,7 +22,7 @@
$heading-color-dark: rgb(169, 169, 179);
$body-color-dark: rgb(169, 169, 179);
$post-color-dark: rgba(0, 0, 0, 0.44);
$border-colo-darkr: rgb(38, 38, 38);
$border-color-dark: rgb(38, 38, 38);
$form-border-color-dark: rgb(169, 169, 179);
$form-button-hover-border-color-dark: #fff;
$pre-bg-color-dark: rgb(33, 33, 45);

 assets/scss/contact_dark.scss

File was renamed from assets/scss/contatc_dark.scss
@@ -19,4 +19,8 @@
        background-color: $bg-color-dark;
        border: 1px solid $form-button-hover-border-color-dark;
    }
}

html[data-theme='dark']  {
    @include contact_dark()
}

 layouts/partials/head.html

@@ -10,13 +10,27 @@
    <meta name="google-site-verification" content="{{ .Site.Params.googleSiteVerify }}">
    {{- end -}}

    <!-- CSS -->
    {{ $style := resources.Get "scss/anatole.scss" | resources.ExecuteAsTemplate "main.css" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
    <link rel="stylesheet"
          href="{{ $style.Permalink }}"
          integrity="{{ $style.Data.Integrity }}"
          crossorigin="anonymous"
          type="text/css">
    {{ if .Site.IsServer }}
    {{ $cssOpts := (dict "targetPath" "css/anatole.css" "enableSourceMap" true ) }}
    {{ $styles := resources.Get "scss/anatole.scss" | resources.ExecuteAsTemplate "style.anatole.css" . | toCSS $cssOpts }}
    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
    {{ else }}
    {{ $cssOpts := (dict "targetPath" "css/anatole.css" ) }}
    {{ $styles := resources.Get "scss/anatole.scss" | resources.ExecuteAsTemplate "style.anatole.css" . | toCSS $cssOpts | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
    {{ end }}

    <!-- TODO Load only if really required -->
    {{ if .Site.IsServer }}
    {{ $cssOpts := (dict "targetPath" "css/anatole_dark.css" "enableSourceMap" true ) }}
    {{ $styles := resources.Get "scss/anatole_dark.scss" | resources.ExecuteAsTemplate "style.anatole-dark.css" . | toCSS $cssOpts }}
    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
    {{ else }}
    {{ $cssOpts := (dict "targetPath" "css/anatole_dark.css" ) }}
    {{ $styles := resources.Get "scss/anatole_dark.scss" | resources.ExecuteAsTemplate "style.anatole-dark.css" . | toCSS $cssOpts | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
    {{ end }}
 

    {{ range .Site.Params.customCss }}
        {{ $minstyles := resources.Get . }}