aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2025-11-27 16:31:09 +11:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

base: aria:a5220e148563dd6c589d1f1fa90a3d515812f3e0
Branches Tags
aria:main
aria:imgbot
aria:revert-4091-main
..
compare: aria:538105ee82b48162d89c036461746891436d6447
Branches Tags
aria:main
aria:imgbot
aria:revert-4091-main

No commits in common. "a5220e148563dd6c589d1f1fa90a3d515812f3e0" and "538105ee82b48162d89c036461746891436d6447" have entirely different histories.
a5220e1485 ... 538105ee82

2 changed files with 41 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

111
docs/.vitepress/theme/components/ColorPicker.vue
View file

@ -2,7 +2,6 @@
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 = {
@ -41,7 +40,6 @@ const colorScales = [
type ColorNames = keyof typeof extendedColors
const selectedColor = useStorage<ColorNames>('preferred-color', 'halloween')
const isAmoledMode = useStorage('amoled-mode', false)
const colorOptions = Object.keys(extendedColors).filter(
(key) => typeof extendedColors[key as keyof typeof extendedColors] === 'object'
@ -49,7 +47,7 @@ const colorOptions = Object.keys(extendedColors).filter(
const { css } = useStyleTag('', { id: 'brand-color' })
const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
const updateThemeColor = (colorName: ColorNames) => {
const colorSet = extendedColors[colorName]
const cssVars = colorScales
@ -58,30 +56,9 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
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 {
@ -98,21 +75,12 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
--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}
@ -132,10 +100,10 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
--vp-c-brand-2: ${colorSet[500]};
--vp-c-brand-3: ${colorSet[700]};
--vp-c-brand-soft: ${colorSet[300]};
--vp-c-bg: ${darkBg} !important;
--vp-c-bg-alt: ${darkBgAlt} !important;
--vp-c-bg-elv: ${darkBgElv} !important;
--vp-c-bg-soft: ${darkBgSoft} !important;
--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;
}
html, body {
@ -146,45 +114,52 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
background-color: #ffffff !important;
}
.VPHome {
background-color: #ffffff !important;
}
.VPHome .VPHero {
background-color: #ffffff !important;
}
.dark html, .dark body {
background-color: ${darkBg} !important;
background-color: rgb(26, 26, 26) !important;
}
.dark .VPApp, .dark .Layout, .dark .VPContent, .dark .VPHome, .dark .VPHero, .dark #app, .dark .vp-doc {
background-color: ${darkBg} !important;
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;
}
`
}
}
// 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, isAmoledMode.value)
updateThemeColor(selectedColor.value)
})
watch([selectedColor, isAmoledMode], ([color, amoled]) => {
updateThemeColor(color, amoled)
})
watch(selectedColor, updateThemeColor)
const normalizeColorName = (colorName: string) =>
colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() +
@ -196,7 +171,7 @@ const normalizeColorName = (colorName: string) =>
<div class="flex flex-wrap gap-2">
<div v-for="color in colorOptions" :key="color">
<button
:class=" [
:class="[
'inline-block w-6 h-6 rounded-full transition-all duration-200'
]"
@click="selectedColor = color"
@ -220,11 +195,5 @@ const normalizeColorName = (colorName: string) =>
<div class="mt-2 text-sm text-$vp-c-text-2">
Selected: {{ normalizeColorName(selectedColor) }}
</div>
<!-- AMOLED toggle -->
<div class="mt-4 flex items-center gap-2">
<span class="text-sm text-$vp-c-text-2">AMOLED</span>
<Switch @click="isAmoledMode = !isAmoledMode" />
</div>
</div>
</template>

2
docs/internet-tools.md
View file

@ -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 / 10 Alias Limit / [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 / [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