cosmos-docusaurus-theme 1.1.2 → 1.1.4

package/CHANGELOG.md

@@ -7,6 +7,23 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.1.4] — 2026-03-10
+
+### Fixed
+
+- Tooltip now appears **below** the toggle button instead of above (was clipped
+  by the top of the viewport since the navbar sits at the very top of the page)
+- Arrow direction corrected accordingly (points up toward the button)
+
+## [1.1.3] — 2026-03-10
+
+### Added
+
+- **Theme transition**: smooth 0.25s fade on `background-color`, `color`, `border-color`
+  for navbar, sidebar, article, footer and cards — no more abrupt color switch
+- **Color mode tooltip**: shows current mode (`dark mode` / `light mode` / `system mode`)
+  on hover over the Docusaurus toggle button — styled per Void/Slate palette
+
 ## [1.1.2] — 2026-03-10
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos-docusaurus-theme",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A clean, dark-first Docusaurus CSS theme based on TailAdmin design system with Outfit typography",
   "keywords": [
     "docusaurus",

package/src/css/theme.css

@@ -146,6 +146,87 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
+/* ── Smooth dark/light theme transition ──────────────────────────────────── */
+/* Fades background, text and borders when the user toggles the color mode.  */
+/* Scoped to key layout elements — avoids blanket html/body transitions that  */
+/* can cause perf issues on pages with many elements.                         */
+.navbar,
+.theme-doc-sidebar-container,
+.menu__link,
+.main-wrapper,
+article,
+.footer,
+.table-of-contents__link,
+.pagination-nav__link,
+.prism-code,
+.alert,
+.card {
+  transition:
+    background-color 0.25s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+/* ── Color mode toggle — styled tooltip ──────────────────────────────────── */
+/* The toggle button has title="dark mode" | "light mode" | "system mode"    */
+/* which updates to reflect the current state. We display it as a tooltip.   */
+button[aria-label*="dark and light mode"] {
+  position: relative;
+}
+
+button[aria-label*="dark and light mode"]::after {
+  content: attr(title);
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 5px 10px;
+  background: #111827;
+  color: #e5e5e5;
+  border: 1px solid #1f2937;
+  border-radius: 6px;
+  font-family: var(--ifm-font-family-base);
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 100;
+}
+
+/* Arrow pointing up toward button */
+button[aria-label*="dark and light mode"]::before {
+  content: '';
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-bottom-color: #1f2937;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 100;
+}
+
+button[aria-label*="dark and light mode"]:hover::after,
+button[aria-label*="dark and light mode"]:hover::before {
+  opacity: 1;
+}
+
+[data-theme='light'] button[aria-label*="dark and light mode"]::after {
+  background: #fff;
+  color: #1a1714;
+  border-color: #e5e7eb;
+  box-shadow: 0 2px 8px rgb(0, 0, 0, 0.1);
+}
+
+[data-theme='light'] button[aria-label*="dark and light mode"]::before {
+  border-bottom-color: #e5e7eb;
+  border-top-color: transparent;
+}
+
 /* ── Navbar ──────────────────────────────────────────────────────────────── */
 .navbar {
   border-bottom: 1px solid var(--ifm-toc-border-color);