working dark mode image

alshedivat · Jun 24, 2023 · 083fb4e · 083fb4e
1 parent 6eebb65
commit 083fb4e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 0 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -8,6 +8,9 @@
  {%- if site.last_updated -%}
  Last updated: {{ "now" | date: '%B %d, %Y' }}.
  {%- endif %}
+ <a href="https://github.com/alshedivat/al-folio/issues?page=2&q=is%3Aissue+is%3Aopen">
+ {% include figure.html path="assets/img/test-img.png" class="footer-img" width="10%" %}
+ </a>
  </div>
  </footer>
  {%- else -%}
@@ -20,6 +23,9 @@
  {%- if site.last_updated -%}
  Last updated: {{ "now" | date: '%B %d, %Y' }}.
  {%- endif %}
+ <a href="https://github.com/alshedivat/al-folio/issues?page=2&q=is%3Aissue+is%3Aopen">
+ {% include figure.html path="assets/img/test-img.png" class="footer-img" width="10%" %}
+ </a>
  </div>
  </footer>
  {%- endif %}
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -1002,3 +1002,13 @@ nav[data-toggle="toc"] {
  }
  }
 }
+
+
+/* image overlay */
+.footer-img{
+ filter: var(--global-footer-img-filter);
+
+}
+.footer-img:hover{
+ filter: var(--global-footer-img-filter) var(--global-footer-img-hover-filter)
+}
diff --git a/_sass/_themes.scss b/_sass/_themes.scss
@@ -30,6 +30,9 @@
  --global-danger-block-text: #600;
  --global-danger-block-title: #c00;
 
+ --global-footer-img-filter: #{$footer-img-filter-light};
+ --global-footer-img-hover-filter: #{$footer-img-filter-hover-light};
+
  .fa-sun {
  display : none;
  }
@@ -75,6 +78,10 @@ html[data-theme='dark'] {
  --global-danger-block-text: #600;
  --global-danger-block-title: #c00;
 
+
+ --global-footer-img-filter: #{$footer-img-filter-dark};
+ --global-footer-img-hover-filter: #{$footer-img-filter-hover-dark};
+
  .fa-sun {
  padding-left: 10px;
  padding-top: 12px;
@@ -91,3 +98,4 @@ html[data-theme='dark'] {
  display: block;
  }
 }
+
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -36,3 +36,14 @@ $black-color: #000000 !default;
 
 $code-bg-color-light: rgba($purple-color, 0.05);
 $code-bg-color-dark: #2c3237 !default;
+
+
+// images must be white filled otherwise the following filters won't be correct
+$footer-img-filter-light: brightness(100%) saturate(100%);
+$footer-img-filter-dark: brightness(0) saturate(100%);
+
+// hover filters are extracted from https://codepen.io/sosuke/pen/Pjoqqp 
+// to match the desired color (can by any color really, but still manual)
+// a reasiable choice is the theme color.
+$footer-img-filter-hover-light: brightness(0) saturate(100%) invert(16%) sepia(73%) saturate(2918%) hue-rotate(213deg) brightness(93%) contrast(110%);
+$footer-img-filter-hover-dark: brightness(0) saturate(100%) invert(36%) sepia(68%) saturate(7498%) hue-rotate(196deg) brightness(102%) contrast(100%);
diff --git a/assets/img/test-img.png b/assets/img/test-img.png