kingecg
/
regexptester
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

使用深色模式

This commit is contained in:
程广 2025-02-28 09:37:29 +08:00
parent 51450a75c7
commit 86d72edec5
3 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang=""> <html lang="zh" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />

22
src/components/RegExp.vue
View File

@ -119,7 +119,7 @@ onMounted(() => {
padding: 20px; padding: 20px;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
background-color: #1e1e1e; /* 暗色背景 */ /* background-color: #1e1e1e; /* 暗色背景 */
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} }
@ -127,7 +127,7 @@ onMounted(() => {
h1, h1,
h2 { h2 {
text-align: center; text-align: center;
color: #ffffff; /* 白色文字 */ /* color: #ffffff; /* 白色文字 */
} }
.regex-input, .regex-input,
@ -144,47 +144,47 @@ h2 {
.results { .results {
margin-top: 20px; margin-top: 20px;
padding: 15px; padding: 15px;
background-color: #2d2d2d; /* 暗色背景 */ /* background-color: #2d2d2d; /* 暗色背景 */
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} }
.result-item { .result-item {
border: 1px solid #444444; /* 暗色边框 */ /* border: 1px solid #444444; /* 暗色边框 */
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 4px; border-radius: 4px;
background-color: #333333; /* 暗色背景 */ /* background-color: #333333; /* 暗色背景 */
} }
.result-item p { .result-item p {
margin: 5px 0; margin: 5px 0;
color: #cccccc; /* 浅灰色文字 */ /*color: #cccccc; /* 浅灰色文字 */
} }
/* 匹配示意图样式 */ /* 匹配示意图样式 */
.match-diagram { .match-diagram {
margin-top: 20px; margin-top: 20px;
padding: 15px; padding: 15px;
background-color: #2d2d2d; /* 暗色背景 */ /*background-color: #2d2d2d; /* 暗色背景 */
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} }
.diagram-content { .diagram-content {
padding: 10px; padding: 10px;
background-color: #333333; /* 暗色背景 */ /*background-color: #333333; /* 暗色背景 */
border: 1px solid #444444; /* 暗色边框 */ /* border: 1px solid #444444; /* 暗色边框 */
border-radius: 4px; border-radius: 4px;
} }
.diagram-content pre { .diagram-content pre {
margin: 0; margin: 0;
color: #cccccc; /* 浅灰色文字 */ /* color: #cccccc; /* 浅灰色文字 */
} }
.highlight { .highlight {
background-color: #ffeb3b; /* 高亮颜色 */ /* background-color: #ffeb3b; /* 高亮颜色 */
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
} }

2
src/main.ts
View File

@ -1,6 +1,8 @@
// main.ts 或 main.js // main.ts 或 main.js
// main.ts 或 main.js // main.ts 或 main.js
import 'element-plus/dist/index.css'; import 'element-plus/dist/index.css';
// if you just want to import css
import 'element-plus/theme-chalk/dark/css-vars.css'
import { createApp } from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';