Home Verkennen Help
Inloggen
SunnyMirror
/
netron
spiegel van https://github.com/lutzroeder/netron.git
2
0
Vork 0
Bestanden Issues 0 Wiki
Bladeren bron

Electron dark mode prototype

Lutz Roeder 7 jaren geleden
bovenliggende
45e5faf168
commit
d1368ab311
8 gewijzigde bestanden met toevoegingen van 131 en 52 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 2 0
      electron-builder.yml
  2. 1 1
      src/app.js
  3. 16 0
      src/entitlements.mas.plist
  4. 4 4
      src/view-electron.html
  5. 13 0
      src/view-electron.js
  6. 53 0
      src/view-render.css
  7. 18 0
      src/view-sidebar.css
  8. 24 47
      src/view.css

+ 2 - 0
electron-builder.yml
Bestand weergeven 

@@ -58,6 +58,8 @@ mac:
 
   target: 
   - dmg
 
   - zip
 
+  extendInfo:
 
+    NSRequiresAquaSystemAppearance: false
 
 linux:
 
   target:
 
   - AppImage

+ 1 - 1
src/app.js
Bestand weergeven 

@@ -564,7 +564,7 @@ class View {
 
         const size = electron.screen.getPrimaryDisplay().workAreaSize;
 
         var options = {};
 
         options.title = electron.app.getName(); 
-        options.backgroundColor = '#eeeeee';
 
+        options.backgroundColor = electron.systemPreferences.isDarkMode() ? '#1d1d1d' : '#e6e6e6';
 
         options.icon = electron.nativeImage.createFromPath(path.join(__dirname, 'icon.png'));
 
         options.minWidth = 600;
 
         options.minHeight = 400;

+ 16 - 0
src/entitlements.mas.plist
Bestand weergeven 

@@ -0,0 +1,16 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 
+<plist version="1.0">
 
+<dict>
 
+	<key>com.apple.security.app-sandbox</key>
 
+	<true/>
 
+	<key>com.apple.security.network.client</key>
 
+	<true/>
 
+	<key>com.apple.security.files.user-selected.read-only</key>
 
+	<true/>
 
+	<key>com.apple.security.files.user-selected.read-write</key>
 
+	<true/>
 
+	<key>com.apple.security.files.downloads.read-write</key>
 
+	<true/>
 
+</dict>
 
+</plist>

+ 4 - 4
src/view-electron.html
Bestand weergeven 

@@ -7,7 +7,7 @@
 
 <link rel='stylesheet' type='text/css' href='view-sidebar.css'>
 
 <link rel='stylesheet' type='text/css' href='view.css'>
 
 </head>
 
-<body>
 
+<body style='opacity: 0;'>
 
 <div id='welcome' class='background' style='display: block'>
 
     <a class='center logo' target='_blank'>
 
         <svg xmlns='http://www.w3.org/2000/svg' class='logo absolute' width='128' height='128' viewBox='0 0 1024 1024'>
 
@@ -63,9 +63,9 @@
 
     </a>
 
     <button id='open-file-button' class='center' style='top: 200px; width: 125px; opacity: 0;'>Open Model...</button>
 
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
 
-    <div style='font-weight: normal; color: #e6e6e6; user-select: none;'>.</div>
 
-    <div style='font-weight: 600; color: #e6e6e6; user-select: none;'>.</div>
 
-    <div style='font-weight: bold; color: #e6e6e6; user-select: none;'>.</div>
 
+    <div style='font-weight: normal; color: rgba(0, 0, 0, 0.01); user-select: none;'>.</div>
 
+    <div style='font-weight: 600; color: rgba(0, 0, 0, 0.01); user-select: none;'>.</div>
 
+    <div style='font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;'>.</div>
 
 </div>
 
 <svg id='graph' class='graph' preserveAspectRatio='xMidYMid meet' width='100%' height='100%'></svg>
 
 <div id='toolbar' class='toolbar' style='position: absolute; top: 10px; left: 10px; display: none;'>

+ 13 - 0
src/view-electron.js
Bestand weergeven 

@@ -26,6 +26,19 @@ class ElectronHost {
 
         window.eval = global.eval = () => {
 
             throw new Error('window.eval() not supported.');
 
         };
 
+
 
+        this._updateTheme();
 
+        electron.remote.systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => this._updateTheme());
 
+        document.body.style.opacity = 1;
 
+    }
 
+
 
+    _updateTheme() {
 
+        if (electron.remote.systemPreferences.isDarkMode()) {
 
+            document.body.classList.add('dark-mode');
 
+        }
 
+        else {
 
+            document.body.classList.remove('dark-mode');
 
+        }
 
     }
 
 
     get name() {

+ 53 - 0
src/view-render.css
Bestand weergeven 

@@ -129,3 +129,56 @@
 
     .node-item-operator-transform path { fill: rgba(51, 85, 68, 0.4); }
 
     .node-item-operator-data path { fill: rgba(85, 85, 85, 0.4); }
 
 }
 
+
 
+.dark-mode .edge-label text { fill: #b2b2b2; }
 
+.dark-mode .edge-path { stroke: #666666; }
 
+.dark-mode #arrowhead-vee { fill: #666666; }
 
+
 
+.dark-mode .node path { stroke: #1d1d1d; }
 
+.dark-mode .node line { stroke: #1d1d1d; }
 
+
 
+.dark-mode .select .node.border { stroke: #dfdfdf; }
 
+.dark-mode .select.edge-path { stroke: #dfdfdf; }
 
+
 
+.dark-mode .node-item-function path { fill: #404040; }
 
+.dark-mode .node-item-function text { fill: #dfdfdfdf; }
 
+.dark-mode .node-item-function:hover { cursor: hand; }
 
+.dark-mode .node-item-function:hover path { fill: #666666; }
 
+
 
+.dark-mode .node-item-operator path { fill: #303030; }
 
+.dark-mode .node-item-operator text { fill: #dfdfdf; }
 
+.dark-mode .node-item-operator:hover { cursor: hand; }
 
+.dark-mode .node-item-operator:hover path { fill: #808080; }
 
+.dark-mode .node-item-operator:hover text { fill: #dfdfdf; }
 
+
 
+.dark-mode .node-item path { stroke: #fff; }
 
+.dark-mode .node-item text { fill: #dfdfdf; }
 
+
 
+.dark-mode .node-attribute text { fill: #b2b2b2; }
 
+.dark-mode .node-attribute path { fill: #2d2d2d; }
 
+.dark-mode .node-attribute:hover path { fill: #666666; }
 
+
 
+.dark-mode .graph-item-input path { fill: #404040; }
 
+.dark-mode .graph-item-input:hover { cursor: hand; }
 
+.dark-mode .graph-item-input:hover path { fill: #666666; }
 
+
 
+.dark-mode .graph-item-output path { fill: #404040; }
 
+.dark-mode .graph-item-output:hover { cursor: hand; }
 
+.dark-mode .graph-item-output:hover path { fill: #666666; }
 
+
 
+.dark-mode .node-item-input path { fill: #404040; }
 
+.dark-mode .node-item-input:hover path { fill: #666666; }
 
+.dark-mode .node-item-constant path { fill: #4b4b4b; }
 
+.dark-mode .node-item-constant:hover path { fill: #666666; }
 
+
 
+.dark-mode .node-item-operator-layer path { fill: rgba(51, 85, 136, 0.4); }
 
+.dark-mode .node-item-operator-activation path { fill: rgba(75, 27, 22, 0.4); }
 
+.dark-mode .node-item-operator-activation path { fill: rgba(75, 27, 22, 0.4); }
 
+.dark-mode .node-item-operator-pool path { fill: rgba(51, 85, 51, 0.4); }
 
+.dark-mode .node-item-operator-pool path { fill: rgba(51, 85, 51, 0.4); }
 
+.dark-mode .node-item-operator-normalization path { fill: rgba(51, 85, 68, 0.4); }
 
+.dark-mode .node-item-operator-dropout path { fill: rgba(69, 71, 112, 0.4); }
 
+.dark-mode .node-item-operator-shape path { fill: rgba(108, 79, 71, 0.4); }
 
+.dark-mode .node-item-operator-tensor path { fill: rgba(89, 66, 59, 0.4); }
 
+.dark-mode .node-item-operator-transform path { fill: rgba(51, 85, 68, 0.4); }
 
+.dark-mode .node-item-operator-data path { fill: rgba(85, 85, 85, 0.4); }

+ 18 - 0
src/view-sidebar.css
Bestand weergeven 

@@ -65,3 +65,21 @@
 
     .sidebar-view-find li:hover { background: #383838; }
 
     
 }
 
+
 
+.dark-mode .sidebar { background-color: #2d2d2d; color: #dfdfdf; border-left: 1px solid #000; }
 
+.dark-mode .sidebar-view-item-value { background-color: #383838; border-color: #424242; }
 
+.dark-mode .sidebar-view-item-value-dark { background-color: #3c3c3c; }
 
+
 
+.dark-mode .sidebar-view-title { border-bottom-color: #424242; color: #dfdfdf; }
 
+.dark-mode .sidebar-view-header { border-bottom-color: #424242; color: #dfdfdf; }
 
+
 
+.dark-mode .sidebar-view-documentation h1 { border-bottom: 1px solid #424242; color: #dfdfdf; }
 
+.dark-mode .sidebar-view-documentation h2 { border-bottom: 1px solid #424242; color: #dfdfdf; }
 
+.dark-mode .sidebar-view-documentation p { color: #aaaaaa; }
 
+.dark-mode .sidebar-view-documentation tt { background-color:#1e1e1e; }
 
+.dark-mode .sidebar-view-documentation code { background-color: #1e1e1e; }
 
+.dark-mode .sidebar-view-documentation pre { background-color: #1e1e1e; }
 
+
 
+.dark-mode .sidebar-view-find input[type=text] { background: #383838; border-color: #424242; }
 
+.dark-mode .sidebar-view-find li:not(:first-child) { border-top: 1px solid #2a2a2a; }
 
+.dark-mode .sidebar-view-find li:hover { background: #383838; }

+ 24 - 47
src/view.css
Bestand weergeven 

@@ -158,50 +158,27 @@ body {
 
 }
 
 
 @media (prefers-color-scheme: dark) {
 
-    .background {
 
-        background-color: #1e1e1e;
 
-    }    
-
 
-    .logo .stroke {
 
-        stroke: #666666;
 
-    }
 
-    
-    .logo .fill {
 
-        fill: #666666;
 
-    }
 
-    
-    .logo .border {
 
-        stroke: #000000;
 
-    }
 
-    
-    .spinner .stroke {
 
-        stroke: #2d2d2d;
 
-    }
 
-
 
-    .graph {
 
-        background-color: #404040;
 
-    }
 
-
 
-    .background button {
 
-        color: #888888;
 
-        background-color: #1e1e1e;
 
-        border-color: #888888;
 
-    }
 
-    
-    .background button:hover { 
-        color: #1e1e1e;
 
-        background-color: #aaaaaa;
 
-    }    
-
 
-    .icon .border { 
-        stroke: #1d1d1d;
 
-    }    
-
 
-    .icon .stroke { 
-        stroke: #aaaaaa;
 
-    }
 
-
 
-    .icon:hover .stroke { 
-        stroke: #dfdfdf;
 
-    }
 
-}
 
+.background { background-color: #1e1e1e; }    
+.logo .stroke { stroke: #666666; }
 
+.logo .fill { fill: #666666; }
 
+.logo .border { stroke: #000000; }
 
+.spinner .stroke { stroke: #aaaaaa; }
 
+.graph { background-color: #404040; }
 
+.background button { color: #888888; background-color: #1e1e1e; border-color: #888888; }
 
+.background button:hover { color: #1e1e1e; background-color: #aaaaaa; }
 
+.icon .border { stroke: #1d1d1d; }    
+.icon .stroke { stroke: #aaaaaa; }
 
+.icon:hover .stroke { stroke: #dfdfdf; }
 
+}
 
+
 
+.dark-mode .background { background-color: #1e1e1e; }    
+.dark-mode .logo .stroke { stroke: #666666; }
 
+.dark-mode .logo .fill { fill: #666666; }
 
+.dark-mode .logo .border { stroke: #000000; }
 
+.dark-mode .spinner .stroke { stroke: #aaaaaa; }
 
+.dark-mode .graph { background-color: #404040; }
 
+.dark-mode .background button { color: #888888; background-color: #1e1e1e; border-color: #888888; }
 
+.dark-mode .background button:hover { color: #1e1e1e; background-color: #aaaaaa; }
 
+.dark-mode .icon .border { stroke: #1d1d1d; }    
+.dark-mode .icon .stroke { stroke: #aaaaaa; }
 
+.dark-mode .icon:hover .stroke { stroke: #dfdfdf; }