Skip to content

Commit

Permalink
added theme change functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
novcmbro committed Jun 6, 2024
1 parent 7cd175f commit a10e150
Show file tree
Hide file tree
Showing 9 changed files with 128 additions and 49 deletions.
25 changes: 21 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ <h3 class="output-placeholder-title" data-translation="output.placeholder.title"
</main>
<footer>
<div class="container">
<nav class="footer-language-nav" aria-labelledby="language-nav-label">
<nav class="footer-nav" aria-labelledby="language-nav-label">
<span id="language-nav-label" hidden aria-hidden="true" data-translation="footer.language.label">Change language</span>
<span id="language-icon-label" hidden aria-hidden="true" data-translation="footer.language.icon">Globe</span>
<svg width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="language-icon" aria-labelledby="language-icon-label">
Expand All @@ -88,13 +88,30 @@ <h3 class="output-placeholder-title" data-translation="output.placeholder.title"
</g>
</svg>
<span id="language-link-en-label" hidden aria-hidden="true">English</span>
<a id="language-link-en" href="#" class="footer-language-link en" aria-labelledby="language-link-en-label">EN<a>
<a id="language-link-en" href="#" class="footer-nav-link en" aria-labelledby="language-link-en-label">EN<a>
<span id="language-link-pt-label" hidden aria-hidden="true">Português</span>
<a id="language-link-pt" href="#" class="footer-language-link pt" aria-labelledby="language-link-pt-label">PT</a>
<a id="language-link-pt" href="#" class="footer-nav-link pt" aria-labelledby="language-link-pt-label">PT</a>
</nav>
<p class="footer-credits">
<span data-translation="footer.credits">made with 💜 by</span> <a href="https://github.com/novcmbro" class="footer-novcmbro-link" target="_blank" rel="noopener noreferrer" aria-label="GitHub">Novcmbro</a>
<span data-translation="footer.credits">made with 💜 by</span> <a href="https://github.com/novcmbro" class="footer-credits-novcmbro-link" target="_blank" rel="noopener noreferrer" aria-label="GitHub">Novcmbro</a>
</p>
<nav class="footer-nav" aria-labelledby="theme-nav-label">
<span id="theme-nav-label" hidden aria-hidden="true" data-translation="footer.theme.label">Change theme</span>
<a id="theme-link-light" href="#" class="footer-nav-link light" aria-labelledby="theme-link-light-label">
<span id="theme-link-light-label" hidden aria-hidden="true" data-translation="footer.theme.light.text">Light theme</span>
<span id="theme-link-light-icon-label" hidden aria-hidden="true" data-translation="footer.theme.light.icon">Sun</span>
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="theme-link-light-icon-label">
<path d="M12 4V2M12 20V22M6.41421 6.41421L5 5M17.728 17.728L19.1422 19.1422M4 12H2M20 12H22M17.7285 6.41421L19.1427 5M6.4147 17.728L5.00049 19.1422M12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
<a id="theme-link-dark" href="#" class="footer-nav-link dark" aria-labelledby="theme-link-dark-label">
<span id="theme-link-dark-label" hidden aria-hidden="true" data-translation="footer.theme.dark.text">Dark theme</span>
<span id="theme-link-dark-icon-label" hidden aria-hidden="true" data-translation="footer.theme.dark.icon">Moon</span>
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="theme-link-dark-icon-label">
<path d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</nav>
</div>
</footer>
</body>
Expand Down
34 changes: 20 additions & 14 deletions src/css/footer.css
Original file line number Diff line number Diff line change
@@ -1,39 +1,45 @@
footer .container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--spacing-sm) var(--spacing-base);
text-align: center;
padding: var(--spacing-base);
}

