feat: add monet support in MMRL

module/webui/index.html

@@ -352,7 +352,7 @@
     <!-- Footer -->
     <div class="footer">
         <div class="uninstall-container ripple-element hidden-uninstall">
-            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FF3636"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" /></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" /></svg>
             <span data-i18n="functional_button.uninstall_webui"></span>
         </div>
     </div>

module/webui/styles/about.css

@@ -7,7 +7,7 @@
     position: relative;
     width: calc(90vw - 60px);
     max-width: 800px;
-    background: #fff;
+    background-color: var(--bg-secondary);
     border-radius: 15px;
     padding: 30px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
@@ -43,7 +43,7 @@
     width: calc(100% - 20px);
     padding: 8px 10px;
     border-radius: 10px;
-    background-color: #F5F5F5;
+    background-color: var(--border-color);
 }
 
 #acknowledgment {
@@ -88,14 +88,4 @@
 #link-text {
     font-size: 17px;
     font-weight: bold;
-}
-
-@media (prefers-color-scheme: dark) {
-    .about-menu {
-        background-color: #343434;
-    }
-
-    #disclaimer {
-        background-color: #6E6E6E;
-    }
 }

module/webui/styles/applist.css

@@ -14,7 +14,7 @@
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    background-color: #DCDCDC;
+    background-color: var(--border-color);
     border: none;
     border-radius: 12px;
     box-sizing: border-box;
@@ -51,7 +51,7 @@
     position: relative;
     width: calc(90% - 60px);
     max-width: 800px;
-    background-color: white;
+    background-color: var(--bg-secondary);
     padding: 30px;
     border-radius: 15px;
     text-align: left;
@@ -80,12 +80,12 @@
 }
 
 .changelog a {
-    color: #6E6E6E;
+    color: var(--text-secondary);
-    cursor: none;
+    cursor: default;
 }
 
 .changelog a:active {
-    color: blue;
+    color: var(--btn-primary);
 }
 
 .update-button-container {
@@ -100,7 +100,8 @@
     display: none;
     justify-content: center;
     font-weight: bold;
-    background-color: #ddd;
+    color: var(--text-primary);
+    background-color: var(--border-color);
     width: 100%;
     border: none;
     padding: 12px;
@@ -110,12 +111,12 @@
 }
 
 .reboot {
-    color: #fff;
+    color: var(--btn-primary-text);
-    background-color: #007bff;
+    background-color: var(--btn-primary);
 }
 
 .card {
-    background-color: #fff;
+    background-color: var(--bg-secondary);
     border: none;
     box-sizing: border-box;
     border-radius: 12px;
@@ -145,9 +146,8 @@
     right: 0;
     margin: auto;
     width: fit-content;
-    background-color: #B1B1B1;
+    background-color: var(--border-color);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    border: 1px solid #ccc;
     border-radius: 50px 50px;
     opacity: 0;
     transform: scale(0);
@@ -196,7 +196,7 @@
 }
 
 #normal-indicator {
-    background-color: #007bff;
+    background-color: var(--btn-primary);
 }
 
 #hack-indicator {
@@ -255,11 +255,15 @@
     transform: translate(-50%, -50%) scale(0);
     opacity: 0;
     transition: transform 0.2s ease-out, opacity 0.3s ease;
+
+    svg {
+        fill: var(--btn-primary-text);
+    }
 }
 
 .checkbox:checked + .custom-checkbox {
-    border-color: #007bff;
+    border-color: var(--btn-primary);
-    background-color: #007bff;
+    background-color: var(--btn-primary);
     transition: border-color 0.1s ease;
     animation: checked-bounce 0.3s ease-out;
 }
@@ -305,32 +309,4 @@
     100% {
         transform: scale(1);
     }
-}
-
-@media (prefers-color-scheme: dark) {
-    .card {
-        background-color: #343434;
-    }
-
-    .update-card {
-        background-color: #4D4D4D;
-    }
-
-    .mode {
-        background-color: #343434;
-        border: 1px solid #6E6E6E;
-    }
-
-    .install {
-        background-color: #6E6E6E;
-        color: white;
-    }
-
-    .update-menu {
-        background-color: #343434;
-    }
-
-    .update-content a {
-        color: #C2C2C2;
-    }
 }

