Fix animations and color scheme change event listener

jannis-baum · Feb 21, 2025 · de6034d · de6034d
1 parent 733d51a
commit de6034d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/static/colors.css b/static/colors.css
@@ -20,12 +20,14 @@
     --icon-back: var(--text-secondary);
 
     /* Code Copy Icons */
-    --icon-copy-primary: var(--text-primary);
-    --icon-copy-secondary: var(--border-regular);
+    --icon-copy-primary: #aaa;
+    --icon-copy-secondary: #333;
     --icon-check-primary: #0f0;
     --icon-check-secondary: #0a0;
     --icon-x-primary: #f00;
     --icon-x-secondary: #a00;
+    --copy-button-fg: var(--icon-copy-primary)
+    --copy-button-bg: var(--icon-copy-secondary)
 
     --syntax-text: var(--text-primary);
     --syntax-keyword: #aed7ff;
@@ -77,6 +79,16 @@
         --icon-file: #636c76;
         --icon-back: var(--text-secondary);
 
+        /* Code Copy Icons */
+        --icon-copy-primary: #1f2328;
+        --icon-copy-secondary: #e7e9eb;
+        --icon-check-primary: #0f0;
+        --icon-check-secondary: #0a0;
+        --icon-x-primary: #f00;
+        --icon-x-secondary: #a00;
+        --copy-button-fg: var(--icon-copy-primary)
+        --copy-button-bg: var(--icon-copy-secondary)
+
         /* source for light mode syntax theme:
          * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
          * */

diff --git a/static/copycode/client.js b/static/copycode/client.js
@@ -1,5 +1,7 @@
 let clipboard = new ClipboardJS('.copy-button');
 
+//TODO: Fix Foreground spelling
+
 // Setup copy button icons
 const Icons = {
     Copy: {
@@ -18,34 +20,34 @@ const Icons = {
         BackgroundColor: '',
     },
 };
+resetButtons();
+window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', resetButtons);
+
+function resetButtons() {
+    getIconColors();
+    document.querySelectorAll('.copy-button').forEach((btn) => {
+        setIcon(btn, Icons.Copy);
+    });
+}
 
 // Get icon color values from css
 function getIconColors() {
+    console.log('getting colors');
     let element = window.getComputedStyle(document.documentElement);
     Object.entries(Icons).forEach(([, icon]) => {
         icon.ForgroundColor = element.getPropertyValue(`--${icon.Class}-primary`);
         icon.BackgroundColor = element.getPropertyValue(`--${icon.Class}-secondary`);
     });
 }
-getIconColors();
-
-// TODO: add event handle for color scheme change
-
-// TODO: Replace this with a loop of the setIcon function
-document.querySelectorAll('.icon-check').forEach(function (icon) {
-    icon.style.display = 'none';
-});
-document.querySelectorAll('.icon-x').forEach(function (icon) {
-    icon.style.display = 'none';
-});
 
 function setIcon(btn, icon) {
     for (let child of btn.children) {
         console.log(child.classList.contains(icon.Class));
         if (child.classList.contains(icon.Class)) {
             child.style.display = 'inline-block';
-            btn.style.fill = icon.ForgroundColor;
-            btn.style.background = icon.BackgroundColor;
+            btn.style.setProperty('--copy-button-fg', icon.ForgroundColor);
+            btn.style.setProperty('--copy-button-bg', icon.BackgroundColor);
+            //btn.style.background = icon.BackgroundColor;
         } else {
             child.style.display = 'none';
         }

diff --git a/static/markdown.css b/static/markdown.css
@@ -203,10 +203,10 @@ pre:hover + .copy-wrapper .copy-button {
 }
 .copy-button:hover {
     opacity: 1;
-    background-color: var(--border-regular);
+    background-color: var(--copy-button-bg);
 }
 .copy-button {
-    fill: var(--text-primary);
+    fill: var(--copy-button-fg);
 }
 
 /* --------------------------------------------------------------------------