diff --git a/astro/components/Splash.astro b/astro/components/Splash.astro
index f5285ad..a9e1f34 100644
--- a/astro/components/Splash.astro
+++ b/astro/components/Splash.astro
@@ -31,5 +31,4 @@ import '../styles/splash.scss'
))}
-
-
+
\ No newline at end of file
diff --git a/astro/components/pages/Dashboard.md b/astro/components/pages/Dashboard.md
index 2d8c75a..c62e982 100644
--- a/astro/components/pages/Dashboard.md
+++ b/astro/components/pages/Dashboard.md
@@ -5,6 +5,8 @@ A template replacement for FalixNodes Desktop.
___
+Toggle COLOR MODE 💡
+
## What was FalixNodes Desktop?
FalixNodes Desktop was developed by Korbs Studio, a FalixNodes Limited contractor. It was intended for its desktop customers to use FalixNodes more quickly and conveniently by allowing them to easily access both the client and game panels presented by FalixNodes. The capabilities of how the software works have progressed over time, and improved performance and security practices have been put in place to make the customer experience more efficient and trustworthy.
diff --git a/astro/components/pages/Settings.astro b/astro/components/pages/Settings.astro
index e69de29..58b352e 100644
--- a/astro/components/pages/Settings.astro
+++ b/astro/components/pages/Settings.astro
@@ -0,0 +1,15 @@
+---
+import SettingCard from '../../components/settings/card.astro'
+
+import Theme from '../../components/settings/appearance/theme.astro'
+
+import '../../styles/settings.scss'
+---
+
+
+
+
+
\ No newline at end of file
diff --git a/astro/components/settings/appearance/theme.astro b/astro/components/settings/appearance/theme.astro
new file mode 100644
index 0000000..7795024
--- /dev/null
+++ b/astro/components/settings/appearance/theme.astro
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/astro/components/settings/card.astro b/astro/components/settings/card.astro
new file mode 100644
index 0000000..f3f51f1
--- /dev/null
+++ b/astro/components/settings/card.astro
@@ -0,0 +1,13 @@
+---
+const {Title, Description} = Astro.props
+---
+
+
\ No newline at end of file
diff --git a/astro/layouts/App.astro b/astro/layouts/App.astro
index 36ac61b..aa29f2c 100644
--- a/astro/layouts/App.astro
+++ b/astro/layouts/App.astro
@@ -1,6 +1,8 @@
---
import Splash from '../components/Splash.astro'
import Sidebar from '../components/Sidebar.astro'
+
+// Tabs
import Dashboard from '../components/pages/Dashboard.md'
import Tab2 from '../components/pages/Tab2.astro'
import Tab3 from '../components/pages/Tab3.astro'
@@ -8,11 +10,12 @@ import Tab3A from '../components/pages/Tab3A.astro'
import Tab4 from '../components/pages/Tab4.astro'
import Settings from '../components/pages/Settings.astro'
+// Stylesheets
import '../styles/index.scss'
import '../styles/notification.scss'
---
-
-
+
+
diff --git a/astro/styles/index.scss b/astro/styles/index.scss
index 58b893f..fd8e698 100644
--- a/astro/styles/index.scss
+++ b/astro/styles/index.scss
@@ -7,13 +7,67 @@
--TabActiveText: black;
}
+///////////////////////////////////////////
+// Theme: Auto | Light | Dark ///
+///////////////////////////////////////////
+
+// The "Auto" theme does appear to work
+// on Linux, tested on GNOME 43 and KDE 2.27.
+// The "Auto" option is disabled for Linux.
+
+html.theme-auto { // Auto
+ @media (prefers-color-scheme: light) {
+ --SidebarBackground: rgb(239 240 241 / 75%);
+ --ContentBackground: #EFF0F1;
+
+ --TextColor: black;
+ --CardBackground: white;
+
+ --WebviewControlsColor: white;
+ --WebViewControlBackground: #EFF0F1;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ --SidebarBackground: rgba(35, 35, 35, 0.75);
+ --ContentBackground: #232323;
+
+ --TextColor: white;
+ --CardBackground: #282828;
+
+ --WebviewControlsColor: white;
+ --WebViewControlBackground: #232323;
+ }
+}
+
+html.theme-light { // Light
+ --SidebarBackground: rgb(239 240 241 / 75%);
+ --ContentBackground: #EFF0F1;
+
+ --TextColor: black;
+ --CardBackground: white;
+
+ --WebviewControlsColor: white;
+ --WebViewControlBackground: #EFF0F1;
+}
+
+html.theme-dark { // Dark
+ --SidebarBackground: rgba(35, 35, 35, 0.75);
+ --ContentBackground: #232323;
+
+ --TextColor: white;
+ --CardBackground: #282828;
+
+ --WebviewControlsColor: white;
+ --WebViewControlBackground: #232323;
+}
+
///////////////////////////////////////////
* {outline: none}
body {
background: transparent;
- color: white;
+ color: var(--TextColor);
font-family: arial;
}
@@ -51,7 +105,7 @@ body {
padding: 0px 20px;
display: grid;
grid-template-rows: 50px auto auto;
- background: rgb(35 35 35 / 75%);
+ background: var(--SidebarBackground);
.sidebar-header {
display: flex;
align-items: center;
@@ -74,7 +128,7 @@ body {
}
li {
cursor: pointer;
- color: white;
+ color: var(--TextColor);
display: flex;
width: 100%;
border-radius: 6px;
@@ -85,7 +139,7 @@ body {
svg {margin: 0px 16px}
}
li:hover {
- background: rgba(51, 51, 51, 0.5);
+ background: rgb(255 255 255 / 10%);
}
li.active {
background: var(--TabActiveBackground);
@@ -101,11 +155,11 @@ body {
width: calc(100% - 280px);
max-width: calc(100% - 280px);
height: 100%;
- background: #232323;
+ background: var(--ContentBackground);
.page {
display: none;
&.active {display: block}
- background: #232323;
+ background: var(--ContentBackground);
}
}
@@ -114,12 +168,12 @@ body {
// Webview Navigation
/// Top Bar
.webview-navigation#TopBar {
- background: black;
+ background: var(--ContentBackground);
padding: 6px;
cursor: default;
button {
- color: white;
- background: #202020;
+ fill: var(--WebviewControlsColor);
+ background: var(--WebViewControlBackground);
border: none;
aspect-ratio: 1;
width: 32px;
@@ -145,8 +199,8 @@ body {
aspect-ratio: 1;
height: 32px;
width: 32px;
- color: white;
- background: #232323;
+ fill: var(--WebviewControlsColor);
+ background: var(--WebViewControlBackground);
border: none;
border-radius: 6px;
margin-left: 6px;
@@ -156,6 +210,6 @@ body {
}
}
button:hover {
- background: #4b4b4b;
+ background: var(--WebViewControlBackground);
}
}
\ No newline at end of file
diff --git a/astro/styles/settings.scss b/astro/styles/settings.scss
new file mode 100644
index 0000000..a1ab489
--- /dev/null
+++ b/astro/styles/settings.scss
@@ -0,0 +1,98 @@
+// Settings
+/// Global
+.tab-header {
+ padding: 32px;
+}
+
+.setting {
+ background: var(--CardBackground);
+ border: 1px rgb(255 255 255 / 10%) solid;
+ border-radius: 6px;
+ padding: 12px 6px 12px 12px;
+ margin: 0px 32px 24px 32px;
+ h1, h2, p {
+ margin: 0px;
+ cursor: default;
+ }
+ h2 {
+ font-size: 18px;
+ }
+ .setting-header {
+ border-bottom: 1px rgba(255, 255, 255, 0.1) solid;
+ background: rgba(0, 0, 0, 0.25);
+ margin: -12px -6px 12px -12px;
+ padding: 14px 32px 6px 32px;
+ border-radius: 6px 6px 0px 0px;
+ h1 {
+ font-size: 24px;
+ margin-bottom: 6px;
+ }
+ p {
+ font-size: 14px;
+ margin-bottom: 12px;
+ }
+ }
+ .setting-content {
+ .option {
+ display: grid;
+ grid-template-columns: 360px auto;
+ grid-gap: 32px;
+ border-bottom: 1px rgb(255 255 255 / 10%) solid;
+ padding: 32px;
+ .option-meta {
+ h2 {
+ font-size: 16px;
+ margin-bottom: 12px;
+ margin-top: 6px;
+ }
+ p {
+ font-size: 14px;
+ color: rgb(145 145 145);
+ }
+ }
+ }
+ }
+}
+
+
+// Appearance
+/// Theme
+[os="Linux"] .theme #auto {display: none !important}
+.theme {
+ button {
+ background: #181818;
+ border: 1px rgb(255 255 255 / 10%) solid;
+ color: white;
+ border-radius: 10px;
+ aspect-ratio: 1;
+ width: 84px;
+ cursor: pointer;
+ margin-right: 6px;
+ transition: 0.3s border;
+ p {
+ margin: 96px 0px -32px 0px;
+ color: gray;
+ transition: 0.3s color;
+ }
+ }
+ button:hover {
+ border: 1px white solid;
+ transition: 0.3s border;
+ p {
+ color: white;
+ transition: 0.3s color;
+ }
+ }
+ .theme-active::before {
+ content: "";
+ background: var(--TabActiveBackground);
+ width: 20px;
+ position: absolute;
+ margin: 50px 0px 0px 10px;
+ border-radius: 50px;
+ aspect-ratio: 1;
+ }
+}
+button#auto {background-image: url(/public/images/settings/theme/Auto.png)}
+button#light {background-image: url(/public/images/settings/theme/Light.png)}
+button#dark {background-image: url(/public/images/settings/theme/Dark.png)}
\ No newline at end of file
diff --git a/electron/index.js b/electron/index.js
index 19b6d5c..3ef7cb6 100644
--- a/electron/index.js
+++ b/electron/index.js
@@ -22,8 +22,8 @@ log.transports.console.format = '\x1b[34m[electron]:\x1b[37m'
console.log = log.log
// Use the correct icon depending on the operating system
-if /* If macOS */ (process.platform == 'darwin') {global.AppIcon = 'public/images/icons/app/macOS.icns' }
-else if /* If Windows */ (process.platform == 'win32') {global.AppIcon = 'public/images/icons/app/Windows.png' }
+if /* If macOS */ (process.platform === 'darwin') {global.AppIcon = 'public/images/icons/app/macOS.icns' }
+else if /* If Windows */ (process.platform === 'win32') {global.AppIcon = 'public/images/icons/app/Windows.png' }
else /* If Linux */ {global.AppIcon = 'public/images/icons/app/Linux.png' }
function createWindow () {
@@ -54,12 +54,18 @@ function createWindow () {
// Doc: https://www.electronjs.org/docs/latest/api/browser-window#showing-the-window-gracefully
mainWindow.once('ready-to-show', () => {mainWindow.show()})
+ // Set Platform Class
+ if /* If macOS */ (process.platform === 'darwin') { mainWindow.webContents.executeJavaScript(`document.querySelector('html').setAttribute('os', 'Mac')`) }
+ else if /* If Windows */ (process.platform === 'win32') { mainWindow.webContents.executeJavaScript(`document.querySelector('html').setAttribute('os', 'Windows')`) }
+ else /* If Linux */ { mainWindow.webContents.executeJavaScript(`document.querySelector('html').setAttribute('os', 'Linux')`) }
+
// Pushy - Pushy Notification System (PNS)
mainWindow.webContents.on('did-finish-load', () => {Pushy.listen()})
Pushy.register({ appId: process.env.PushyAppId }).then((deviceToken) => {}).catch((error) => {console.log('Pushy registration error: ' + error.message)})
setTimeout(() => {
Pushy.setNotificationListener((data) => {
+ new Notification({ title: data.title, body: data.message }).show()
if(process.env.NotificationType === 'Native') {
new Notification({ title: data.title, body: data.message }).show()
}
@@ -69,7 +75,7 @@ function createWindow () {
`)
}
})
- }, 10000) // If this is triggered too soon, the notifications won't work.
+ }, 5000) // If this is triggered too soon, the notifications won't work.
if (Pushy.isRegistered()) {Pushy.subscribe('AppName').then(() => {}).catch((error) => {console.error(error)})}
diff --git a/public/navigation.js b/public/scripts/navigation.js
old mode 100755
new mode 100644
similarity index 100%
rename from public/navigation.js
rename to public/scripts/navigation.js
diff --git a/public/scripts/theme.js b/public/scripts/theme.js
new file mode 100644
index 0000000..78fc1ba
--- /dev/null
+++ b/public/scripts/theme.js
@@ -0,0 +1,49 @@
+let AppTheme = localStorage.getItem('AppTheme')
+if (AppTheme == null) {Theme('Dark')} else {Theme(AppTheme)}
+
+function Theme(theme) {
+ if (theme === 'Auto') {
+ document.querySelector('html').setAttribute('class', 'theme-auto')
+ setTimeout(() => {ThemeIsAuto()}, 200)
+ } else if (theme === 'Light') {
+ document.querySelector('html').setAttribute('class', 'theme-light')
+ setTimeout(() => {ThemeIsLight()}, 200)
+ } else if (theme === 'Dark') {
+ document.querySelector('html').setAttribute('class', 'theme-dark')
+ setTimeout(() => {ThemeIsDark()}, 200)
+ }
+ localStorage.setItem('AppTheme', theme)
+}
+
+function ThemeIsReset() {
+ document.querySelector(".theme #auto").setAttribute('class', 'theme')
+ document.querySelector(".theme #auto").style.border = '1px rgba(255, 255, 255, 0.1) solid'
+ document.querySelector(".theme #auto > p").style.color = 'gray'
+
+ document.querySelector(".theme #light").setAttribute('class', 'theme')
+ document.querySelector(".theme #light").style.border = '1px rgba(255, 255, 255, 0.1) solid'
+ document.querySelector(".theme #light > p").style.color = 'gray'
+
+ document.querySelector(".theme #dark").setAttribute('class', 'theme')
+ document.querySelector(".theme #dark").style.border = '1px rgba(255, 255, 255, 0.1) solid'
+ document.querySelector(".theme #dark > p").style.color = 'gray'
+}
+
+function ThemeIsAuto() {
+ ThemeIsReset()
+ document.querySelector(".theme #auto").setAttribute('class', 'theme theme-active')
+ document.querySelector(".theme #auto").style.border = '1px var(--TabActiveBackground) solid'
+ document.querySelector(".theme #auto > p").style.color = 'var(--TabActiveBackground)'
+}
+function ThemeIsLight() {
+ ThemeIsReset()
+ document.querySelector(".theme #light").setAttribute('class', 'theme theme-active')
+ document.querySelector(".theme #light").style.border = '1px var(--TabActiveBackground) solid'
+ document.querySelector(".theme #light > p").style.color = 'var(--TabActiveBackground)'
+}
+function ThemeIsDark() {
+ ThemeIsReset()
+ document.querySelector(".theme #dark").setAttribute('class', 'theme theme-active')
+ document.querySelector(".theme #dark").style.border = '1px var(--TabActiveBackground) solid'
+ document.querySelector(".theme #dark > p").style.color = 'var(--TabActiveBackground)'
+}
\ No newline at end of file