From 23497dd37168c5c895cdee88fa261b4388311d0e Mon Sep 17 00:00:00 2001 From: Nariman Jelveh Date: Sat, 16 May 2026 16:04:29 -0700 Subject: [PATCH] Add dark mode for puter.js login prompt --- src/puter-js/src/modules/PuterDialog.js | 78 ++++++++++++++++++++++++- 1 file changed, 76 insertions(+), 2 deletions(-) diff --git a/src/puter-js/src/modules/PuterDialog.js b/src/puter-js/src/modules/PuterDialog.js index f369fae56..b8e42b5ec 100644 --- a/src/puter-js/src/modules/PuterDialog.js +++ b/src/puter-js/src/modules/PuterDialog.js @@ -338,11 +338,85 @@ class PuterDialog extends (globalThis.HTMLElement || Object) { // It will fall b .puter-dialog-content a:focus{ outline: none; } + + @media (prefers-color-scheme: dark) { + .puter-dialog-content { + border: 1px solid #2a2a2e; + background: #1e1e22; + background-color: #1e1e22; + color: #d6d6dc; + box-shadow: 0 0 9px 1px rgb(0 0 0 / 60%); + } + + dialog p.about { + color: #e4e4ea; + } + + dialog .close-btn { + color: #8a8a90; + } + + dialog .close-btn:hover { + color: #fff; + } + + .launch-auth-popup-footnote { + color: #9a9aa0; + } + + dialog .button { + color: #d6d6dc; + background-color: #3a3a40; + border-color: #4a4a50; + background: linear-gradient(#3f3f45, #2e2e34); + -webkit-box-shadow: inset 0px 1px 0px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 40%); + box-shadow: inset 0px 1px 0px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 40%); + } + + dialog .button:focus-visible { + border-color: #8a8a90; + } + + dialog .button:active, dialog .button.active, dialog .button.is-active, dialog .button.has-open-contextmenu { + background-color: #2a2a30; + border-color: #1f1f24; + color: #8a8a90; + -webkit-box-shadow: inset 0 1px 3px rgb(0 0 0 / 60%); + box-shadow: inset 0px 2px 3px rgb(0 0 0 / 60%), 0px 1px 0px rgb(255 255 255 / 4%); + } + + dialog .button.disabled, dialog .button.is-disabled, dialog .button:disabled { + background: #2a2a30 !important; + border: 1px solid #34343a !important; + text-shadow: none !important; + color: #5a5a60 !important; + } + + dialog .button-primary.disabled, dialog .button-primary.is-disabled, dialog .button-primary:disabled { + background: #1f4e74 !important; + border: 1px solid #2a5a82 !important; + color: #8aa4bd !important; + } + + dialog .button-action.disabled, dialog .button-action.is-disabled, dialog .button-action:disabled { + background: #1f5a3a !important; + border: 1px solid #2a6a45 !important; + color: #8abda0 !important; + } + + dialog a, dialog a:visited { + color: #6ea8ff; + } + + .error-container h1 { + color: #ff7466; + } + } `; // Error message for unsupported protocol if ( window.location.protocol === 'file:' ) { h += ` -
+

Puter.js Error: Unsupported Protocol

@@ -366,7 +440,7 @@ class PuterDialog extends (globalThis.HTMLElement || Object) { // It will fall b h += `
- +

This website uses Puter to bring you safe, secure, and private AI and Cloud features.