sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implement saving settings & implement theme chooser
All checks were successful
/ build (push) Successful in 29s
Details

Browse source
This commit is contained in:
Ruben 2025-04-09 15:20:57 -05:00
commit 30f24affc8
No known key found for this signature in database
GPG key ID: 8EA836555FB6D9A5
8 changed files with 297 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

5
alt-popup.js
View file

@ -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");

99
colors.css
View file

@ -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;
}
}
}
/*
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;
}

24
donate/index.html
View file

@ -19,6 +19,7 @@
<meta property="og:url" content="https://synth.download/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/alt-popup.js"></script>
<script src="/settings.js"></script>
<script async src="https://js.stripe.com/v3/buy-button.js"></script>
</head>
@ -58,12 +59,28 @@
<ul>
<li>
<p>Accessibility Settings</p>
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
<span>
<input type="radio" id="theme-auto" name="theme-setting" value="auto" checked />
<label for="theme-auto">System (Auto)</label><br>
</span>
<span>
<input type="radio" id="theme-light" name="theme-setting" value="light" />
<label for="theme-light">Light</label><br>
</span>
<span>
<input type="radio" id="theme-dark" name="theme-setting" value="dark" />
<label for="theme-dark">Dark</label><br>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
@ -112,8 +129,7 @@
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
</li>
</ul>
</details>

25
index.html
View file

@ -20,6 +20,7 @@
<meta property="og:url" content="https://synth.download/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/alt-popup.js"></script>
<script src="/settings.js"></script>
<script src="/button.js"></script>
</head>
@ -59,12 +60,29 @@
<ul>
<li>
<p>Accessibility Settings</p>
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
<p class="caption" style="color: var(--red);">Only works with JavaScript.</p>
<span>
<input type="radio" id="theme-auto" name="theme-setting" value="auto" checked />
<label for="theme-auto">System (Auto)</label><br>
</span>
<span>
<input type="radio" id="theme-light" name="theme-setting" value="light" />
<label for="theme-light">Light</label><br>
</span>
<span>
<input type="radio" id="theme-dark" name="theme-setting" value="dark" />
<label for="theme-dark">Dark</label><br>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
@ -113,8 +131,7 @@
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
</li>
</ul>
</details>

24
me/index.html
View file

@ -21,6 +21,7 @@
<meta property="og:url" content="https://synth.download/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/alt-popup.js"></script>
<script src="/settings.js"></script>
<script defer src="https://booping.synth.download/embed.js"></script>
</head>
@ -60,12 +61,28 @@
<ul>
<li>
<p>Accessibility Settings</p>
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
<span>
<input type="radio" id="theme-auto" name="theme-setting" value="auto" checked />
<label for="theme-auto">System (Auto)</label><br>
</span>
<span>
<input type="radio" id="theme-light" name="theme-setting" value="light" />
<label for="theme-light">Light</label><br>
</span>
<span>
<input type="radio" id="theme-dark" name="theme-setting" value="dark" />
<label for="theme-dark">Dark</label><br>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
@ -114,8 +131,7 @@
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
</li>
</ul>
</details>

24
me/ruben/index.html
View file

@ -19,6 +19,7 @@
<meta property="og:url" content="https://synth.download/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/alt-popup.js"></script>
<script src="/settings.js"></script>
</head>
<body>
@ -57,12 +58,28 @@
<ul>
<li>
<p>Accessibility Settings</p>
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
<span>
<input type="radio" id="theme-auto" name="theme-setting" value="auto" checked />
<label for="theme-auto">System (Auto)</label><br>
</span>
<span>
<input type="radio" id="theme-light" name="theme-setting" value="light" />
<label for="theme-light">Light</label><br>
</span>
<span>
<input type="radio" id="theme-dark" name="theme-setting" value="dark" />
<label for="theme-dark">Dark</label><br>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
@ -111,8 +128,7 @@
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
</li>
</ul>
</details>

20
ruben.css
View file

@ -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;
}

97
settings.js Normal file
View file

@ -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
}
});