diff --git a/src/puter-js/src/ui/components/PuterColorPicker.js b/src/puter-js/src/ui/components/PuterColorPicker.js
index f8311386d..1f9b84f74 100644
--- a/src/puter-js/src/ui/components/PuterColorPicker.js
+++ b/src/puter-js/src/ui/components/PuterColorPicker.js
@@ -176,6 +176,48 @@ class PuterColorPicker extends PuterWebComponent {
                     flex: 1;
                 }
             }
+            @media (prefers-color-scheme: dark) {
+                .picker-body {
+                    background-color: rgba(40, 44, 52, .95);
+                    color: #e6e6e6;
+                    box-shadow: 0px 0px 15px #000000aa;
+                }
+                .preview {
+                    border-color: #555;
+                }
+                .header-label {
+                    color: #aaa;
+                }
+                .hex-input {
+                    background-color: #1f1f1f;
+                    border-color: #555;
+                    color: #e6e6e6;
+                }
+                .native-color-row {
+                    background: rgba(255, 255, 255, 0.05);
+                    border-color: #555;
+                }
+                .native-color-row label {
+                    color: #aaa;
+                }
+                input[type="color"] {
+                    border-color: #555;
+                }
+                .swatch {
+                    border-color: rgba(255, 255, 255, 0.1);
+                }
+                .btn {
+                    color: #e6e6e6;
+                    border-color: #555;
+                    background: linear-gradient(#4a4a4a, #3a3a3a);
+                    box-shadow: inset 0px 1px 0px rgb(255 255 255 / 8%), 0 1px 2px rgb(0 0 0 / 25%);
+                }
+                .btn:active {
+                    background-color: #333;
+                    border-color: #444;
+                    color: #999;
+                }
+            }
         `;
     }
 
diff --git a/src/puter-js/src/ui/components/PuterContextMenu.js b/src/puter-js/src/ui/components/PuterContextMenu.js
index 989cdcb7a..dbdb1d13e 100644
--- a/src/puter-js/src/ui/components/PuterContextMenu.js
+++ b/src/puter-js/src/ui/components/PuterContextMenu.js
@@ -47,15 +47,16 @@ class PuterContextMenu extends PuterWebComponent {
                 font-family: sans-serif;
                 background: #FFF;
                 color: #333;
-                border-radius: 2px;
+                border-radius: 4px;
                 padding: 3px 0;
                 min-width: 200px;
                 background-color: rgb(255 255 255 / 92%);
                 backdrop-filter: blur(3px);
                 border: 1px solid #e6e4e466;
-                box-shadow: 0px 0px 15px #00000066;
-                padding-left: 6px;
-                padding-right: 6px;
+                box-shadow: 0px 3px 10px #00000044;
+                margin-top: 5px;
+                padding-left: 4px;
+                padding-right: 4px;
                 padding-top: 4px;
                 padding-bottom: 4px;
                 user-select: none;
@@ -335,6 +336,94 @@ class PuterContextMenu extends PuterWebComponent {
                 width: 20px;
                 height: 20px;
             }
+
+            @media (prefers-color-scheme: dark) {
+                .context-menu {
+                    background: #2d2d2d;
+                    background-color: rgb(45 45 45 / 94%);
+                    color: #e6e6e6;
+                    border-color: #00000080;
+                    box-shadow: 0px 0px 15px #000000aa;
+                }
+                .menu-item {
+                    color: #e6e6e6;
+                }
+                /* Inactive items: icon/check/shortcut/arrow tones */
+                .icon,
+                .check {
+                    color: #e6e6e6;
+                }
+                .submenu-arrow {
+                    color: #b0b0b0;
+                }
+                .shortcut {
+                    color: #888;
+                }
+                .icon img {
+                    filter: drop-shadow(0px 0px 0.3px rgb(230, 230, 230));
+                }
+                /* Inactive icon SVGs use currentColor already; nothing to invert */
+
+                /* Safe-triangle: non-active hover restored colors should match dark */
+                .context-menu.safe-traverse .menu-item:hover:not(.has-open-submenu):not(.focused):not(.disabled):not(.divider) {
+                    color: #e6e6e6;
+                }
+                .context-menu.safe-traverse .menu-item:hover:not(.has-open-submenu):not(.focused):not(.disabled):not(.divider) .icon,
+                .context-menu.safe-traverse .menu-item:hover:not(.has-open-submenu):not(.focused):not(.disabled):not(.divider) .check,
+                .context-menu.safe-traverse .menu-item:hover:not(.has-open-submenu):not(.focused):not(.disabled):not(.divider) .submenu-arrow,
+                .context-menu.safe-traverse .menu-item:hover:not(.has-open-submenu):not(.focused):not(.disabled):not(.divider) .label {
+                    color: #e6e6e6;
+                }
+                .context-menu.safe-traverse .menu-item:hover:not(.has-open-submenu):not(.focused):not(.disabled):not(.divider) .shortcut {
+                    color: #888;
+                }
+                .context-menu.safe-traverse .menu-item:hover:not(.has-open-submenu):not(.focused):not(.disabled):not(.divider) .icon img {
+                    filter: drop-shadow(0px 0px 0.3px rgb(230, 230, 230));
+                }
+
+                /* Submenu-open parent (no hover): subtle dark highlight */
+                .menu-item.has-open-submenu:not(:hover) {
+                    background-color: #3f3f3f;
+                    color: #e6e6e6;
+                }
+                .menu-item.has-open-submenu:not(:hover) .icon,
+                .menu-item.has-open-submenu:not(:hover) .icon svg,
+                .menu-item.has-open-submenu:not(:hover) .icon img {
+                    color: #e6e6e6;
+                }
+
+                /* Danger items */
+                .menu-item.danger,
+                .menu-item.danger .icon {
+                    color: #ff7b72;
+                }
+
+                /* Divider */
+                .divider hr {
+                    background: #444;
+                }
+
+                /* Sheet mode (mobile) */
+                :host(.sheet-mode) .context-menu {
+                    background-color: rgb(40 40 40 / 96%);
+                    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
+                }
+                :host(.sheet-mode) .menu-item:hover:not(.disabled):not(.divider) {
+                    background-color: rgba(0, 122, 255, 0.22);
+                }
+                :host(.sheet-mode) .menu-item:active:not(.disabled):not(.divider) {
+                    background-color: rgba(0, 122, 255, 0.35);
+                }
+                :host(.sheet-mode) .menu-item:hover:not(.disabled):not(.divider) .label,
+                :host(.sheet-mode) .menu-item:hover:not(.disabled):not(.divider) .icon,
+                :host(.sheet-mode) .menu-item:active:not(.disabled):not(.divider) .label,
+                :host(.sheet-mode) .menu-item:active:not(.disabled):not(.divider) .icon {
+                    color: #e6e6e6;
+                }
+                :host(.sheet-mode) .divider hr {
+                    background: rgba(255, 255, 255, 0.15);
+                }
+            }
         `;
     }
 
