DECA
/
deca.eco
2
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Adding Logo on dark and light theme, plus favicon update

This commit is contained in:
David E. Perez Negron R. 2024-06-14 14:16:05 -06:00
parent 249cb9d012
commit 67cd96cd33
7 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_data.yml
View File

@ -1,6 +1,8 @@
lang: en
logo: deca-logo.png
logo_dark: /img/deca-logo-dark.png
logo_light: /img/deca-logo-light.png
home:
welcome: DECA PROTOCOL

4
_includes/css/navbar.css
View File

@ -43,8 +43,8 @@
& img {
margin-bottom: 10px;
width:175px;
height:58px;
width:100px;
height:100px;
}
& span {

21
_includes/layouts/base.vto
View File

@ -6,10 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ it.title || metas.title }} - {{ metas.site }}</title>
<!-- Color Scheme Meta Tags -->
<meta name="supported-color-schemes" content="light dark">
<meta name="theme-color" content="hsl(220, 20%, 100%)" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="hsl(220, 20%, 10%)" media="(prefers-color-scheme: dark)">
<!-- External Stylesheets and Scripts -->
<link rel="stylesheet" href="/styles.css">
<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metas.site }}">
<link rel="alternate" href="/feed.json" type="application/json" title="{{ metas.site }}">
@ -21,11 +23,7 @@
<body>
<nav class="navbar">
<a href="/" class="navbar-home">
{{ if it.logo }}
<img src="/img/{{ it.logo }}" alt="{{ metas.site }}">
{{ else }}
<strong>{{ metas.site }}</strong>
{{ /if }}
<img id="theme-logo" alt="{{ metas.site }}">
</a>
<ul class="navbar-links">
@ -45,14 +43,25 @@
{{ /for }}
<li>
<script>
//const lightLogo = "{{ it.logo-light }}";
//const darkLogo = "{{ it.logo-dark }}";
const lightLogo = "/img/deca-logo-light.png";
const darkLogo = "/img/deca-logo-dark.png";
// Set initial theme and logo
let theme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light");
document.documentElement.dataset.theme = theme;
document.getElementById("theme-logo").src = theme === "dark" ? darkLogo : lightLogo;
console.log("lightLogo:", ligthLogo, "darkLogo:", darkLogo);
function changeTheme() {
theme = theme === "dark" ? "light" : "dark";
localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme;
document.getElementById("theme-logo").src = theme === "dark" ? darkLogo : lightLogo;
console.log("lightLogo:", ligthLogo, "darkLogo:", darkLogo);
}
</script>
<button class="button" onclick="changeTheme()">

BIN
img/deca-logo-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
img/deca-logo-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

BIN
img/deca-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
img/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB