Add cyberpunk theme to the project

.devcontainer/devcontainer.json

@@ -0,0 +1,5 @@
+{
+  "tasks": {
+    "build": "npm install && npm run adb && npm run server && npm run scrcpy && npm run build"
+  }
+}

src/common/theme.json

@@ -1,9 +1,9 @@
 {
   "token": {
-    "colorPrimary": "#4fb155",
-    "colorBgContainer": "#f7f8fa",
-    "colorBgContainerDark": "#2b2d30",
-    "colorBorder": "#c9ccd6",
+    "colorPrimary": "#ff00ff",
+    "colorBgContainer": "#0a0a0a",
+    "colorBgContainerDark": "#1a1a1a",
+    "colorBorder": "#ff00ff",
     "colorBorderDark": "#4e5157"
   }
 }

src/common/theme.ts

@@ -1,17 +1,14 @@
-// light
-export const colorPrimary = `#4fb155`
+export const colorPrimary = `#ff00ff`
 export const colorSuccess = `#52c41a`
 export const colorWarning = `#faad14`
 export const colorError = `#ff4d4f`
 export const colorInfo = `#1677ff`
 export const colorLink = `#1677ff`
 export const colorTextBase = `#000`
 export const colorBgBase = `#fff`
-export const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-'Noto Color Emoji'`
+export const fontFamily = `Neuropol`
 export const fontFamilyCode = `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`
-export const fontSize = `14`
+export const fontSize = `16`
 export const lineWidth = `1`
 export const lineType = `solid`
 export const motionUnit = `0.1`
@@ -34,8 +31,8 @@ export const zIndexPopupBase = `1000`
 export const opacityImage = `1`
 export const wireframe = `false`
 export const motion = `true`
-export const colorBgContainer = `#f7f8fa`
-export const colorBorder = `#c9ccd6`
+export const colorBgContainer = `#0a0a0a`
+export const colorBorder = `#ff00ff`
 export const blue1 = `#e6f4ff`
 export const blue2 = `#bae0ff`
 export const blue3 = `#91caff`

src/renderer/devices/components/Toolbar.module.scss

@@ -18,3 +18,13 @@
     width: 60px;
   }
 }
+
+/* Hover effects and animations for toolbar buttons */
+button, .toolbar-icon {
+  transition: all 0.3s ease-in-out;
+}
+
+button:hover, .toolbar-icon:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
+}

src/renderer/luna.scss

@@ -128,3 +128,27 @@ $theme-variables: meta.module-variables(theme);
     border-radius: #{theme.$border-radius-x-s}px;
   }
 }
+
+/* Glowing text and borders */
+.glowing-text {
+  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;
+}
+
+.glowing-border {
+  box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;
+}
+
+/* Animations and transitions for buttons and links */
+button, a {
+  transition: all 0.3s ease-in-out;
+}
+
+button:hover, a:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
+}
+
+/* Apply glowing effects to headings, buttons, and other important elements */
+h1, h2, h3, h4, h5, h6, button, .important-element {
+  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;
+}

src/renderer/main.scss

@@ -87,3 +87,27 @@
   height: 100%;
   overflow-y: auto;
 }
+
+/* Glowing text and borders */
+.glowing-text {
+  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;
+}
+
+.glowing-border {
+  box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;
+}
+
+/* Animations and transitions for buttons and links */
+button, a {
+  transition: all 0.3s ease-in-out;
+}
+
+button:hover, a:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
+}
+
+/* Apply glowing effects to headings, buttons, and other important elements */
+h1, h2, h3, h4, h5, h6, button, .important-element {
+  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;
+}

src/renderer/main/components/application/Application.module.scss

@@ -45,3 +45,13 @@
     transform: scale3d(4, 4, 1);
   }
 }
+
+/* Hover effects and animations for application buttons and links */
+button, a {
+  transition: all 0.3s ease-in-out;
+}
+
+button:hover, a:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
+}