Răsfoiți Sursa

fix theme no backoffice

Gustavo Zanatta 9 ore în urmă
părinte
comite
2d1b5b0369

+ 1 - 0
index.html

@@ -6,6 +6,7 @@
     <meta charset="utf-8">
     <meta name="description" content="<%= productDescription %>">
     <meta name="format-detection" content="telephone=no">
+    <meta name="color-scheme" content="light only">
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 

+ 1 - 17
package-lock.json

@@ -2625,7 +2625,6 @@
       "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.33",
@@ -2946,7 +2945,6 @@
       "integrity": "sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rolldown/pluginutils": "1.0.0-beta.53"
       },
@@ -3147,7 +3145,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3736,7 +3733,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3964,7 +3960,6 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -5001,7 +4996,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5078,7 +5072,6 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -6729,7 +6722,6 @@
       "integrity": "sha512-1e4qoRgnn448pRuMvKGsFFymUCquZV0mpGgOyIKNgD3JVDTsVJyRBGH/Fm0tBb8WsWGgmB1mDe6/yJMQM37DUA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "acorn": "^8.5.0",
         "eslint-visitor-keys": "^3.0.0",
@@ -7639,7 +7631,6 @@
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
       "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^7.7.7"
       },
@@ -7694,7 +7685,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7741,7 +7731,6 @@
       "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -7858,7 +7847,6 @@
       "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.18.6.tgz",
       "integrity": "sha512-ZlK+vJXOBPSFDCNQDBDNwSI+AHoqaFPxK8ve6mhsYLhMKWI5b8zsGY9VU1xYjngO2aBvU4fvGWXy4tTbzrBk8Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 10.18.1",
         "npm": ">= 6.13.4",
@@ -8195,7 +8183,6 @@
       "integrity": "sha512-iTNAbFSlRpcHeeWu73ywU/8KuU/LZmNCSxp6fjQkJBD3ivUb8tpDrXhIxEzA05HlYMEwmtaUnb3RP+YNv162OQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -9585,7 +9572,6 @@
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9795,7 +9781,6 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -10482,7 +10467,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz",
       "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.25",
         "@vue/compiler-sfc": "3.5.25",
@@ -10549,6 +10533,7 @@
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -10889,7 +10874,6 @@
       "integrity": "sha512-odxVsHAkZYYglR30aPYRY4nUGJnoJ2y1ww2HDvZALo0BDETv9kWbi16J52eHs+PWRNmF4ub6nZqfVOeesOvntg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.0.0",
         "yaml": "^2.0.0"

+ 2 - 1
quasar.config.js

