[5_34] 黑夜模式适配2

XmacsLabs · Dec 24, 2024 · 0a2d37f · 0a2d37f
1 parent 3b4420d
commit 0a2d37f
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 48 deletions.
diff --git a/docs/.vitepress/components/Button/DownloadButtonMacOS.vue b/docs/.vitepress/components/Button/DownloadButtonMacOS.vue
@@ -75,6 +75,7 @@ function downloadFileArm() {
   text-align: center;
   border-radius: 10px;
   background-color: white;
+  color: #333;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s, background-color 0.2s;
   cursor: pointer;
@@ -106,7 +107,6 @@ function downloadFileArm() {
 .button p {
   margin-top: 10px;
   font-size: 16px;
-  color: #333;
 }
 
 .hoverContent {
@@ -115,7 +115,6 @@ function downloadFileArm() {
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  color: #A5C9F8;
 }
 
 .modalBackdrop {
@@ -133,9 +132,11 @@ function downloadFileArm() {
 
 .modalContent {
   background: white;
+  color: black;
   padding: 20px;
   border-radius: 10px;
   text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 .smallButton {
@@ -199,4 +200,26 @@ function downloadFileArm() {
     font-size: 16px;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .button {
+    background-color: #333;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .modalContent {
+    background-color: #444;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
+  }
+
+  .hoverContent {
+    color: black;
+  }
+  
+  .smallButton, .closeButton {
+    color: white;
+  }
+}
 </style>
diff --git a/docs/.vitepress/components/Button/DownloadButtonUbuntu.vue b/docs/.vitepress/components/Button/DownloadButtonUbuntu.vue
@@ -77,6 +77,7 @@ function downloadFile2404() {
   text-align: center;
   border-radius: 10px;
   background-color: white;
+  color: #333;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s, background-color 0.2s;
   cursor: pointer;
@@ -108,7 +109,6 @@ function downloadFile2404() {
 .button p {
   margin-top: 10px;
   font-size: 16px;
-  color: #333;
 }
 
 .hoverContent {
@@ -117,7 +117,6 @@ function downloadFile2404() {
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  color: #ea4f06;
 }
 
 .modalBackdrop {
@@ -135,9 +134,11 @@ function downloadFile2404() {
 
 .modalContent {
   background: white;
+  color: black;
   padding: 20px;
   border-radius: 10px;
   text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 .smallButton {
@@ -201,4 +202,26 @@ function downloadFile2404() {
     font-size: 16px;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .button {
+    background-color: #333;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .modalContent {
+    background-color: #444;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
+  }
+
+  .hoverContent {
+    color: black;
+  }
+  
+  .smallButton, .closeButton {
+    color: white;
+  }
+}
 </style>
diff --git a/docs/.vitepress/components/Button/DownloadButtonWindows.vue b/docs/.vitepress/components/Button/DownloadButtonWindows.vue
@@ -60,7 +60,6 @@ function downloadFileGreen() {
   link.click();
   document.body.removeChild(link);
 }
-
 </script>
 
 <style module>
@@ -76,6 +75,7 @@ function downloadFileGreen() {
   text-align: center;
   border-radius: 10px;
   background-color: white;
+  color: #333;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s, background-color 0.2s;
   cursor: pointer;
@@ -107,7 +107,6 @@ function downloadFileGreen() {
 .button p {
   margin-top: 10px;
   font-size: 16px;
-  color: #333;
 }
 
 .hoverContent {
@@ -116,7 +115,7 @@ function downloadFileGreen() {
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  color: #007bff;
+  
 }
 
 .modalBackdrop {
@@ -134,9 +133,11 @@ function downloadFileGreen() {
 
 .modalContent {
   background: white;
+  color: black;
   padding: 20px;
   border-radius: 10px;
   text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 .smallButton {
@@ -200,4 +201,26 @@ function downloadFileGreen() {
     font-size: 16px;
   }
 }
-</style>
+
+@media (prefers-color-scheme: dark) {
+  .button {
+    background-color: #333;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .modalContent {
+    background-color: #444;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
+  }
+
+  .hoverContent {
+    color: black;
+  }
+  
+  .smallButton, .closeButton {
+    color: white;
+  }
+}
+</style>
diff --git a/docs/.vitepress/components/Button/SHA256Button.vue b/docs/.vitepress/components/Button/SHA256Button.vue
@@ -5,9 +5,7 @@
     <div v-if="showModal" :class="$style.modalBackdrop" @click.self="showModal = false">
       <div :class="$style.modalContent">
         <h3>{{ modalTitle }}</h3>
-        <pre>
-{{ checksums }}
-        </pre>
+        <pre>{{ checksums }}</pre>
         <button :class="$style.closeButton" @click="showModal = false">{{ closeButtonText }}</button>
       </div>
     </div>
@@ -40,63 +38,86 @@ f4bcb8d4a9bec63b158c93fc0efbc083da95de84ddf7fb84ecf56675120458e5  mogan-research
 
 <style module>
 .button {
-color: white;
-background-color: #007bff;
-padding: 10px 20px;
-border: none;
-border-radius: 5px;
-font-weight: bold;
-cursor: pointer;
-transition: background-color 0.3s, transform 0.3s;
+  color: white;
+  background-color: #007bff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
 }
 
 .button:hover {
-background-color: #0056b3;
+  background-color: #0056b3;
 }
 
 .button:active {
-background-color: #003f7f;
-transform: scale(0.95);
+  background-color: #003f7f;
+  transform: scale(0.95);
 }
 
 .modalBackdrop {
-position: fixed;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-background: rgba(0, 0, 0, 0.5);
-display: flex;
-align-items: center;
-justify-content: center;
-z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
 }
 
 .modalContent {
-background: white;
-padding: 20px;
-border-radius: 10px;
-text-align: left;
-max-width: 90%;
+  background: white;
+  color: black;
+  padding: 20px;
+  border-radius: 10px;
+  text-align: left;
+  max-width: 90%;
 }
 
 .closeButton {
-margin-top: 20px;
-padding: 5px 10px;
-font-size: 14px;
-color: white;
-background-color: #ff4d4d;
-border: none;
-border-radius: 5px;
-cursor: pointer;
-transition: background-color 0.2s;
+  margin-top: 20px;
+  padding: 5px 10px;
+  font-size: 14px;
+  color: white;
+  background-color: #ff4d4d;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s;
 }
 
 .closeButton:hover {
-background-color: #cc0000;
+  background-color: #cc0000;
 }
 
 .closeButton:active {
-background-color: #990000;
+  background-color: #990000;
+}
+
+@media (prefers-color-scheme: dark) {
+  .button {
+    background-color: #333;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .modalContent {
+    background-color: #444;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
+  }
+
+  .hoverContent {
+    color: black;
+  }
+  
+  .smallButton, .closeButton {
+    color: white;
+  }
 }
 </style>