diff --git a/alt-popup.js b/alt-popup.js index 866aac9..6c7eac0 100644 --- a/alt-popup.js +++ b/alt-popup.js @@ -1,6 +1,5 @@ -// custom popups that appear on hover that uses the alt attribute on elements -// generated with ai i'm SORRY but i'm stupid and this works so its probably fiiiine -// i'll probably redo this when i can be assed to learn js myself +// custom popups that appear on hover that uses the alt/aria-label attribute on elements +// replacement for using title without the issue it causes with screen readers and such document.addEventListener("DOMContentLoaded", function () { let popup = document.getElementById("alt-popup"); diff --git a/colors.css b/colors.css index 5940049..db1b049 100644 --- a/colors.css +++ b/colors.css @@ -58,7 +58,7 @@ it doesn't have a name, call it "synth.download color scheme official real" --selection: #253340; --comment: #5c6773; --accent: #e6b450; - + /* original ayu colors */ --orange: #ffb454; --green: #aad94c; @@ -94,4 +94,99 @@ it doesn't have a name, call it "synth.download color scheme official real" --active: rgba(255, 255, 255, 0.1); --focus: #ffb454; } -} \ No newline at end of file +} + +/* + +varient of the theme modified for use with the theme selector + +*/ + +/* Theme classes for manual theme selection */ +html[data-theme="light"] { + /* base colors */ + --background: #fafafa; + --foreground: #3d454d; + --selection: #f0eee4; + --comment: #abb0b6; + --accent: #ffaa33; + + /* original ayu colors */ + --orange: #ff9940; + --green: #86b300; + --blue: #4cbf99; + --purple: #a37acc; + --red: #ec3838; + + /* extended catppuccin based colors */ + --flamingo: #ff7d7d; + --rosewater: #eca69a; + --pink: #ff8adb; + --mauve: #ba8aff; + --maroon: #e06c75; + --peach: #ffac6b; + --yellow: #e5c07b; + --teal: #2bbac5; + --sky: #3eacce; + --sapphire: #4db5d0; + --lavender: #7881ce; + + /* ui accent colors */ + --ui-orange: #fa8d3e; + --ui-green: #91b362; + --ui-blue: #6994bf; + --ui-purple: #7e57c2; + --ui-teal: #56c2c0; + --ui-lavender: #9d8cdb; + + /* misc. */ + --border: #e4e4e4; + --shadow: rgba(0, 0, 0, 0.1); + --hover: rgba(0, 0, 0, 0.05); + --active: rgba(0, 0, 0, 0.1); + --focus: #86b300; +} + +html[data-theme="dark"] { + /* base colors */ + --background: #0a0e14; + --foreground: #d8d6d2; + --selection: #253340; + --comment: #5c6773; + --accent: #e6b450; + + /* original ayu colors */ + --orange: #ffb454; + --green: #aad94c; + --blue: #59c2ff; + --purple: #d2a6ff; + --red: #f0646b; + + /* extended catppuccin based colors */ + --flamingo: #f2cdcd; + --rosewater: #f5e0dc; + --pink: #ffc9e3; + --mauve: #cba6f7; + --maroon: #eba0ac; + --peach: #ffcca8; + --yellow: #f9e2af; + --teal: #8ddedc; + --sky: #89dceb; + --sapphire: #74c7ec; + --lavender: #b4befe; + + /* ui accent colors */ + --ui-orange: #e6b450; + --ui-green: #aad94c; + --ui-blue: #39bae6; + --ui-purple: #a37acc; + --ui-teal: #7adbd3; + --ui-lavender: #ada0f3; + + /* misc. */ + --border: #1a1f29; + --shadow: rgba(0, 0, 0, 0.4); + --hover: rgba(255, 255, 255, 0.05); + --active: rgba(255, 255, 255, 0.1); + --focus: #ffb454; +} diff --git a/donate/index.html b/donate/index.html index caa92e2..2d00703 100644 --- a/donate/index.html +++ b/donate/index.html @@ -19,6 +19,7 @@ + @@ -58,12 +59,28 @@ diff --git a/index.html b/index.html index 1413aa8..b4f13ea 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@ + @@ -59,12 +60,29 @@ diff --git a/me/index.html b/me/index.html index bbb5617..333d386 100644 --- a/me/index.html +++ b/me/index.html @@ -21,6 +21,7 @@ + @@ -60,12 +61,28 @@ diff --git a/me/ruben/index.html b/me/ruben/index.html index 5c239ae..7fe4c8b 100644 --- a/me/ruben/index.html +++ b/me/ruben/index.html @@ -19,6 +19,7 @@ + @@ -57,12 +58,28 @@ diff --git a/ruben.css b/ruben.css index 9525641..17c0736 100644 --- a/ruben.css +++ b/ruben.css @@ -8,8 +8,28 @@ replaces the accent color with ruben flavored goo --accent: #00d131 !important; } +@media (prefers-color-scheme: light) { + .nav-baselink, .nav-accessibility { + background-color: var(--accent) !important; + color: var(--foreground) !important; + } +} + @media (prefers-color-scheme: dark) { :root { --accent: #65ff88 !important; } +} + +html[data-theme="light"] { + --accent: #00d131 !important; + + .nav-baselink, .nav-accessibility { + background-color: var(--accent) !important; + color: var(--foreground) !important; + } +} + +html[data-theme="dark"] { + --accent: #65ff88 !important; } \ No newline at end of file diff --git a/settings.js b/settings.js new file mode 100644 index 0000000..475e8fb --- /dev/null +++ b/settings.js @@ -0,0 +1,97 @@ +document.addEventListener('DOMContentLoaded', function() { + // all available settings + const fontInputs = document.querySelectorAll('input[name="font-setting"]'); + const themeInputs = document.querySelectorAll('input[name="theme-setting"]'); + const uncapitalizationCheckbox = document.getElementById('uncapitalization'); + const disableBgCheckbox = document.getElementById('disable-bg'); + const disableFocusAnimationsCheckbox = document.getElementById('disable-focus-animations'); + const disableAlttextCheckbox = document.getElementById('disable-alttext'); + + // load saved settings + loadSettings(); + applyTheme(); + + // event listeners on all inputs + fontInputs.forEach(input => { + input.addEventListener('change', saveSettings); + }); + + themeInputs.forEach(input => { + input.addEventListener('change', function() { + saveSettings(); + applyTheme(); + }); + }); + + uncapitalizationCheckbox.addEventListener('change', saveSettings); + disableBgCheckbox.addEventListener('change', saveSettings); + disableFocusAnimationsCheckbox.addEventListener('change', saveSettings); + disableAlttextCheckbox.addEventListener('change', saveSettings); + + // settings saving function + function saveSettings() { + // save font setting + const selectedFont = document.querySelector('input[name="font-setting"]:checked').id; + localStorage.setItem('accessibility-font', selectedFont); + + // save theme setting + const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value; + localStorage.setItem('accessibility-theme', selectedTheme); + + // save toggle states + localStorage.setItem('accessibility-uncapitalization', uncapitalizationCheckbox.checked); + localStorage.setItem('accessibility-disable-bg', disableBgCheckbox.checked); + localStorage.setItem('accessibility-disable-focus-animations', disableFocusAnimationsCheckbox.checked); + localStorage.setItem('accessibility-disable-alttext', disableAlttextCheckbox.checked); + } + + // settings loading function + function loadSettings() { + // load the font setting + const savedFont = localStorage.getItem('accessibility-font'); + if (savedFont) { + const fontInput = document.getElementById(savedFont); + if (fontInput) fontInput.checked = true; + } + + // load the theme setting + const savedTheme = localStorage.getItem('accessibility-theme'); + if (savedTheme) { + const themeInput = document.querySelector(`input[name="theme-setting"][value="${savedTheme}"]`); + if (themeInput) themeInput.checked = true; + } + + // load toggle states + if (localStorage.getItem('accessibility-uncapitalization') === 'true') { + uncapitalizationCheckbox.checked = true; + } + + if (localStorage.getItem('accessibility-disable-bg') === 'true') { + disableBgCheckbox.checked = true; + } + + if (localStorage.getItem('accessibility-disable-focus-animations') === 'true') { + disableFocusAnimationsCheckbox.checked = true; + } + + if (localStorage.getItem('accessibility-disable-alttext') === 'true') { + disableAlttextCheckbox.checked = true; + } + } + + // apply the theme based on user preference + function applyTheme() { + const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value; + + // remove any existing theme + document.documentElement.removeAttribute('data-theme'); + + // apply the selected theme + if (selectedTheme === 'light') { + document.documentElement.setAttribute('data-theme', 'light'); + } else if (selectedTheme === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark'); + } + // if auto, don't set a data-theme attribute, let the media query handle it + } +}); \ No newline at end of file