+
+
diff --git a/webroot/js/main.js b/webroot/js/main.js
index 1be1c0e..cd2b4ea 100644
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -21,6 +21,14 @@ export function setErrorData(errorLog) {
return finalLog
}
+const loading_screen = document.getElementById('loading_screen')
+loading_screen.style.display = 'none'
+
+let sys_lang = localStorage.getItem('/system/language')
+
+if (!sys_lang) sys_lang = setLangData('en_US')
+if (sys_lang !== 'en_US') await setNewLanguage(sys_lang, true);
+
(async () => {
const EXPECTED = 1
const UNEXPECTED_FAIL = 2
diff --git a/webroot/js/smallPage/theme.js b/webroot/js/smallPage/theme.js
index ce41ad5..bb4b637 100644
--- a/webroot/js/smallPage/theme.js
+++ b/webroot/js/smallPage/theme.js
@@ -1,19 +1,49 @@
import { smallPageDisabler } from '../smallPageDesabler.js'
+import { setAmoled } from '../themes/amoled.js'
import { setDark } from '../themes/dark.js'
import { setLight } from '../themes/light.js'
+import { setMonochrome } from '../themes/monochrome.js'
+// INFO: requirement variables
+let sys_theme
const page_toggle = document.getElementById('theme_page_toggle')
+const themeList = {
+ amoled: () => setAmoled(true),
+ dark: () => setDark(true),
+ light: () => setLight(true),
+ monochrome: () => setMonochrome(true),
+ system: (unavaliable) => {
+ const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+ if (isDark && unavaliable) setDark()
+ else setLight()
+ },
+}
+const setData = (mode) => {
+ localStorage.setItem('/system/theme', mode)
+ return mode
+}
-let sys_theme = localStorage.getItem('/system/theme')
+// INFO: Initial open logic
+sys_theme = localStorage.getItem('/system/theme')
if (!sys_theme) sys_theme = setData('dark')
+themeList[sys_theme](true)
-if (sys_theme == "system") {
- const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
- if (!isDark) setLight()
-} else if (sys_theme === 'light') setLight(true)
-
+// INFO: Event logic
document.getElementById('sp_theme_close').addEventListener('click', () => smallPageDisabler('theme', 'settings'))
+document.addEventListener('click', async (event) => {
+ const themeListKey = Object.keys(themeList)
+ const getThemeMode = event.target.getAttribute('theme-data')
+
+ if (!getThemeMode || typeof getThemeMode !== 'string' || !themeListKey.includes(getThemeMode)) return
+
+ themeList[getThemeMode](true)
+
+ smallPageDisabler('theme', 'settings')
+
+ sys_theme = setData(getThemeMode)
+}, false)
+
page_toggle.addEventListener('click', () => {
const previous = !localStorage.getItem('/cache/navbar/previous') ? setData('home') : localStorage.getItem('/cache/navbar/previous')
document.getElementById(`panel_${previous}`).classList.remove('show')
@@ -21,29 +51,6 @@ page_toggle.addEventListener('click', () => {
localStorage.setItem('/cache/page/small/previous', 'theme')
})
-document.addEventListener('click', async (event) => {
- const getSystemTheme = event.target.getAttribute('theme-data')
- if (!getSystemTheme || typeof getSystemTheme !== 'string') return
-
- switch (getSystemTheme) {
- case 'dark':
- setDark(true)
- break
- case 'light':
- setLight(true)
- break
- case 'system':
- const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
- if (isDark) setDark()
- else setLight()
- break
- }
-
- smallPageDisabler('theme', 'settings')
-
- sys_theme = setData(getSystemTheme)
-}, false)
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
if (sys_theme !== "system") return
const newColorScheme = event.matches ? "dark" : "light";
@@ -57,9 +64,3 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', eve
break
}
});
-
-function setData(mode) {
- localStorage.setItem('/system/theme', mode)
-
- return mode
-}
diff --git a/webroot/js/themes/amoled.js b/webroot/js/themes/amoled.js
new file mode 100644
index 0000000..c53f4a6
--- /dev/null
+++ b/webroot/js/themes/amoled.js
@@ -0,0 +1,45 @@
+import { setDarkNav } from './darkNavbar.js'
+
+const rootCss = document.querySelector(':root')
+
+/* INFO: Changes the icons to match the theme */
+const close_icons = document.getElementsByClassName('close_icon')
+const expand_icons = document.getElementsByClassName('expander')
+const copy_button = document.getElementById('errorh_copy')
+const clearall_button = document.getElementById('errorh_clear_all')
+const sp_lang_close = document.getElementById('sp_lang_close')
+const sp_theme_close = document.getElementById('sp_theme_close')
+
+export function setAmoled(chooseSet) {
+ rootCss.style.setProperty('--background', '#000000')
+ rootCss.style.setProperty('--font', '#d9d9d9')
+ rootCss.style.setProperty('--desc', '#a9a9a9')
+ rootCss.style.setProperty('--dim', '#0b0d0f')
+ rootCss.style.setProperty('--icon', '#22292d')
+ rootCss.style.setProperty('--icon-bc', '#171b1d')
+ rootCss.style.setProperty('--desktop-navbar', '#111417')
+ rootCss.style.setProperty('--desktop-navicon', '#1c2225')
+ rootCss.style.setProperty('--button', 'var(--background)')
+
+ if (chooseSet) setData('amoled')
+
+ for (const close_icon of close_icons) {
+ close_icon.innerHTML = '
'
+ }
+
+ for (const expand_icon of expand_icons) {
+ expand_icon.innerHTML = '
'
+ }
+
+ copy_button.innerHTML = '
'
+ clearall_button.innerHTML = '
'
+ sp_lang_close.innerHTML = '
'
+ sp_theme_close.innerHTML = '
'
+ setDarkNav()
+}
+
+function setData(mode) {
+ localStorage.setItem('/system/theme', mode)
+
+ return mode
+}
\ No newline at end of file
diff --git a/webroot/js/themes/dark.js b/webroot/js/themes/dark.js
index 2f888f1..2e35b00 100644
--- a/webroot/js/themes/dark.js
+++ b/webroot/js/themes/dark.js
@@ -14,7 +14,6 @@ export function setDark(chooseSet) {
rootCss.style.setProperty('--background', '#181c20')
rootCss.style.setProperty('--font', '#ffffff')
rootCss.style.setProperty('--desc', '#c9c9c9')
- rootCss.style.setProperty('--spliter', '#283136')
rootCss.style.setProperty('--dim', '#1d2327')
rootCss.style.setProperty('--icon', '#48565e')
rootCss.style.setProperty('--icon-bc', '#313a3f')
diff --git a/webroot/js/themes/light.js b/webroot/js/themes/light.js
index 6954dfc..ab03aed 100644
--- a/webroot/js/themes/light.js
+++ b/webroot/js/themes/light.js
@@ -21,7 +21,6 @@ export function setLight(chooseSet) {
rootCss.style.setProperty('--background', '#f2f2f2')
rootCss.style.setProperty('--font', '#181c20')
rootCss.style.setProperty('--desc', '#484d53')
- rootCss.style.setProperty('--spliter', '#4f6069')
rootCss.style.setProperty('--dim', '#e0e0e0')
rootCss.style.setProperty('--icon', '#acacac')
rootCss.style.setProperty('--desktop-navbar', '#fefefe')
diff --git a/webroot/js/themes/monochrome.js b/webroot/js/themes/monochrome.js
new file mode 100644
index 0000000..db89e18
--- /dev/null
+++ b/webroot/js/themes/monochrome.js
@@ -0,0 +1,45 @@
+import { setDarkNav } from './darkNavbar.js'
+
+const rootCss = document.querySelector(':root')
+
+/* INFO: Changes the icons to match the theme */
+const close_icons = document.getElementsByClassName('close_icon')
+const expand_icons = document.getElementsByClassName('expander')
+const copy_button = document.getElementById('errorh_copy')
+const clearall_button = document.getElementById('errorh_clear_all')
+const sp_lang_close = document.getElementById('sp_lang_close')
+const sp_theme_close = document.getElementById('sp_theme_close')
+
+export function setMonochrome(chooseSet) {
+ rootCss.style.setProperty('--background', '#141414')
+ rootCss.style.setProperty('--font', '#ffffff')
+ rootCss.style.setProperty('--desc', '#c9c9c9')
+ rootCss.style.setProperty('--dim', '#1c1c1c')
+ rootCss.style.setProperty('--icon', '#494949')
+ rootCss.style.setProperty('--icon-bc', '#292929')
+ rootCss.style.setProperty('--desktop-navbar', '#252525')
+ rootCss.style.setProperty('--desktop-navicon', '#3a3a3a')
+ rootCss.style.setProperty('--button', 'var(--background)')
+
+ if (chooseSet) setData('monochrome')
+
+ for (const close_icon of close_icons) {
+ close_icon.innerHTML = '
'
+ }
+
+ for (const expand_icon of expand_icons) {
+ expand_icon.innerHTML = '
'
+ }
+
+ copy_button.innerHTML = '
'
+ clearall_button.innerHTML = '
'
+ sp_lang_close.innerHTML = '
'
+ sp_theme_close.innerHTML = '
'
+ setDarkNav()
+}
+
+function setData(mode) {
+ localStorage.setItem('/system/theme', mode)
+
+ return mode
+}
\ No newline at end of file