#137, #851, #911, #1031 dark theme that can be set via _config.yml

academicpages · Feb 2, 2025 · 75d868b · 75d868b
1 parent 2363012
commit 75d868b
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 23 deletions.
diff --git a/_sass/_themes.scss b/_sass/_themes.scss
@@ -1,3 +1,14 @@
+/* ==========================================================================
+   COMMON COLOR CODES
+   ========================================================================== */
+
+/* Color codes used throughout the site */
+$gray                          : #7a8288;
+$dark-gray                     : mix(#000, $gray, 40%);
+$darker-gray                   : mix(#000, $gray, 60%);
+$light-gray                    : mix(#fff, $gray, 50%);
+$lighter-gray                  : mix(#fff, $gray, 90%);
+
 /* ==========================================================================
    TYPOGRAPHY
    ========================================================================== */

diff --git a/_sass/include/_utilities.scss b/_sass/include/_utilities.scss
@@ -471,12 +471,12 @@ body:hover .visually-hidden button {
    ========================================================================== */
 
 .footnote {
-  color: mix(#fff, $gray, 25%);
+  color: var(--global-text-color-light);
   text-decoration: none;
 }
 
 .footnotes {
-  color: mix(#fff, $gray, 25%);
+  color: var(--global-text-color-light);
 
   ol, li, p {
     margin-bottom: 0;

diff --git a/_sass/layout/_base.scss b/_sass/layout/_base.scss
@@ -10,7 +10,7 @@ html {
 body {
   /* Set via _themes.scss */
   color: var(--global-text-color);
-  background-color: var(--global-gb-color);
+  background-color: var(--global-bg-color);
 
   margin: 0;
   padding: $masthead-height 0 0;
@@ -100,7 +100,7 @@ blockquote {
   padding-left: 1em;
   padding-right: 1em;
   font-style: italic;
-  border-left: 0.25em solid var(--global-base-color);
+  border-left: 0.25em solid var(--global-border-color);
 
   cite {
     font-style: italic;
@@ -135,10 +135,11 @@ pre {
   overflow-x: auto; /* add scrollbars to wide code blocks*/
 }
 
-p > code,
 a > code,
-li > code,
 figcaption > code,
+li > code,
+p > code,
+pre > code,
 td > code {
   padding-top: 0.1rem;
   padding-bottom: 0.1rem;
@@ -147,6 +148,7 @@ td > code {
   border: 1px solid $lighter-gray;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
+  color: var(--global-code-text-color);
 
   &:before, &:after {
     letter-spacing: -0.2em;

diff --git a/_sass/layout/_footer.scss b/_sass/layout/_footer.scss
@@ -4,23 +4,27 @@
 
 .page__footer {
   @include clearfix;
+  background-color: var(--global-bg-color);
+  color: var(--global-text-color-light);
+
   float: left;
   margin-left: 0;
   margin-right: 0;
   width: 100%;
   clear: both;
+
   /* sticky footer fix start */
   position: absolute;
   bottom: 0em;
   height: auto;
   /* sticky footer fix end */
+
   margin-top: 3em;
-  color: mix(#fff, $gray, 25%);
+
   -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
   -webkit-animation-delay: 0.45s;
           animation-delay: 0.45s;
-  background-color: $lighter-gray;
   border-top: 1px solid $light-gray;
 
   footer {

diff --git a/_sass/layout/_masthead.scss b/_sass/layout/_masthead.scss
@@ -4,7 +4,7 @@
 
 .masthead {
   position: fixed;
-  background: white;
+  background: var(--global-bg-color);
   border-bottom: 1px solid var(--global-border-color);
   height: $masthead-height;
   top: 0;

diff --git a/_sass/layout/_notices.scss b/_sass/layout/_notices.scss
@@ -19,6 +19,7 @@
   background-color: mix(#fff, $notice-color, 90%);
   border-radius: $border-radius;
   box-shadow: 0 1px 1px rgba($notice-color, 0.25);
+  color: var(--global-code-text-color);
 
   h4 {
     margin-top: 0 !important; /* override*/

diff --git a/_sass/layout/_tables.scss b/_sass/layout/_tables.scss
@@ -8,29 +8,29 @@ table {
   font-family: $global-font-family;
   font-size: $type-size-6;
   border-collapse: collapse;
-  border: 1px solid $light-gray;
+  border: 1px solid var(--global-border-color);
 
   & + table {
     margin-top: 1em;
   }
 }
 
 thead {
-  background-color: $lighter-gray;
-  border-bottom: 1px solid $light-gray;
+  background-color: $light-gray;
+  border-bottom: 1px solid var(--global-border-color);
 }
 
 th {
   padding: 0.5em;
   font-weight: bold;
   text-align: left;
-  border-right: 1px solid $light-gray;
+  border-right: 1px solid var(--global-border-color);
 }
 
 td {
   padding: 0.5em;
-  border-bottom: 1px solid $light-gray;
-  border-right: 1px solid $light-gray;
+  border-bottom: 1px solid var(--global-border-color);
+  border-right: 1px solid var(--global-border-color);
 }
 
 tr, td, th {

diff --git a/_sass/theme/_dark.scss b/_sass/theme/_dark.scss
@@ -0,0 +1,47 @@
+/* ==========================================================================
+   DARK THEME
+   ========================================================================== */
+
+/* Color codes used throughout the site */
+$background                 : #474747;
+$background-light           : mix(#fff, $background, 80%);
+$background-lighter         : mix(#fff, $background, 90%);
+$text                       : #ffffff;
+$link                       : #0ea1c5;
+$link-dark                  : mix(#000, $link, 25%);
+$link-light                 : mix(#fff, $link, 25%);
+
+/* Color codes used for the site */
+$danger-color               : #ee5f5b;
+$info-color                 : #2f7f93;
+$notice-color               : #7a8288;
+$success-color              : #62c462;
+$warning-color              : #f89406;
+
+/* Other basic settings for the template */
+$border-radius              : 4px;
+$box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125);
+$global-transition          : all 0.2s ease-in-out;
+$navicon-width              : 28px;
+$navicon-height             : 4px;
+$masthead-height            : 70px;
+$sidebar-link-max-width     : 250px;
+$sidebar-screen-min-width   : 1024px;
+
+/* Default light theme for the site */
+:root {
+    --global-base-color                 : #{$background};
+    --global-bg-color                   : #{$background};
+    --global-border-color               : #{$background-light};
+    --global-code-background-color      : #fafafa;
+    --global-code-text-color            : #{$darker-gray};
+    --global-fig-caption-color          : #{$dark-gray};
+    --global-link-color                 : #{$link};
+    --global-link-color-hover           : #{$link-dark};
+    --global-link-color-visited         : #{$link-light};    
+    --global-masthead-link-color        : #{$text};
+    --global-masthead-link-color-hover  : #{$background-light};    
+    --global-text-color                 : #{$text};
+    --global-text-color-light           : #{$light-gray};
+    --global-thead-color                : #{$background-lighter};
+}
diff --git a/_sass/theme/_default.scss b/_sass/theme/_default.scss
@@ -2,13 +2,6 @@
    DEFAULT THEME
    ========================================================================== */
 
-/* Color codes used throughout the site */
-$gray                          : #7a8288;
-$dark-gray                     : mix(#000, $gray, 40%);
-$darker-gray                   : mix(#000, $gray, 60%);
-$light-gray                    : mix(#fff, $gray, 50%);
-$lighter-gray                  : mix(#fff, $gray, 90%);
-
 /* Color codes used for the site */
 $danger-color               : #ee5f5b;
 $info-color                 : #2f7f93;
@@ -36,7 +29,7 @@ $sidebar-screen-min-width   : 1024px;
     --global-link-color                 : #2f7f93;
     --global-link-color-hover           : mix(#000, #2f7f93, 25%);
     --global-link-color-visited         : mix(#fff, #2f7f93, 25%);    
-    --global-masthead-link-color        : #{$gray};
+    --global-masthead-link-color        : #{$dark-gray};
     --global-masthead-link-color-hover  : mix(#000, #{$gray}, 25%);    
     --global-text-color                 : #{$dark-gray};
 }