Merge pull request #15 from xcodebuild/feature/style

修复一些样式问题

Author: xcodebuild

app/package-lock.json

@@ -1 +1,6 @@
-{"name":"iProxy","version":"1.2.0","main":"./dist/main.js","__note":"This file is generated by scripts/sync-version.js"}
+{
+  "name": "iProxy",
+  "version": "1.2.0",
+  "main": "./dist/main.js",
+  "__note": "This file is generated by scripts/sync-version.js"
+}

app/package.json

@@ -80,12 +80,6 @@ body {
         outline: none;
     }
 
-    button {
-        color: @font-color !important;
-        border-color: @button-border-color;
-        background-color: @button-bgcolor !important;
-    }
-
     .titlebar-stoplight .titlebar-close,
     .titlebar-stoplight .titlebar-minimize,
     .titlebar-stoplight .titlebar-fullscreen {

src/renderer/components/app/index.less

@@ -1,7 +1,7 @@
 import { CheckOutlined, CloseOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { Form } from '@ant-design/compatible';
 import '@ant-design/compatible/assets/index.css';
-import { Select, Button, Popover, Switch, InputNumber, Alert, Tooltip, Table } from 'antd';
+import { Select, Button, Popover, Switch, InputNumber, Alert, Tooltip, Table, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { CoreAPI } from '../../../../core-api';
 import { message } from 'antd';
@@ -158,7 +158,11 @@ class InnerSettingForm extends React.Component {
                 <Form.Item label={t('Default Port')}>
                     {getFieldDecorator('defaultPort')(<InputNumber min={1024} max={65534} />)}
                 </Form.Item>
-                <Form.Item label={t('Copyright')}>Version {version} Made with love</Form.Item>
+                <Form.Item label={t('Copyright')}>
+                    <Typography>
+                        Version {version} Made with love
+                    </Typography>
+                </Form.Item>
                 <Form.Item label={t('Actions')}>
                     <Button className="action-btn" loading={this.state.isUpdating} onClick={checkUpdate} type="primary">
                         {t('Check Update')}

src/renderer/extensions/setting/components/setting-form/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { CoreAPI } from '../../core-api';
 import { Extension } from '../../extension';
+import { useThemeMode } from '../../hooks/use-theme-mode';
 import { getWhistlePort } from '../../utils';
 export class Weinre extends Extension {
     constructor() {
@@ -33,6 +34,8 @@ export class Weinre extends Extension {
                 };
             }, []);
 
+            const { isDarkMode } = useThemeMode();
+
             function changeIframeStyle() {
                 const iframeDocumentHead = document.querySelector('iframe')?.contentDocument?.querySelector('head');
                 if (iframeDocumentHead) {
@@ -46,8 +49,19 @@ export class Weinre extends Extension {
                     iframeDocumentHead.appendChild(customStyle);
 
                     const container = document.querySelector('iframe')?.contentDocument?.querySelector('.description');
+
                     if (container) {
-                        container.innerHTML = `<div>
+                        container.innerHTML = `<style>
+                        ${isDarkMode ? `
+                        .content-header {
+                            background: #3b3b3d !important;
+                        }
+                        div {
+                            color : #f0f0f0 !important;
+                        }
+                        `: ''}
+                        </style>
+                        <div>
                             通过代理访问带有 iproxy=true 参数的页面开始调试
                         </div>`;
                     }

src/renderer/extensions/weinre/index.tsx

@@ -37,3 +37,8 @@
 
 @import "./antd-dark.less";
 @import "./base.less";
+
+
+label {
+    color: @text-color !important;
+}