obsidian callouts

Author: breezy-codes

content/blog-posts/2025-06-17-making-callouts-obsidian.ipynb

@@ -15,7 +15,11 @@
     "\n",
     "---\n",
     "\n",
-    "## Step 1: Enable Custom CSS Snippets\n",
+    "## Steps Overview\n",
+    "\n",
+    "The following steps will guide you through creating custom callouts in Obsidian:\n",
+    "\n",
+    "### Step 1: Enable Custom CSS Snippets\n",
     "\n",
     "Before we begin, make sure you’ve enabled CSS snippets in Obsidian:\n",
     "\n",
@@ -27,7 +31,7 @@
     "\n",
     "---\n",
     "\n",
-    "## Step 2: Define a Custom Callout Block in the css file\n",
+    "### Step 2: Define a Custom Callout Block in the css file\n",
     "\n",
     "Here’s an example of a custom callout called `figure` with a pink theme and a pencil icon:\n",
     "\n",
@@ -55,7 +59,7 @@
     "\n",
     "---\n",
     "\n",
-    "## Customise Labels, Icons & Colors\n",
+    "### Step 3: Customise Labels, Icons & Colours\n",
     "\n",
     "You can define any name for your callout, it can be `[!theorem]`, `[!tip]`, `[!poetry]`, or whatever suits your workflow. Each one can be styled uniquely by modifying:\n",
     "\n",
@@ -119,7 +123,60 @@
     "\n",
     "---\n",
     "\n",
-    "## Foldable Callouts\n",
+    "### Step 4: Using Theme Variables for Consistent Colours\n",
+    "\n",
+    "If you want to keep your callout colours consistent with your Obsidian theme, or you just want an easy way to update your colour scheme in one place, you can define custom colour variables using the `:root` selector at the top of your CSS file.\n",
+    "\n",
+    "Here’s an example using a Dracula-inspired palette:\n",
+    "\n",
+    "```css\n",
+    ":root {\n",
+    "    /* Dracula base palette */\n",
+    "    --drac-bg: #282A37;\n",
+    "    --drac-pink-rgb: 255, 121, 198;\n",
+    "    --drac-cyan-rgb: 132, 222, 240;\n",
+    "    --drac-purple-rgb: 189, 147, 249;\n",
+    "    --drac-green-rgb: 80, 250, 123;\n",
+    "    --drac-yellow-rgb: 241, 250, 140;\n",
+    "    --drac-red-rgb: 255, 85, 85;\n",
+    "}\n",
+    "```\n",
+    "\n",
+    "Then, reference these variables when creating your callouts:\n",
+    "\n",
+    "```css\n",
+    ".callout[data-callout=\"question\"] {\n",
+    "    --callout-color: var(--drac-pink-rgb);\n",
+    "    --callout-icon: lucide-help-circle;\n",
+    "    background-color: rgba(var(--drac-pink-rgb), 0.2);\n",
+    "}\n",
+    "```\n",
+    "\n",
+    "This approach keeps your CSS more readable and maintainable, and allows you to easily **change the colour scheme for all your callouts at once** by editing the `:root` variables.\n",
+    "\n",
+    "For example, your `theorem` callout could use the purple variable:\n",
+    "\n",
+    "```css\n",
+    ".callout[data-callout=\"theorem\"] {\n",
+    "    --callout-color: var(--drac-purple-rgb);\n",
+    "    --callout-icon: lucide-square-sigma;\n",
+    "    background-color: rgba(var(--drac-purple-rgb), 0.2);\n",
+    "}\n",
+    "```\n",
+    "\n",
+    "And your `warning` set could use:\n",
+    "\n",
+    "```css\n",
+    ".callout[data-callout=\"warning\"] {\n",
+    "    --callout-color: var(--drac-yellow-rgb);\n",
+    "    --callout-icon: lucide-alert-triangle;\n",
+    "    background-color: rgba(var(--drac-yellow-rgb), 0.2);\n",
+    "}\n",
+    "```\n",
+    "\n",
+    "## Helpful Tips\n",
+    "\n",
+    "### Foldable Callouts\n",
     "\n",
     "You can make callouts foldable by adding `+` or `-` after the label:\n",
     "\n",
@@ -140,7 +197,7 @@
     "\n",
     "---\n",
     "\n",
-    "## Creating a Colour Overlay on a Dark Base\n",
+    "### Creating a Colour Overlay on a Dark Base\n",
     "\n",
     "If you're using a dark theme and want each callout to sit on a consistent dark base while still showing its colour clearly, you can use an **overlay effect** like this (add it into the same CSS file):\n",
     "\n",
@@ -176,7 +233,7 @@
     "\n",
     "---\n",
     "\n",
-    "## Nesting Callouts\n",
+    "### Nesting Callouts\n",
     "\n",
     "Yes, you **can nest callouts**, and they’ll render beautifully, especially if you use the background layering technique above.\n",
     "\n",
@@ -192,19 +249,14 @@
     "\n",
     "Each level keeps its own style, icon, and background overlay, making complex structures more readable.\n",
     "\n",
-    "## Useful Links\n",
-    "\n",
-    "* [📘 Obsidian Callouts Documentation](https://help.obsidian.md/Editing+and+formatting/Callouts)\n",
-    "* [🎨 Lucide Icon Library](https://lucide.dev/)\n",
-    "\n",
-    "---\n",
-    "\n",
     "## Final Tips\n",
     "\n",
-    "* You can define as many custom callouts as you like, one for each purpose.\n",
-    "* Keep your styles readable by using soft background `rgba` values or stick to the consistent colours of your theme.\n",
-    "* Consider matching your callouts to your Obsidian theme for a cohesive look.\n",
-    "* You can also use custom icons from the [Lucide Icon Library](https://lucide.dev/) to make your callouts more visually appealing.\n"
+    "* Define custom callout names that suit your workflow, like `note`, `figure`, `equation`, `bug`, or `reminder`.\n",
+    "* Use `:root` variables to keep your colors consistent across different callouts and future-proof your CSS.\n",
+    "* Match your callouts to your Obsidian theme for a more cohesive visual experience.\n",
+    "* Use icons from [Lucide](https://lucide.dev/) to make each callout instantly recognizable.\n",
+    "* Experiment with different background opacities to find the right balance for readability.\n",
+    "* Consider using foldable callouts to keep your notes tidy and focused.\n"
    ]
   },
   {