diff --git a/src/puter-js/src/ui/components/PuterFontPicker.js b/src/puter-js/src/ui/components/PuterFontPicker.js
index d158dcc71..438dd8cc5 100644
--- a/src/puter-js/src/ui/components/PuterFontPicker.js
+++ b/src/puter-js/src/ui/components/PuterFontPicker.js
@@ -185,6 +185,51 @@ class PuterFontPicker extends PuterWebComponent {
                     flex: 1;
                 }
             }
+            @media (prefers-color-scheme: dark) {
+                .picker-body {
+                    background-color: rgba(40, 44, 52, .95);
+                    color: #e6e6e6;
+                    box-shadow: 0px 0px 15px #000000aa;
+                }
+                .title {
+                    color: #e6e6e6;
+                    text-shadow: none;
+                }
+                .search {
+                    background-color: #1f1f1f;
+                    border-color: #555;
+                    color: #e6e6e6;
+                }
+                .font-list {
+                    background-color: #1f1f1f;
+                    border-color: #555;
+                }
+                .font-item {
+                    color: #e6e6e6;
+                }
+                .font-item:hover {
+                    background: rgba(255, 255, 255, 0.06);
+                }
+                .font-name-label {
+                    color: #888;
+                }
+                .preview {
+                    background: #1f1f1f;
+                    border-color: #555;
+                    color: #e6e6e6;
+                }
+                .btn {
+                    color: #e6e6e6;
+                    border-color: #555;
+                    background: linear-gradient(#4a4a4a, #3a3a3a);
+                    box-shadow: inset 0px 1px 0px rgb(255 255 255 / 8%), 0 1px 2px rgb(0 0 0 / 25%);
+                }
+                .btn:active {
+                    background-color: #333;
+                    border-color: #444;
+                    color: #999;
+                }
+            }
         `;
     }
 
diff --git a/src/puter-js/src/ui/components/PuterMenubar.js b/src/puter-js/src/ui/components/PuterMenubar.js
index 2b9b8324f..f1d531c65 100644
--- a/src/puter-js/src/ui/components/PuterMenubar.js
+++ b/src/puter-js/src/ui/components/PuterMenubar.js
@@ -86,6 +86,20 @@ class PuterMenubar extends PuterWebComponent {
                     flex-shrink: 0;
                 }
             }
+            @media (prefers-color-scheme: dark) {
+                .menubar {
+                    background-color: #2a2a2a;
+                    border-bottom-color: #3a3a3a;
+                }
+                .menu-button {
+                    color: #e6e6e6;
+                }
+                .menu-button:hover,
+                .menu-button.active,
+                .menu-button.focused {
+                    background-color: #3a3a3a;
+                }
+            }
         `;
     }
 
diff --git a/src/puter-js/src/ui/components/PuterNotification.js b/src/puter-js/src/ui/components/PuterNotification.js
index 215232686..869fa65a7 100644
--- a/src/puter-js/src/ui/components/PuterNotification.js
+++ b/src/puter-js/src/ui/components/PuterNotification.js
@@ -175,6 +175,31 @@ class PuterNotification extends PuterWebComponent {
                     width: auto;
                 }
             }
+            @media (prefers-color-scheme: dark) {
+                .notification {
+                    background: #2d2d2dcd;
+                    border-color: #3a3a3a;
+                    box-shadow: 0px 0px 17px -6px #000;
+                }
+                .close-btn {
+                    background: #3a3a3a;
+                    color: #ccc;
+                    filter: drop-shadow(0px 0px 0.5px rgb(230, 230, 230));
+                }
+                .close-btn:hover {
+                    background: #4a4a4a;
+                    color: #fff;
+                }
+                .icon-area {
+                    filter: drop-shadow(0px 0px 0.5px rgb(230, 230, 230));
+                }
+                .title {
+                    color: #e6e6e6;
+                }
+                .text {
+                    color: #b0b0b0;
+                }
+            }
         `;
     }