.footer-language-nav .language-icon {
vertical-align: text-bottom;
.language-icon {
vertical-align: middle;
margin-right: var(--spacing-sm);
}

.footer-language-link.pt:lang(en),
.footer-language-link.en:lang(pt) {
.footer-nav-link.en:lang(pt),
.footer-nav-link.pt:lang(en),
:root.light .footer-nav-link.dark,
.dark .footer-nav-link.light {
opacity: 0.47;
}

.footer-language-link.pt:lang(en):hover,
.footer-language-link.en:lang(pt):hover {
.footer-nav-link.en:lang(pt):hover,
.footer-nav-link.pt:lang(en):hover,
:root.light .footer-nav-link.dark:hover,
:root.dark .footer-nav-link.light:hover {
opacity: 1;
transition: opacity var(--transition-duration);
}

.footer-novcmbro-link {
.footer-credits-novcmbro-link {
font-weight: var(--font-bold);
}

@media screen and (min-width: 700px) {
footer .container {
flex-direction: row;
justify-content: space-between;
}
.footer-nav-link.light,
.footer-nav-link.dark {
display: inline-block;
}

@media screen and (max-width: 520px) {
.footer-credits {
order: 3;
text-align: center;
margin: 0 auto;
}
}
1 change: 1 addition & 0 deletions src/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
font-size: var(--font-md);
font-weight: var(--font-medium);
scroll-behavior: smooth;
transition: background-color var(--transition-duration), color var(--transition-duration);
}

* {
Expand Down
1 change: 1 addition & 0 deletions src/css/output.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
border-radius: var(--shape);
flex-grow: 1;
padding: var(--spacing-md);
transition: background-color var(--transition-duration);
}

.output-placeholder:not([hidden]) {
Expand Down
42 changes: 19 additions & 23 deletions src/css/themes.css
Original file line number Diff line number Diff line change
@@ -1,30 +1,26 @@
@media (prefers-color-scheme: light) {
:root {
background-color: var(--dark-white);
color: var(--dark-gray);
}
:root.light {
background-color: var(--dark-white);
color: var(--dark-gray);
}

.input-section {
outline-color: var(--white);
}
:root.light .input-section:not(.input-field-has-focus, .input-field-is-invalid) {
outline-color: var(--white);
}

.output-section {
background-color: var(--white);
}
:root.light .output-section {
background-color: var(--white);
}

@media (prefers-color-scheme: dark) {
:root {
--shadow-opacity: 1;
background-color: var(--black);
color: var(--white);
}
:root.dark {
--shadow-opacity: 1;
background-color: var(--black);
color: var(--white);
}

.input-section {
outline-color: var(--light-black);
}
:root.dark .input-section:not(.input-field-has-focus, .input-field-is-invalid) {
outline-color: var(--light-black);
}

.output-section {
background-color: var(--light-black);
}
:root.dark .output-section {
background-color: var(--light-black);
}
18 changes: 12 additions & 6 deletions src/js/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import theme from "./theme.js"
import { changeLanguage, initTranslation, translation } from "./translation.js"
import cryptographyEntries from "./cryptographyEntries.js"
import copyOutputText from "./copyOutputText.js"

document.addEventListener("DOMContentLoaded", () => {
theme.init()
initTranslation()

const inputField = document.querySelector("#input-field")
Expand All @@ -16,6 +18,8 @@ document.addEventListener("DOMContentLoaded", () => {
const copyButton = document.querySelector("#copy-button")
const languageLinkEN = document.querySelector("#language-link-en")
const languageLinkPT = document.querySelector("#language-link-pt")
const themeLinkLight = document.querySelector("#theme-link-light")
const themeLinkDark = document.querySelector("#theme-link-dark")

const cryptography = (target) => {
const entries = target === encryptButton ? cryptographyEntries : Object.fromEntries(Object.entries(cryptographyEntries).map(([letter, word]) => [word, letter]))
Expand Down Expand Up @@ -70,12 +74,8 @@ document.addEventListener("DOMContentLoaded", () => {
}
}

inputField.addEventListener("focus", toggleInputFocusClass)
inputField.addEventListener("blur", toggleInputFocusClass)
inputField.addEventListener("input", clearInputFieldError)
encryptButton.addEventListener("click", handleCryptography)
decryptButton.addEventListener("click", handleCryptography)
copyButton.addEventListener("click", () => copyOutputText(outputField))
themeLinkLight.addEventListener("click", theme.change)
themeLinkDark.addEventListener("click", theme.change)
languageLinkEN.addEventListener("click", (e) => {
changeLanguage(e)
clearInputFieldError()
Expand All @@ -84,4 +84,10 @@ document.addEventListener("DOMContentLoaded", () => {
changeLanguage(e)
clearInputFieldError()
})
inputField.addEventListener("focus", toggleInputFocusClass)
inputField.addEventListener("blur", toggleInputFocusClass)
inputField.addEventListener("input", clearInputFieldError)
encryptButton.addEventListener("click", handleCryptography)
decryptButton.addEventListener("click", handleCryptography)
copyButton.addEventListener("click", () => copyOutputText(outputField))
})
30 changes: 30 additions & 0 deletions src/js/theme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const localStorageKey = "novcmbro_decoder_theme"
const rootElement = document.documentElement

const theme = {
db: () => localStorage.getItem(localStorageKey),
update: undefined,
init: undefined,
change: undefined
}

theme.update = () => rootElement.classList = theme.db()

theme.init = () => {
const prefersLightTheme = window.matchMedia("(prefers-color-scheme: light)").matches

if (!theme.db()) {
localStorage.setItem(localStorageKey, prefersLightTheme ? "light" : "dark")
}

theme.update()
}

theme.change = ({ currentTarget }) => {
const themeName = currentTarget.classList[1]
localStorage.setItem(localStorageKey, themeName)
theme.update()
}

const { init, change } = theme
export default { init, change }
13 changes: 12 additions & 1 deletion src/locales/en-us.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,18 @@ const enUS = {
label: "Change language",
icon: "Globe"
},
credits: "made with 💜 by"
credits: "made with 💜 by",
theme: {
label: "Change theme",
light: {
text: "Light theme",
icon: "Sun"
},
dark: {
text: "Dark theme",
icon: "Moon"
}
}
}
}

Expand Down
13 changes: 12 additions & 1 deletion src/locales/pt-br.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,18 @@ const ptBR = {
label: "Mudar idioma",
icon: "Globo"
},
credits: "feito com 💜 por"
credits: "feito com 💜 por",
theme: {
label: "Mudar tema",
light: {
text: "Tema claro",
icon: "Sol"
},
dark: {
text: "Tema escuro",
icon: "Lua"
}
}
}
}

Expand Down

0 comments on commit a10e150

Please sign in to comment.