add: amoled and monochrome theme

This commit will add 2 new themes is monochrome and amoled

module/build.gradle.kts

@@ -180,11 +180,13 @@ androidComponents.onVariants { variant ->
                     set.add(Pair(root.file("webroot/js/translate/modules.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/translate/settings.js").asFile, null))
 
+                    set.add(Pair(root.file("webroot/js/themes/amoled.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/themes/dark.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/themes/darkNavbar.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/themes/light.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/themes/lightNavbar.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/themes/lightIcon.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/themes/monochrome.js").asFile, null))
 
                     set.add(Pair(root.file("webroot/js/switcher/fontChanger.js").asFile, null))
 

module/src/customize.sh

@@ -131,11 +131,13 @@ extract "$ZIPFILE" 'webroot/js/translate/action.js' "$MODPATH/webroot/js/transla
 extract "$ZIPFILE" 'webroot/js/translate/modules.js' "$MODPATH/webroot/js/translate" true
 extract "$ZIPFILE" 'webroot/js/translate/settings.js' "$MODPATH/webroot/js/translate" true
 
+extract "$ZIPFILE" 'webroot/js/themes/amoled.js' "$MODPATH/webroot/js/themes" true
 extract "$ZIPFILE" 'webroot/js/themes/dark.js' "$MODPATH/webroot/js/themes" true
 extract "$ZIPFILE" 'webroot/js/themes/darkNavbar.js' "$MODPATH/webroot/js/themes" true
 extract "$ZIPFILE" 'webroot/js/themes/light.js' "$MODPATH/webroot/js/themes" true
 extract "$ZIPFILE" 'webroot/js/themes/lightNavbar.js' "$MODPATH/webroot/js/themes" true
 extract "$ZIPFILE" 'webroot/js/themes/lightIcon.js' "$MODPATH/webroot/js/themes" true
+extract "$ZIPFILE" 'webroot/js/themes/monochrome.js' "$MODPATH/webroot/js/themes" true
 
 extract "$ZIPFILE" 'webroot/js/modal/errorHistory.js' "$MODPATH/webroot/js/modal" true
 

webroot/css/index.css

@@ -2,7 +2,6 @@
   --background: #181c20;
   --font: #fff;
   --desc: #c9c9c9;
-  --spliter: #283136;
   --bright: #8d1d19;
   --dim: #1d2327;
   --error: #8d1d19;
@@ -147,10 +146,6 @@ a {
   padding-bottom: 5px;
 }
 
-.spliter {
-  border-bottom: 1px solid var(--spliter); 
-}
-
 .desc {
   color: var(--desc);
 }
@@ -211,10 +206,6 @@ a {
   background: var(--small-card);
 }
 
-.small_card_bg_in {
-  background: var(--icon);
-}
-
 .icon_animation {
   transition: transform 0.05s ease-in-out;
 }

webroot/index.html

@@ -272,12 +272,18 @@
       </div>
       <div style="padding: 47px 0px;"></div>
       <div style="width: 100%; height: fit-content;">
+        <div theme-data="amoled" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
+          <div theme-data="amoled" id="small_panel_theme_amoled_option" class="dimc" style="font-size: 1.1em;">Amoled</div>
+        </div>
         <div theme-data="dark" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
           <div theme-data="dark" id="small_panel_theme_dark_option" class="dimc" style="font-size: 1.1em;">Dark</div>
         </div>
         <div theme-data="light" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
           <div theme-data="light" id="small_panel_theme_light_option" class="dimc" style="font-size: 1.1em;">Light</div>
         </div>
+        <div theme-data="monochrome" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
+          <div theme-data="monochrome" id="small_panel_theme_monochrome_option" class="dimc" style="font-size: 1.1em;">Monochrome</div>
+        </div>
         <div theme-data="system" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
           <div theme-data="system" id="small_panel_theme_system_option" class="dimc" style="font-size: 1.1em;">System Based</div>
         </div>

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

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") {
+// INFO: Event logic
-  const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-  if (!isDark) setLight()
-} else if (sys_theme === 'light') setLight(true)
-
 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
-}

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 = '<img src="assets/close.svg">'
+  }
+
+  for (const expand_icon of expand_icons) {
+    expand_icon.innerHTML = '<img class="dimc" src="assets/expand.svg">'
+  }
+
+  copy_button.innerHTML = '<img src="assets/content.svg">'
+  clearall_button.innerHTML = '<img src="assets/delete.svg">'
+  sp_lang_close.innerHTML = '<img src="./assets/back.svg"/>'
+  sp_theme_close.innerHTML = '<img src="./assets/back.svg"/>'
+  setDarkNav()
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/theme', mode)
+
+  return mode
+}

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')

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')

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 = '<img src="assets/close.svg">'
+  }
+
+  for (const expand_icon of expand_icons) {
+    expand_icon.innerHTML = '<img class="dimc" src="assets/expand.svg">'
+  }
+
+  copy_button.innerHTML = '<img src="assets/content.svg">'
+  clearall_button.innerHTML = '<img src="assets/delete.svg">'
+  sp_lang_close.innerHTML = '<img src="./assets/back.svg"/>'
+  sp_theme_close.innerHTML = '<img src="./assets/back.svg"/>'
+  setDarkNav()
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/theme', mode)
+
+  return mode
+}