vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-06 17:15:38 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Implement ui theme selector

Browse Source
This commit is contained in:
johnwang16
2024-10-18 22:08:58 -04:00
parent 7dd77e06d4
commit aa1a18015d
13 changed files with 84 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -64,7 +64,7 @@ services:
# DELETE END anyone trying to use this file: comment out / delete ABOVE lines, they are only for development purposes
# ---------------------------------------------------------------------------
environment:
# - APP_CONF_OVERRIDE={"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_dark_mode":"True"}
# - APP_CONF_OVERRIDE={"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_theme":"Dark"}
- TZ=${TZ}
- PORT=${PORT}
# ❗ DANGER ZONE BELOW - Setting ALWAYS_FRESH_INSTALL=true will delete the content of the /db & /config folders

4
dockerfiles/README.md
View File

@@ -41,7 +41,7 @@ docker run -d --rm --network=host \
| `PORT` |Port of the web interface | `20211` |
| `LISTEN_ADDR` |Set the specific IP Address for the listener address for the nginx webserver (web interface). This could be useful when using multiple subnets to hide the web interface from all untrusted networks. | `0.0.0.0` |
|`TZ` |Time zone to display stats correctly. Find your time zone [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) | `Europe/Berlin` |
|`APP_CONF_OVERRIDE` | JSON override for settings, e.g. `{"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_dark_mode":"True"}` (Experimental 🧪) | `N/A` |
|`APP_CONF_OVERRIDE` | JSON override for settings, e.g. `{"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_theme":"Dark"}` (Experimental 🧪) | `N/A` |
|`ALWAYS_FRESH_INSTALL` | If `true` will delete the content of the `/db` & `/config` folders. For testing purposes. Can be coupled with [watchtower](https://github.com/containrrr/watchtower) to have an always freshly installed `netalertx`/`netalertx-dev` image. | `N/A` |
### Docker paths
@@ -237,4 +237,4 @@ Big thanks to <a href="https://github.com/Macleykun">@Macleykun</a> & for help a
- Bitcoin: `1N8tupjeCK12qRVU2XrV17WvKK7LCawyZM`
- Ethereum: `0x6e2749Cb42F4411bc98501406BdcD82244e3f9C7`
> 📧 Email me at [jokob@duck.com](mailto:jokob@duck.com?subject=NetAlertX) if you want to get in touch or if I should add other sponsorship platforms.
> 📧 Email me at [jokob@duck.com](mailto:jokob@duck.com?subject=NetAlertX) if you want to get in touch or if I should add other sponsorship platforms.

2
front/css/app.css
View File

@@ -215,7 +215,7 @@
body
{
background-image: url('img/background.png');
background-image: url('../img/background.png');
}
/* -----------------------------------------------------------------------------

2
front/css/dark-patch.css
View File

@@ -18,7 +18,7 @@ html {
}
body {
background-image: url('img/boxed-bg-dark.png') !important;
background-image: url('../img/boxed-bg-dark.png') !important;
}
body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {

21
front/css/system-dark-patch-cal.css Executable file
View File

@@ -0,0 +1,21 @@
@media (prefers-dark-scheme: dark) {
.fc-sat {
background-color: #444D56; }
.fc-sun {
background-color: #444D56; }
.fc-today {
background-color: #8D9AAC !important;
border: none !important;
}
.fc-cell-content {
background-color: #272c30;
}
.fc-widget-header {
background-color: #353c42;
}
.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{
border-color: #353c42 !important;
}
}

2
front/css/system-dark-patch.css
View File

@@ -20,7 +20,7 @@
}
body {
background-image: url('img/boxed-bg-dark.png') !important;
background-image: url('../img/boxed-bg-dark.png') !important;
}
body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {

10
front/deviceDetails.php
View File

@@ -641,8 +641,14 @@
<!-- Dark-Mode Patch -->
<?php
if ($ENABLED_DARKMODE === True) {
echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
switch ($UI_THEME) {
case "Dark":
echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
break;
case "System":
echo '<link rel="stylesheet" href="css/system-dark-patch-cal.css">';
break;
}
?>

9
front/index.php
View File

@@ -103,8 +103,13 @@ if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
<!-- Dark-Mode Patch -->
<?php
if ($ENABLED_DARKMODE === True) {
echo '<link rel="stylesheet" href="css/dark-patch.css">';
switch ($UI_THEME) {
case "Dark":
echo '<link rel="stylesheet" href="css/dark-patch.css">';
break;
case "System":
echo '<link rel="stylesheet" href="css/system-dark-patch.css">';
break;
}
?>
<link rel="stylesheet" href="/css/offline-font.css">

24
front/js/common.js
View File

@@ -1186,18 +1186,24 @@ function hideUIelements(settingKey) {
// -----------------------------------------------------------------------------
// apply dark mode
// apply theme
$(document).ready(function() {
// Assume getSetting is a function that returns true or false for dark mode
if (getSetting("UI_dark_mode") === "True") {
// Add the dark mode stylesheet
setCookie("UI_dark_mode", "True")
$('head').append('<link rel="stylesheet" href="css/dark-patch.css">');
// Set the background image for dark mode
let theme = getSetting("UI_theme");
if (theme) {
theme = theme.replace("['","").replace("']","");
// Add the theme stylesheet
setCookie("UI_theme", theme);
switch(theme) {
case "Dark":
$('head').append('<link rel="stylesheet" href="css/dark-patch.css">');
break;
case "System":
$('head').append('<link rel="stylesheet" href="css/system-dark-patch.css">');
break
}
} else {
setCookie("UI_dark_mode", "False")
// Set the background image for light mode
setCookie("UI_theme", "Light");
}
});

9
front/php/templates/header.php
View File

@@ -73,8 +73,13 @@
<!-- Dark-Mode Patch -->
<?php
if ($ENABLED_DARKMODE === True) {
echo '<link rel="stylesheet" href="css/dark-patch.css">';
switch ($UI_THEME) {
case "Dark":
echo '<link rel="stylesheet" href="css/dark-patch.css">';
break;
case "System":
echo '<link rel="stylesheet" href="css/system-dark-patch.css">';
break;
}
?>

8
front/php/templates/skinUI.php
View File

@@ -4,12 +4,12 @@
// ## GUI settings processing start
// ###################################
if( isset($_COOKIE['UI_dark_mode']))
if( isset($_COOKIE['UI_theme']))
{
$ENABLED_DARKMODE = $_COOKIE['UI_dark_mode'] == "True";
$UI_THEME = $_COOKIE['UI_theme'];
}else
{
$ENABLED_DARKMODE = False;
$UI_THEME = "Light";
}
$pia_skin_selected = 'skin-blue';
@@ -18,4 +18,4 @@ $pia_skin_selected = 'skin-blue';
// ## GUI settings processing end
// ###################################
?>
?>

16
front/plugins/ui_settings/config.json
View File

@@ -461,30 +461,30 @@
]
},
{
"function": "dark_mode",
"function": "theme",
"type": {
"dataType": "boolean",
"dataType": "array",
"elements": [
{
"elementType": "input",
"elementOptions": [{ "type": "checkbox" }],
"elementType": "select",
"elementOptions": [{ "multiple": "false", "orderable": "false" }],
"transformers": []
}
]
},
"default_value": false,
"options": [],
"default_value": "Light",
"options": ["Light","Dark","System"],
"localized": ["name", "description"],
"name": [
{
"language_code": "en_us",
"string": "Dark mode"
"string": "Theme"
}
],
"description": [
{
"language_code": "en_us",
"string": "Enable dark mode."
"string": "UI theme to use. System will auto switch between Light and Dark."
}
]
}

10
front/presence.php
View File

@@ -216,8 +216,14 @@
<!-- Dark-Mode Patch -->
<?php
if ($ENABLED_DARKMODE === True) {
echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
switch ($UI_THEME) {
case "Dark":
echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
break;
case "System":
echo '<link rel="stylesheet" href="css/system-dark-patch-cal.css">';
break;
}
?>