调整主题色

细节样式优化

Author: Linho1219

src/App.vue

@@ -85,9 +85,6 @@ s-page {
   left: 0;
   right: 0;
 }
-* {
-  --s-color-outline: #6a757a;
-}
 #content {
   flex-grow: 1;
   display: flex;

src/editor/import.vue

@@ -1,17 +1,16 @@
 <template>
-  <s-dialog>
+  <s-dialog class="import-dialog">
     <s-tooltip class="data-import" slot="trigger">
       <s-fab slot="trigger">
         <SIconImport />
       </s-fab>
       {{ t("buttons.import") }}
     </s-tooltip>
-    <div slot="headline">{{ t("title.source") }}</div>
+    <div slot="headline" class="dialog-title">{{ t("title.source") }}</div>
     <s-text-field
       slot="text"
       label="JSON5 / JSON"
       multiLine
-      style="min-height: 180px; min-width: 40vw"
       v-model.lazy="importStr"
       class="monospace"
     ></s-text-field>
@@ -66,3 +65,14 @@ function handleImport() {
   }
 }
 </script>
+
+<style>
+.dialog-title {
+  user-select: none;
+}
+.import-dialog s-text-field {
+  min-height: 180px;
+  width: 40vw;
+  max-width: 500px;
+}
+</style>

src/public.css

@@ -50,3 +50,34 @@ input[type="number"] {
     background-color: #111415;
   }
 }
+
+s-page {
+  --s-color-scrim: #000000;
+  --s-color-primary: #00639a;
+  --s-color-on-primary: #ffffff;
+  --s-color-primary-container: #cee5ff;
+  --s-color-on-primary-container: #001d32;
+  --s-color-secondary: #51606f;
+  --s-color-on-secondary: #ffffff;
+  --s-color-secondary-container: #d5e4f7;
+  --s-color-on-secondary-container: #0e1d2a;
+  --s-color-tertiary: #68587a;
+  --s-color-on-tertiary: #ffffff;
+  --s-color-tertiary-container: #eedbff;
+  --s-color-on-tertiary-container: #231533;
+  --s-color-inverse-primary: #96ccff;
+  --s-color-dark-primary: #96ccff;
+  --s-color-dark-on-primary: #003353;
+  --s-color-dark-primary-container: #004a75;
+  --s-color-dark-on-primary-container: #cee5ff;
+  --s-color-dark-secondary: #b9c8da;
+  --s-color-dark-on-secondary: #233240;
+  --s-color-dark-secondary-container: #3a4857;
+  --s-color-dark-on-secondary-container: #d5e4f7;
+  --s-color-dark-tertiary: #d3bfe6;
+  --s-color-dark-on-tertiary: #382a49;
+  --s-color-dark-tertiary-container: #4f4061;
+  --s-color-dark-on-tertiary-container: #eedbff;
+  --s-color-dark-inverse-primary: #00639a;
+  --s-color-dark-outline: #6a757a;
+}