From 7a1ca832adbb4adc327560cfc7daff17af87170b Mon Sep 17 00:00:00 2001 From: moosetwin0 <82544732+moosetwin0@users.noreply.github.com> Date: Sat, 1 Nov 2025 01:39:10 -0400 Subject: [PATCH 1/2] mention alias limit for simplelogin (#4229) --- docs/internet-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/internet-tools.md b/docs/internet-tools.md index 695ebf090..42fedf007 100644 --- a/docs/internet-tools.md +++ b/docs/internet-tools.md @@ -488,7 +488,7 @@ ## ▷ Email Aliasing * 🌐 **[⁠Email Aliasing Comparison](https://email-aliasing-comparison.netlify.app/)** / [GitHub](https://github.com/fynks/email-aliasing-comparison) -* ⭐ **[SimpleLogin](https://simplelogin.io/)** - Email Aliasing / [X](https://x.com/SimpleLogin) / [Subreddit](https://www.reddit.com/r/Simplelogin/) / [GitHub](https://github.com/simple-login/app) +* ⭐ **[SimpleLogin](https://simplelogin.io/)** - Email Aliasing / 10 Alias Limit / [X](https://x.com/SimpleLogin) / [Subreddit](https://www.reddit.com/r/Simplelogin/) / [GitHub](https://github.com/simple-login/app) * ⭐ **[addy.io](https://addy.io/)** - Email Aliasing / [GitHub](https://github.com/anonaddy/anonaddy) * ⭐ **[DuckDuckGo Email Protection](https://duckduckgo.com/email/)** - Email Aliasing / [Send Mail](https://duckduckgo.com/duckduckgo-help-pages/email-protection/duck-addresses/how-do-i-compose-a-new-email) * [Mailgw](https://mailgw.com/) - Email Aliasing From a5220e148563dd6c589d1f1fa90a3d515812f3e0 Mon Sep 17 00:00:00 2001 From: Land <84073086+LandWarderer2772@users.noreply.github.com> Date: Sat, 1 Nov 2025 11:10:04 +0530 Subject: [PATCH 2/2] Amoledtoggle (#4236) * Update constants.ts * Update constants.ts * Update index.md * everythin pure blak now Updated all dark mode and Halloween theme background color variables from dark gray values to pure black (rgb(0, 0, 0)) AMOLED BABYYYYYY * idk that it bothered me that hyphen was needed plus gotta give some credit to me for amoled BUT IM STILL GRATEFUL TO THE GREAT PPL WHO BUILT THIS * forgot this mb * Update constants.ts * Change background colors to pure black theme * Fix template closing tags in ColorPicker.vue * Add files via upload * Add AMOLED mode toggle to ColorPicker 1. Added AMOLED Mode as a Universal Toggle 2. New State Management isAmoledMode 3. New UI Element amoled toggle * Revert "Update ColorPicker.vue" This reverts commit 3fe4b690d7763c483ef7207a68064f204cdb7dd2, reversing changes made to 132ef4a25b3767e231e2559fc5a1cc48d7dd08a5. * Revert "Add AMOLED mode toggle to ColorPicker" This reverts commit 132ef4a25b3767e231e2559fc5a1cc48d7dd08a5. * Add AMOLED mode toggle to ColorPicker * Remove emoji from AMOLED toggle label --- .../theme/components/ColorPicker.vue | 111 +++++++++++------- 1 file changed, 71 insertions(+), 40 deletions(-) diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue index e4be89abf..b59ae9d01 100644 --- a/docs/.vitepress/theme/components/ColorPicker.vue +++ b/docs/.vitepress/theme/components/ColorPicker.vue @@ -2,6 +2,7 @@ import { colors } from '@fmhy/colors' import { useStorage, useStyleTag } from '@vueuse/core' import { watch, onMounted } from 'vue' +import Switch from './Switch.vue' // Add Halloween colors const halloweenColors = { @@ -40,6 +41,7 @@ const colorScales = [ type ColorNames = keyof typeof extendedColors const selectedColor = useStorage('preferred-color', 'halloween') +const isAmoledMode = useStorage('amoled-mode', false) const colorOptions = Object.keys(extendedColors).filter( (key) => typeof extendedColors[key as keyof typeof extendedColors] === 'object' @@ -47,7 +49,7 @@ const colorOptions = Object.keys(extendedColors).filter( const { css } = useStyleTag('', { id: 'brand-color' }) -const updateThemeColor = (colorName: ColorNames) => { +const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => { const colorSet = extendedColors[colorName] const cssVars = colorScales @@ -56,9 +58,30 @@ const updateThemeColor = (colorName: ColorNames) => { const htmlElement = document.documentElement + // Manage theme classes if (colorName === 'halloween') { - // Apply Halloween theme htmlElement.classList.add('theme-halloween') + } else { + htmlElement.classList.remove('theme-halloween') + } + + if (amoledEnabled) { + htmlElement.classList.add('theme-amoled') + } else { + htmlElement.classList.remove('theme-amoled') + } + + // Determine dark background color based on AMOLED mode + const darkBg = amoledEnabled ? '#000000' : 'rgb(26, 26, 26)' + const darkBgAlt = amoledEnabled ? '#000000' : 'rgb(23, 23, 23)' + const darkBgElv = amoledEnabled ? 'rgba(0, 0, 0, 0.9)' : 'rgba(23, 23, 23, 0.8)' + const darkBgSoft = amoledEnabled ? '#000000' : 'rgb(23, 23, 23)' + + // Apply Halloween theme backgrounds or normal backgrounds + if (colorName === 'halloween') { + const halloweenDarkBg = amoledEnabled ? '#000000' : 'rgb(15, 15, 15)' + const halloweenDarkBgAlt = amoledEnabled ? '#000000' : 'rgb(12, 12, 12)' + const halloweenDarkBgElv = amoledEnabled ? 'rgba(0, 0, 0, 0.9)' : 'rgba(12, 12, 12, 0.8)' css.value = ` :root { @@ -75,12 +98,21 @@ const updateThemeColor = (colorName: ColorNames) => { --vp-c-brand-2: ${colorSet[500]}; --vp-c-brand-3: ${colorSet[700]}; --vp-c-brand-soft: ${colorSet[300]}; + --vp-c-bg: ${halloweenDarkBg} !important; + --vp-c-bg-alt: ${halloweenDarkBgAlt} !important; + --vp-c-bg-elv: ${halloweenDarkBgElv} !important; + --vp-c-bg-soft: ${halloweenDarkBgAlt} !important; + } + + .dark html, .dark body { + background-color: ${halloweenDarkBg} !important; + } + + .dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app, .dark .vp-doc { + background-color: ${halloweenDarkBg} !important; } ` } else { - // Remove Halloween theme and apply other theme with normal backgrounds - htmlElement.classList.remove('theme-halloween') - css.value = ` :root { ${cssVars} @@ -100,10 +132,10 @@ const updateThemeColor = (colorName: ColorNames) => { --vp-c-brand-2: ${colorSet[500]}; --vp-c-brand-3: ${colorSet[700]}; --vp-c-brand-soft: ${colorSet[300]}; - --vp-c-bg: rgb(26, 26, 26) !important; - --vp-c-bg-alt: rgb(23, 23, 23) !important; - --vp-c-bg-elv: rgba(23, 23, 23, 0.8) !important; - --vp-c-bg-soft: rgb(23, 23, 23) !important; + --vp-c-bg: ${darkBg} !important; + --vp-c-bg-alt: ${darkBgAlt} !important; + --vp-c-bg-elv: ${darkBgElv} !important; + --vp-c-bg-soft: ${darkBgSoft} !important; } html, body { @@ -114,52 +146,45 @@ const updateThemeColor = (colorName: ColorNames) => { background-color: #ffffff !important; } - .VPHome { - background-color: #ffffff !important; - } - - .VPHome .VPHero { - background-color: #ffffff !important; - } - .dark html, .dark body { - background-color: rgb(26, 26, 26) !important; + background-color: ${darkBg} !important; } .dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app, .dark .vp-doc { - background-color: rgb(26, 26, 26) !important; - } - - .dark .VPHome { - background-color: rgb(26, 26, 26) !important; - } - - .dark .VPHome .VPHero { - background-color: rgb(26, 26, 26) !important; + background-color: ${darkBg} !important; } ` } } -// Set Halloween theme ASAP if its the pref -const storedTheme = localStorage.getItem('preferred-color') -if (!storedTheme || storedTheme === '"halloween"') { - document.documentElement.classList.add('theme-halloween') -} - -// Initialize theme color -updateThemeColor(selectedColor.value) - -// halloween stuff onMounted(() => { + // Set Halloween theme ASAP if its the pref (only in browser) + if (typeof window !== 'undefined') { + const storedTheme = localStorage.getItem('preferred-color') + const storedAmoled = localStorage.getItem('amoled-mode') + + if (!storedTheme || storedTheme === '"halloween"') { + document.documentElement.classList.add('theme-halloween') + } + if (storedAmoled === 'true') { + document.documentElement.classList.add('theme-amoled') + } + } + if (selectedColor.value === 'halloween') { document.documentElement.classList.add('theme-halloween') } + if (isAmoledMode.value) { + document.documentElement.classList.add('theme-amoled') + } + // Re-apply the theme to ensure everything is initialized - updateThemeColor(selectedColor.value) + updateThemeColor(selectedColor.value, isAmoledMode.value) }) -watch(selectedColor, updateThemeColor) +watch([selectedColor, isAmoledMode], ([color, amoled]) => { + updateThemeColor(color, amoled) +}) const normalizeColorName = (colorName: string) => colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() + @@ -171,7 +196,7 @@ const normalizeColorName = (colorName: string) =>