Merge pull request #408 from vatpac-technology/alex-dev

Fix Phraseology Admonition in Dark Mode

docs/separation-standards/assurance.md

@@ -168,7 +168,7 @@ Another common practice is to see controllers issue an intermediate descent to t
 
 This is **entirely unnecessary**, and just uses up additional talking time, and increases controller workload.
 
-!!! note
+!!! phraseology
     **ARL:** "QLK4D, When ready descend to F130"  
     ...  
     **ARL:** "QLK4D, Descend to A090, Area QNH 1013"  

docs/stylesheets/admonitions.css

@@ -58,22 +58,37 @@
   height: 0rem;
 }
 
+/* Custom Phraseology Admonition */
 :root {
   --md-admonition-icon--phraseology: url('../assets/headset.svg'); /* Path to your custom SVG */
+  --phraseology-light-bg: #D3F8D3; /* Light mode: light green */
+  --phraseology-dark-bg: #082515;  /* Dark mode: very dark green */
 }
 
 .md-typeset .admonition.phraseology {
   border-color: #90EE90; /* Light green border */
-  background-color: #FFFFFF; /* White background for the text */
+  background-color: var(--md-default-bg-color); /* White background for the text */
 }
 
 .md-typeset .phraseology > .admonition-title {
-  background-color: #D3F8D3; /* Lighter green background for the title */
+  background-color: var(--phraseology-light-bg); /* Light green background for the title */
   border-color: #90EE90; /* Light green border for title */
 }
 
 .md-typeset .phraseology > .admonition-title::before {
   background-color: black; /* Set the icon color to black */
   -webkit-mask-image: var(--md-admonition-icon--phraseology); /* Custom SVG for icon */
   mask-image: var(--md-admonition-icon--phraseology); /* Custom SVG for icon */
+}
+
+/* Custom Phraseology Admonition - Dark Mode Adjustments */
+[data-md-color-scheme="slate"] {
+  .md-typeset .phraseology > .admonition-title {
+    background-color: var(--phraseology-dark-bg); /* Very dark green background */
+    color: var(--md-default-fg-color); /* Text color remains readable */
+  }
+
+  .md-typeset .phraseology > .admonition-title::before {
+    background-color: #90EE90; /* Set the icon color to black */
+  }
 }

mkdocs.yml

@@ -14,13 +14,16 @@ theme:
   font:
     text: Maven Pro
   palette:
-    - scheme: default
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
       toggle:
         icon: material/weather-sunny
         name: Switch to dark mode
-    - scheme: slate
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
       toggle:
         icon: material/weather-night
+        name: Switch to light mode
   features:
     - navigation.tabs
     - navigation.tabs.sticky