@@ -159,7 +159,8 @@ export default defineConfig((ctx) => {
     framework: {
       lang: "pt-BR",
       config: {
-        dark: "auto",
+        // O backoffice usa somente o tema light, independente do tema do SO/navegador
+        dark: false,
         notify: {
           position: "top-right",
         },

+ 1 - 19
src/App.vue

@@ -14,26 +14,8 @@ defineOptions({
 const { locale } = useI18n();
 
 const $q = useQuasar();
-const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-  ? "dark"
-  : "light";
 
-const theme = $q.cookies.get("theme") || systemTheme;
-
-const localeCookie = Cookies.get("locale") || window.navigator.language;
-
-console.log(theme, localeCookie);
-
-$q.dark.set(theme === "dark");
-
-watch(
-  () => $q.dark.isActive,
-  (value) => {
-    $q.cookies.set("theme", value ? "dark" : "light", {
-      expires: 365,
-    });
-  },
-);
+$q.dark.set(false);
 
 watch(
   () => locale.value,

+ 5 - 5
src/components/defaults/DefaultFilePicker.vue

@@ -218,11 +218,11 @@ const handleDrop = (event) => {
 @use "src/css/quasar.variables.scss";
 
 .image-preview-container {
-  .body--dark & {
-    --image-bg-color: #{map.get($colors-dark, "surface")};
-    --image-border-color: #{map.get($colors-dark, "primary")};
-    --image-border-hover-color: #{map.get($colors-dark, "primary-dark")};
-  }
+  // .body--dark & {
+  //   --image-bg-color: #{map.get($colors-dark, "surface")};
+  //   --image-border-color: #{map.get($colors-dark, "primary")};
+  //   --image-border-hover-color: #{map.get($colors-dark, "primary-dark")};
+  // }
 
   .body--light & {
     --image-bg-color: #{map.get($colors, "surface")};

+ 9 - 9
src/css/app.scss

@@ -49,17 +49,17 @@ body.body--light {
   background: #{map.get($colors, "page")} !important;
 }
 
-body.body--dark {
-  .q-drawer:has(.detached-container) {
-    background: #{map.get($colors-dark, "surface")} !important;
-  }
+// body.body--dark {
+//   .q-drawer:has(.detached-container) {
+//     background: #{map.get($colors-dark, "surface")} !important;
+//   }
 
-  .q-menu {
-    background: #{map.get($colors-dark, "surface")};
-  }
+//   .q-menu {
+//     background: #{map.get($colors-dark, "surface")};
+//   }
 
-  background: #{map.get($colors-dark, "page")};
-}
+//   background: #{map.get($colors-dark, "page")};
+// }
 
 .q-card__actions .q-btn {
   padding: 10px 16px;

+ 80 - 80
src/css/quasar.variables.scss

@@ -88,76 +88,76 @@ $colors: (
 );
 
 // Dark Theme Color Overrides
-$colors-dark: (
-  // Primary Colors and Variants (Purple Theme)
-  "primary": #8B5CF6,
-  // Base - Vibrant Purple
-  "primary-light": #A78BFA,
-  // Light Purple
-  "primary-dark": #7C3AED,
-  // Dark Purple
-
-  // Secondary Colors and Variants (Pink/Magenta Theme)
-  "secondary": #EC4899,
-  // Base - Pink
-  "secondary-light": #F9A8D4,
-  // Light Pink
-  "secondary-dark": #DB2777,
-  // Dark Pink
-
-  // Tertiary Colors and Variants (Amber/Orange Accent)
-  "terciary": #F59E0B,
-  // Base - Amber
-  "terciary-light": #FCD34D,
-  // Light Amber
-  "terciary-dark": #D97706,
-  // Dark Amber
-
-  // Background Colors
-  "page": #F9FAFB,
-  // Very Light Gray (App Background)
-
-  // Surface Colors (Cards, Panels)
-  "surface": #FFFFFF,
-  // Pure White
-  "surface-light": #F9FAFB,
-  // Very Light Gray
-  "surface-dark": #F3F4F6,
-  // Light Gray
-
-  // Text Colors
-  "text": #111827,
-  // Very Dark Gray (almost black)
-
-  // Status Colors with Variants
-  "success": #10B981,
-  // Emerald Green
-  "success-light": #34D399,
-  // Light Green
-  "success-dark": #059669,
-  // Dark Green
-
-  "error": #EF4444,
-  // Red
-  "error-light": #F87171,
-  // Light Red
-  "error-dark": #DC2626,
-  // Dark Red
-
-  "warning": #F59E0B,
-  // Amber
-  "warning-light": #FCD34D,
-  // Light Amber
-  "warning-dark": #D97706,
-  // Dark Amber
-
-  "info": #3B82F6,
-  // Blue
-  "info-light": #60A5FA,
-  // Light Blue
-  "info-dark": #2563EB
-  // Dark Blue
-);
+// $colors-dark: (
+//   // Primary Colors and Variants (Purple Theme)
+//   "primary": #8B5CF6,
+//   // Base - Vibrant Purple
+//   "primary-light": #A78BFA,
+//   // Light Purple
+//   "primary-dark": #7C3AED,
+//   // Dark Purple
+
+//   // Secondary Colors and Variants (Pink/Magenta Theme)
+//   "secondary": #EC4899,
+//   // Base - Pink
+//   "secondary-light": #F9A8D4,
+//   // Light Pink
+//   "secondary-dark": #DB2777,
+//   // Dark Pink
+
+//   // Tertiary Colors and Variants (Amber/Orange Accent)
+//   "terciary": #F59E0B,
+//   // Base - Amber
+//   "terciary-light": #FCD34D,
+//   // Light Amber
+//   "terciary-dark": #D97706,
+//   // Dark Amber
+
+//   // Background Colors
+//   "page": #F9FAFB,
+//   // Very Light Gray (App Background)
+
+//   // Surface Colors (Cards, Panels)
+//   "surface": #FFFFFF,
+//   // Pure White
+//   "surface-light": #F9FAFB,
+//   // Very Light Gray
+//   "surface-dark": #F3F4F6,
+//   // Light Gray
+
+//   // Text Colors
+//   "text": #111827,
+//   // Very Dark Gray (almost black)
+
+//   // Status Colors with Variants
+//   "success": #10B981,
+//   // Emerald Green
+//   "success-light": #34D399,
+//   // Light Green
+//   "success-dark": #059669,
+//   // Dark Green
+
+//   "error": #EF4444,
+//   // Red
+//   "error-light": #F87171,
+//   // Light Red
+//   "error-dark": #DC2626,
+//   // Dark Red
+
+//   "warning": #F59E0B,
+//   // Amber
+//   "warning-light": #FCD34D,
+//   // Light Amber
+//   "warning-dark": #D97706,
+//   // Dark Amber
+
+//   "info": #3B82F6,
+//   // Blue
+//   "info-light": #60A5FA,
+//   // Light Blue
+//   "info-dark": #2563EB
+//   // Dark Blue
+// );
 
 // Generate color utility classes for light theme
 @each $name, $color in $colors {
@@ -170,13 +170,13 @@ $colors-dark: (
 }
 
 // Generate color utility classes for dark theme
-.body--dark {
-  @each $name, $color in $colors-dark {
-    .text-#{$name} {
-      color: $color !important;
-    }
-    .bg-#{$name} {
-      background: $color !important;
-    }
-  }
-}
+// .body--dark {
+//   @each $name, $color in $colors-dark {
+//     .text-#{$name} {
+//       color: $color !important;
+//     }
+//     .bg-#{$name} {
+//       background: $color !important;
+//     }
+//   }
+// }

+ 5 - 5
src/css/table.scss

@@ -4,11 +4,11 @@
   // padding-left: 16px !important;
   // padding-right: 16px !important;
 
-  .body--dark & {
-    --table-bg-color: #{map.get($colors-dark, "surface")}; // Using our dark background
-    --table-border-color: #{map.get($colors-dark, "surface-light")}; // Darker border
-    --table-header-color: #{map.get($colors-dark, "text")}; // Light text for dark mode
-  }
+  // .body--dark & {
+  //   --table-bg-color: #{map.get($colors-dark, "surface")}; // Using our dark background
+  //   --table-border-color: #{map.get($colors-dark, "surface-light")}; // Darker border
+  //   --table-header-color: #{map.get($colors-dark, "text")}; // Light text for dark mode
+  // }
 
   .body--light & {
     --table-bg-color: #{map.get($colors, "surface")}; // Light background