ddickstein
diff --git a/‎css/main.css
Copy file name to clipboardExpand all lines: css/main.css
+22-2Lines changed: 22 additions & 2 deletions b/‎css/main.css
Copy file name to clipboardExpand all lines: css/main.css
+22-2Lines changed: 22 additions & 2 deletions
@@ -12,7 +12,8 @@
   /* Hue is between neovim green and blue for text/background */
   /* Saturation is low */
   --fg-color: #29332f;
-  --bg-color:#e7eee8; 
+  --inverse-fg-color: #a9d5c4; /* Dark-mode fg color. */
+  --bg-color: #e7eee8;
   --link-color: #195174;
   --accent-color: #000;
   --accent-bg-color: #d3e4db;
@@ -22,6 +23,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --fg-color: #a9d5c4;
+    --inverse-fg-color: #29332f; /* Light-mode fg color. */
     --bg-color: #0f191f;
     --accent-bg-color: #0b151b;
     --border-color: #1174b1;
@@ -147,9 +149,27 @@ pre {
   word-break: normal;
 }
 
+/* Keyboard input should be distinctive from <pre> and <code>. */
+kbd {
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff;
+  color: var(--accent-color);
+  background-color: #ebebeb; /* var(--accent-bg-color); */
+  border: 1pt solid var(--border-color); /* #555 */
+  border-radius: 3px; /* rounded corners */
+  padding: 2px 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  kbd {
+    box-shadow: 2px 2px 4px var(--border-color), inset 0px 0px 0px 2px rgba(255,255,255,0.2);
+    color: var(--fg-color);
+    background-color: var(--accent-bg-color);
+    border: 1pt solid var(--fg-color); /* #555 */
+  }
+}
+
 code,
 pre,
-kbd,
 samp {
   background-color: var(--accent-bg-color);
   color: var(--fg-color);