module/webui/styles/boot_hash.css

@@ -8,7 +8,7 @@
     width: calc(90% - 60px);
     max-width: 300px;
     height: fit-content;
-    background-color: #fff;
+    background-color: var(--bg-secondary);
     border-radius: 18px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     padding: 30px;
@@ -29,11 +29,12 @@
     height: 100px;
     font-size: 16px;
     padding: 10px;
-    background-color: #F5F5F5;
+    color: var(--text-primary);
-    border: 1px solid #ccc;
+    background-color: var(--bg-primary);
+    border: 1px solid var(--border-color);
     border-radius: 10px;
     box-sizing: border-box;
-    outline-color: #007bff;
+    outline-color: var(--btn-primary);
     resize: none;
 }
 
@@ -44,21 +45,9 @@
     border-radius: 12px;
     font-size: 20px;
     font-weight: bold;
-    background-color: #007bff;
+    background-color: var(--btn-primary);
-    color: white;
+    color: var(--btn-primary-text);
     position: relative;
     overflow: hidden;
     user-select: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    .boot-hash-card {
-        background-color: #343434;
-    }
-
-    .boot-hash-input {
-        background-color: #232323;
-        color: #fff;
-        border: 1px solid #6E6E6E;
-    }
 }

module/webui/styles/file_selector.css

@@ -7,7 +7,8 @@
     width: 90%;
     max-width: 600px;
     height: 80vh;
-    background-color: #fff;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
     border-radius: 15px;
     display: flex;
     flex-direction: column;
@@ -19,18 +20,18 @@
     display: flex;
     align-items: center;
     padding: 10px;
-    border-bottom: 2px solid #ccc;
+    border-bottom: 2px solid var(--border-color);
 }
 
 .current-path .separator {
-    color: #6E6E6E;
+    color: var(--text-secondary);
     padding: 0 4px;
 }
 
 .back-button {
     background: none;
     border: none;
-    fill: #6E6E6E;
+    fill: var(--border-color);
     user-select: none;
 }
 
@@ -39,13 +40,14 @@
     font-size: 16px;
     overflow: scroll;
     white-space: nowrap;
+    user-select: none;
 }
 
 .close-selector {
     background: none;
     border: none;
     font-size: 20px;
-    color: #ccc;
+    color: var(--border-color);
     padding: 0 5px;
 }
 
@@ -66,7 +68,7 @@
     align-items: center;
     padding: 10px;
     border-radius: 8px;
-    background-color: #fff;
+    background-color: var(--bg-secondary);
     position: relative;
     overflow: hidden;
     user-select: none;
