Dark mode

Author: huntercaron

plugins/code-link/src/App.css

@@ -1,19 +1,18 @@
 /* Your Plugin CSS */
 
 body main {
-    /* @TODO dark mode? */
     --framer-color-tint: #000000;
     --framer-color-tint-dimmed: #666;
     --framer-color-tint-dark: #222;
     --framer-color-tint-extra-dark: #444;
+}
 
-    /* --color-framer-tint: var(--framer-color-tint, light-dark(#0099ff, #0099ff));
-  --color-framer-tint-dimmed: var(
-      --framer-color-tint-dimmed,
-      light-dark(rgba(0, 153, 255, 0.1), rgba(0, 153, 255, 0.15))
-  );
-  --color-framer-tint-dark: var(--framer-color-tint-dark, light-dark(#0088ff, #0088ff));
-  --color-framer-black-dimmed: rgba(0, 0, 0, 0.5); */
+body[data-framer-theme="dark"]  main {
+    --framer-color-tint: #ffffff;
+    --framer-color-tint-dimmed: #999;
+    --framer-color-tint-dark: #e3e3e3;
+    --framer-color-tint-extra-dark: #c3c3c3;
+    --framer-color-text-reversed: #000;
 }
 
 main {
@@ -46,19 +45,28 @@ main {
 }
 
 .plugin-icon {
+    position: relative;
     width: 30px;
     height: 30px;
-    background-color: var(--framer-color-tint);
+    background-color: #000;
     border-radius: 8px;
     margin-bottom: 15px;
 }
 
+.plugin-icon::after {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
+    content: "";
+    pointer-events: none;
+}
+
 .command-container {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
-
     gap: 10px;
 }
 
@@ -77,6 +85,10 @@ main {
     font-weight: 600;
 }
 
+[data-framer-theme="dark"] .command-block {
+    background: var(--framer-color-bg-tertiary);
+}
+
 .command-block .mask {
     position: absolute;
     top: 0;