Merge pull request #12 from AnswerDotAI/dark-callout

Add example darkmode style for callouts

Author: jph00

nbs/00_core.ipynb

@@ -795,24 +795,54 @@
      "data": {
       "text/html": [
        "<style>\n",
-       "[class*=\"callout-\"] { border-left: 4px solid var(--clr); background: var(--bg);\n",
-       "  padding: 0.8em 1em; border-radius: 4px; margin: 0.5em 0; }\n",
-       ".callout-note      { --clr: #4a9eff; --bg: #f0f7ff; }\n",
-       ".callout-warning   { --clr: #f0ad4e; --bg: #fff8f0; }\n",
-       ".callout-tip       { --clr: #5cb85c; --bg: #f0fff0; }\n",
-       ".callout-important { --clr: #d9534f; --bg: #fff0f0; }\n",
+       "[class*=\"callout-\"] {\n",
+       "  border-left: 4px solid var(--clr);\n",
+       "  background: var(--bg);\n",
+       "  color: var(--fg);\n",
+       "  padding: 0.8em 1em;\n",
+       "  border-radius: 4px;\n",
+       "  margin: 0.5em 0;\n",
+       "}\n",
+       "\n",
+       ".callout-note      { --clr:#4a9eff; --bg:#f0f7ff; --fg:#123; }\n",
+       ".callout-warning   { --clr:#f0ad4e; --bg:#fff8f0; --fg:#2b2114; }\n",
+       ".callout-tip       { --clr:#5cb85c; --bg:#f0fff0; --fg:#132913; }\n",
+       ".callout-important { --clr:#d9534f; --bg:#fff0f0; --fg:#2b1111; }\n",
+       "\n",
+       "@media (prefers-color-scheme: dark) {\n",
+       "  .callout-note      { --bg:#102235; --fg:#d8ecff; }\n",
+       "  .callout-warning   { --bg:#2b2113; --fg:#ffe4bd; }\n",
+       "  .callout-tip       { --bg:#142816; --fg:#d8f5d8; }\n",
+       "  .callout-important { --bg:#2b1515; --fg:#ffd6d6; }\n",
+       "}\n",
+       "\n",
        ".columns { display: flex; gap: 1em; }\n",
        ".column { flex: 1; }\n",
        "</style>\n"
       ],
       "text/plain": [
        "HTML(<style>\n",
-       "[class*=\"callout-\"] { border-left: 4px solid var(--clr); background: var(--bg);\n",
-       "  padding: 0.8em 1em; border-radius: 4px; margin: 0.5em 0; }\n",
-       ".callout-note      { --clr: #4a9eff; --bg: #f0f7ff; }\n",
-       ".callout-warning   { --clr: #f0ad4e; --bg: #fff8f0; }\n",
-       ".callout-tip       { --clr: #5cb85c; --bg: #f0fff0; }\n",
-       ".callout-important { --clr: #d9534f; --bg: #fff0f0; }\n",
+       "[class*=\"callout-\"] {\n",
+       "  border-left: 4px solid var(--clr);\n",
+       "  background: var(--bg);\n",
+       "  color: var(--fg);\n",
+       "  padding: 0.8em 1em;\n",
+       "  border-radius: 4px;\n",
+       "  margin: 0.5em 0;\n",
+       "}\n",
+       "\n",
+       ".callout-note      { --clr:#4a9eff; --bg:#f0f7ff; --fg:#123; }\n",
+       ".callout-warning   { --clr:#f0ad4e; --bg:#fff8f0; --fg:#2b2114; }\n",
+       ".callout-tip       { --clr:#5cb85c; --bg:#f0fff0; --fg:#132913; }\n",
+       ".callout-important { --clr:#d9534f; --bg:#fff0f0; --fg:#2b1111; }\n",
+       "\n",
+       "@media (prefers-color-scheme: dark) {\n",
+       "  .callout-note      { --bg:#102235; --fg:#d8ecff; }\n",
+       "  .callout-warning   { --bg:#2b2113; --fg:#ffe4bd; }\n",
+       "  .callout-tip       { --bg:#142816; --fg:#d8f5d8; }\n",
+       "  .callout-important { --bg:#2b1515; --fg:#ffd6d6; }\n",
+       "}\n",
+       "\n",
        ".columns { display: flex; gap: 1em; }\n",
        ".column { flex: 1; }\n",
        "</style>\n",
@@ -826,12 +856,27 @@
    "source": [
     "%%html\n",
     "<style>\n",
-    "[class*=\"callout-\"] { border-left: 4px solid var(--clr); background: var(--bg);\n",
-    "  padding: 0.8em 1em; border-radius: 4px; margin: 0.5em 0; }\n",
-    ".callout-note      { --clr: #4a9eff; --bg: #f0f7ff; }\n",
-    ".callout-warning   { --clr: #f0ad4e; --bg: #fff8f0; }\n",
-    ".callout-tip       { --clr: #5cb85c; --bg: #f0fff0; }\n",
-    ".callout-important { --clr: #d9534f; --bg: #fff0f0; }\n",
+    "[class*=\"callout-\"] {\n",
+    "  border-left: 4px solid var(--clr);\n",
+    "  background: var(--bg);\n",
+    "  color: var(--fg);\n",
+    "  padding: 0.8em 1em;\n",
+    "  border-radius: 4px;\n",
+    "  margin: 0.5em 0;\n",
+    "}\n",
+    "\n",
+    ".callout-note      { --clr:#4a9eff; --bg:#f0f7ff; --fg:#123; }\n",
+    ".callout-warning   { --clr:#f0ad4e; --bg:#fff8f0; --fg:#2b2114; }\n",
+    ".callout-tip       { --clr:#5cb85c; --bg:#f0fff0; --fg:#132913; }\n",
+    ".callout-important { --clr:#d9534f; --bg:#fff0f0; --fg:#2b1111; }\n",
+    "\n",
+    "@media (prefers-color-scheme: dark) {\n",
+    "  .callout-note      { --bg:#102235; --fg:#d8ecff; }\n",
+    "  .callout-warning   { --bg:#2b2113; --fg:#ffe4bd; }\n",
+    "  .callout-tip       { --bg:#142816; --fg:#d8f5d8; }\n",
+    "  .callout-important { --bg:#2b1515; --fg:#ffd6d6; }\n",
+    "}\n",
+    "\n",
     ".columns { display: flex; gap: 1em; }\n",
     ".column { flex: 1; }\n",
     "</style>"
@@ -1098,7 +1143,7 @@
  "metadata": {
   "solveit": {
    "default_code": false,
-   "mode": "concise",
+   "mode": "learning",
    "use_fence": true,
    "use_thinking": true,
    "use_tools": true,