@@ -75,7 +77,7 @@
 .file-item svg {
     flex-shrink: 0;
     margin-right: 10px;
-    fill: #6E6E6E;
+    fill: var(--text-secondary);
 }
 
 .file-item span {
@@ -83,28 +85,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
-
-@media (prefers-color-scheme: dark) {
-    .file-selector {
-        background-color: #343434;
-        color: #fff;
-    }
-
-    .file-selector-header {
-        border-bottom: 2px solid #232323;
-    }
-
-    .file-item {
-        background-color: #343434;
-    }
-
-    .current-path .separator {
-        color: #C2C2C2;
-    }
-
-    .file-item svg,
-    .back-button {
-        fill: #C2C2C2;
-    }
 }

module/webui/styles/global.css

@@ -1,12 +1,47 @@
 @import url('https://mui.kernelsu.org/mmrl/insets.css');
+@import url('https://mui.kernelsu.org/mmrl/colors.css');
 
 :root {
     --top-inset: var(--window-inset-top, 0px);
     --bottom-inset: var(--window-inset-bottom, 0px);
+
+    /* Background colors */
+    --bg-primary: var(--background, #F5F5F5);
+    --bg-secondary: var(--tonalSurface, #fff);
+    --bg-input: var(--surfaceBright, #F5F5F5);
+
+    /* Text colors */
+    --text-primary: var(--onSurface, #000);
+    --text-secondary: var(--onSurfaceVariant, #757575);
+
+    /* Border colors */
+    --border-color: var(--outlineVariant, #ccc);
+
+    /* Button colors */
+    --btn-primary: var(--primary, #007bff);
+    --btn-primary-text: var(--onPrimary, #fff);
+    --btn-uninstall: var(--error, #FF3636);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Background colors */
+        --bg-primary: var(--background, #151515);
+        --bg-secondary: var(--tonalSurface, #292929);
+        --bg-input: var(--surfaceBright, #1b1b1b);
+
+        /* Text colors */
+        --text-primary: var(--onSurface, #fff);
+        --text-secondary: var(--onSurfaceVariant, #C2C2C2);
+
+        /* Border colors */
+        --border-color: var(--outlineVariant, #636363);
+    }
 }
 
 body {
-    background-color: #F5F5F5;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
     padding-top: var(--top-inset);
     padding-bottom: var(--bottom-inset);
     margin: 0;
@@ -28,10 +63,10 @@ body {
 }
 
 .floating-btn {
-    background-color: #007bff;
+    color: var(--btn-primary-text);
+    background-color: var(--btn-primary);
     border: none;
     box-shadow: 0 4px 8px #0003;
-    color: #fff;
     display: none;
     bottom: 0;
     padding: 10px 20px;
@@ -72,7 +107,7 @@ body {
     background: none;
     border: none;
     font-size: 18px;
-    color: #ccc;
+    color: var(--border-color);
     user-select: none;
 }
 
@@ -125,12 +160,16 @@ body {
     justify-content: center;
     align-items: center;
     border-radius: 12px;
-    border: 3px solid #FF3636;
+    border: 3px solid var(--btn-uninstall);
     box-sizing: border-box;
-    background-color: #F5F5F5;
+    background-color: var(--bg-primary);
     white-space: nowrap;
     overflow: hidden;
     user-select: none;
+
+    svg {
+        fill: var(--btn-uninstall);
+    }
 }
 
 .uninstall-container i {
@@ -140,7 +179,7 @@ body {
 .uninstall-container span {
     font-size: 16px;
     font-weight: bold;
-    color: #FF3636;
+    color: var(--btn-uninstall);
 }
 
 .uninstall-container.hidden-uninstall {
@@ -157,9 +196,9 @@ body {
     max-width: 600px;
     max-height: 80%;
     overflow-y: auto;
-    background-color: white;
+    background-color: var(--bg-secondary);
     border-radius: 15px;
-    padding: 20px;
+    padding: 30px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -189,11 +228,13 @@ body {
     font-size: 18px;
     font-weight: bold;
     user-select: none;
+    color: var(--text-primary);
+    background-color: var(--border-color);
 }
 
 #confirm-uninstall {
-    color: #fff;
+    color: var(--btn-primary-text);
-    background-color: #007bff;
+    background-color: var(--btn-primary);
 }
 
 .permission-popup {
@@ -203,7 +244,8 @@ body {
 }
 
 .permission-content {
-    background-color: #fff;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
     padding: 20px;
     border-radius: 12px;
     width: 80%;
@@ -212,7 +254,6 @@ body {
 }
 
 .permission-content h2 {
-    color: #333;
     margin-bottom: 20px;
     font-size: 18px;
 }
@@ -252,30 +293,4 @@ body {
     to {
         transform: scale(3);
     }
-}
-
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #121212;
-        color: #fff;
-    }
-
-    .uninstall-container {
-        background-color: #121212;
-    }
-
-    .uninstall-confirmation,
-    .permission-content {
-        background-color: #343434;
-    }
-
-    .permission-content h2,
-    .permission-steps p {
-        color: #fff;
-    }
-
-    .uninstall-confirmation-button {
-        background-color: #6E6E6E;
-        color: white;
-    }
 }

module/webui/styles/header.css

@@ -7,7 +7,7 @@
     height: 40px;
     width: calc(100% - 10px);
     max-width: 1100px;
-    background-color: #F5F5F5;
+    background-color: var(--bg-primary);
     transition: transform 0.4s ease;
     z-index: 1100;
     margin-left: auto;
@@ -18,7 +18,7 @@
 }
 
 .header-block {
-    background-color: #F5F5F5;
+    background-color: var(--bg-primary);
     display: none;
     position: fixed;
     top: 0;
@@ -56,7 +56,7 @@
 }
 
 .language-icon {
-    fill: #000;
+    fill: var(--text-primary);
 }
 
 .language-menu {
@@ -64,10 +64,10 @@
     flex-direction: column;
     position: absolute;
     right: 5px;
-    background-color: white;
+    background-color: var(--bg-secondary);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     z-index: 1800;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     box-sizing: border-box;
     opacity: 0;
@@ -86,8 +86,8 @@
 .language-option {
     padding: 8px 10px;
     text-align: center;
-    color: #333;
+    color: var(--text-primary);
-    background-color: white;
+    background-color: var(--bg-secondary);
     border: none;
     font-size: 16px;
     width: 100%;
@@ -103,7 +103,7 @@
     left: 10px;
     width: calc(100% - 20px);
     height: 1px;
-    background-color: #ccc;
+    background-color: var(--border-color);
 }
 
 .language-option:last-child::after {
@@ -145,7 +145,7 @@
     position: relative;
     width: calc(95vw - 60px);
     max-width: 800px;
-    background-color: white;
+    background-color: var(--bg-secondary);
     padding: 30px;
     border-radius: 15px;
     text-align: left;
@@ -171,34 +171,4 @@
 
 .instruction p {
     margin: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-    .header-block,
-    .header {
-        background-color: #121212;
-    }
-
-    .help-button {
-        color: #fff;
-    }
-    
-    .language-icon {
-        fill: #eee;
-    }
-
-    .language-option,
-    .help-menu {
-        color: #eee;
-        background-color: #343434;
-    }
-
-    .language-menu {
-        background-color: #343434;
-        border: 1px solid #6E6E6E;
-    }
-
-    .language-option::after {
-        background-color: #6E6E6E;
-    }
 }

module/webui/styles/search_menu.css

@@ -14,8 +14,8 @@
 }
 
 .search-card {
-    background-color: white;
+    background-color: var(--bg-secondary);
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
@@ -36,6 +36,8 @@
 .search-input {
     position: absolute;
     border: none;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
     font-size: 17px;
     outline: none;
     left: 10px;
@@ -45,7 +47,7 @@
 
 .clear-btn {
     position: absolute;
-    color: #ccc;
+    color: var(--border-color);
     padding-bottom: 3px;
     right: 10px;
     border: none;
@@ -68,8 +70,8 @@
 }
 
 .menu-button {
-    background-color: white;
+    background-color: var(--bg-secondary);
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 50%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     width: 48px;
@@ -81,7 +83,7 @@
 
 .menu-icon {
     display: inline-block;
-    fill: #000;
+    fill: var(--text-primary);
     transform: rotate(0deg);
     transition: transform 0.2s ease;
 }
@@ -91,8 +93,8 @@
 }
 
 .menu-options {
-    background-color: white;
+    background-color: var(--bg-secondary);
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     box-sizing: border-box;
@@ -131,7 +133,7 @@
 .menu-options li {
     padding: 12px 15px;
     text-align: left;
-    background-color: white;
+    background-color: var(--bg-secondary);
 }
 
 .menu-options li::after {
@@ -141,7 +143,7 @@
     left: 15px;
     width: calc(100% - 30px);
     height: 1px;
-    background-color: #ccc;
+    background-color: var(--border-color);
 }
 
 .menu-options li:last-child::after {
@@ -165,37 +167,4 @@
     background-color: none;
     z-index: 100;
     display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    .menu-icon {
-        fill: #eee;
-    }
-
-    .search-input,
-    .search-card {
-        background-color: #343434;
-    }
-
-    .search-card {
-        border: 1px solid #6E6E6E;
-    }
-
-    .search-input {
-        color: white;
-    }
-
-    .menu-options,
-    #menu-button {
-        background-color: #343434;
-        border: 1px solid #6E6E6E;
-    }
-
-    .menu-options li {
-        background-color: #343434;
-    }
-
-    .menu-options li::after {
-        background-color: #6E6E6E
-    }
 }

module/webui/styles/security_patch.css

@@ -6,7 +6,8 @@
     display: block;
     position: fixed;
     top: 10%;
-    background-color: white;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
@@ -57,7 +58,7 @@
     display: inline-block;
     width: 20px;
     height: 20px;
-    border: 2px solid #ccc;
+    border: 2px solid var(--border-color);
     border-radius: 4px;
     box-sizing: border-box;
     transition: border-color 1s ease, transform 0.3s ease, background-color 0.4s ease;
@@ -70,11 +71,15 @@
     transform: translate(-50%, -50%) scale(0);
     opacity: 0;
     transition: transform 0.2s ease-out, opacity 0.3s ease;
+
+    svg {
+        fill: var(--btn-primary-text);
+    }
 }
 
 .advanced-toggle .checkbox:checked + .custom-checkbox {
-    border-color: #007bff;
+    border-color: var(--btn-primary);
-    background-color: #007bff;
+    background-color: var(--btn-primary);
     transition: border-color 0.1s ease;
     animation: checked-bounce 0.3s ease-out;
 }
@@ -93,15 +98,16 @@
 .input-group label {
     padding-top: 10px;
     font-size: 14px;
-    color: #666;
+    color: var(--text-secondary);
     user-select: none;
 }
 
 .input-group input {
     padding: 15px;
-    background-color: #F5F5F5;
+    color: var(--text-primary);
-    border: 1px solid #ccc;
+    background-color: var(--bg-primary);
-    outline-color: #007bff;
+    border: 1px solid var(--border-color);
+    outline-color: var(--btn-primary);
     border-radius: 10px;
     font-size: 16px;
 }
@@ -126,39 +132,17 @@
 
 .get-button,
 .auto-button {
-    background-color: #ddd;
+    color: var(--text-primary);
+    background-color: var(--border-color);
     user-select: none;
 }
 
 .save-button {
-    background-color: #007bff;
+    background-color: var(--btn-primary);
-    color: white;
+    color: var(--btn-primary-text);
     user-select: none;
 }
 
 .hidden {
     display: none;
-}
+}
-
-@media (prefers-color-scheme: dark) {
-    .security-patch-card {
-        background-color: #343434;
-        color: white;
-    }
-
-    .input-group label {
-        color: #ccc;
-    }
-
-    .input-group input {
-        background-color: #232323;
-        color: #fff;
-        border: 1px solid #6E6E6E;
-    }
-
-    .get-button,
-    .auto-button {
-        background-color: #6E6E6E;
-        color: white;
-    }
-}

module/webui/styles/system_app.css

@@ -13,7 +13,7 @@
     max-height: calc(80vh - 60px);
     overflow-y: auto;
     padding: 30px;
-    background-color: #fff;
+    background-color: var(--bg-secondary);
     border-radius: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
@@ -36,9 +36,10 @@
 .add-system-app-content input {
     width: 100%;
     padding: 15px;
-    background-color: #F5F5F5;
+    color: var(--text-primary);
-    border: 1px solid #ccc;
+    background-color: var(--bg-primary);
-    outline-color: #007bff;
+    border: 1px solid var(--border-color);
+    outline-color: var(--btn-primary);
     border-radius: 10px;
     box-sizing: border-box;
     font-size: 16px;
@@ -52,8 +53,8 @@
     border-radius: 12px;
     font-size: 18px;
     font-weight: bold;
-    background-color: #007bff;
+    background-color: var(--btn-primary);
-    color: white;
+    color: var(--btn-primary-text);
     user-select: none;
 }
 
@@ -78,7 +79,7 @@
     justify-content: space-between;
     width: 100%;
     max-width: 100%;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--border-color);
     padding: 10px;
     word-wrap: break-word;
     overflow-wrap: anywhere;
@@ -100,20 +101,4 @@
     justify-content: center;
     width: 30px;
     height: 30px;
-}
-
-@media (prefers-color-scheme: dark) {
-    .add-system-app-card {
-        background-color: #343434;
-    }
-
-    .add-system-app-content input {
-        background-color: #232323;
-        color: #fff;
-        border: 1px solid #6E6E6E;
-    }
-
-    .system-app-item {
-        border-bottom: 1px solid #6E6E6E;
-    }
 }