hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Assets and sample color theme switcher

Browse Source
This commit is contained in:
Hazem Krimi
2023-10-18 21:00:04 +01:00
parent 521727983c
commit f5a54d528f
8 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/baseof.css
+31
View File
@@ -0,0 +1,31 @@
@import url("../fonts/OpenSans.ttf");
@import url("../fonts/OpenSans-Italic.ttf");
:root {
/* Colors */
--black: #131314;
--white: #FFFFFF;
--crimson: #BD1839;
--light-gray: #E7E7E7;
/* Background colors */
--dark-background: #1D1B1B;
--light-background: #FBFBFB;
/* Radiuses */
--card-radius: 30px;
--form-radius: 9px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: var(--background);
color: var(--text);
}
assets/fonts/OpenSans-Italic.ttf
BIN
View File
Binary file not shown.
assets/fonts/OpenSans.ttf
BIN
View File
Binary file not shown.
assets/js/baseof.js
+39
View File
@@ -0,0 +1,39 @@
function getInitialTheme() {
const persistedColorPreference = window.localStorage.getItem('theme');
const hasPersistedPreference = typeof persistedColorPreference === 'string';
if (hasPersistedPreference) {
return persistedColorPreference;
}
const mql = window.matchMedia('(prefers-color-scheme: dark)');
const hasMediaQueryPreference = typeof mql.matches === 'boolean';
if (hasMediaQueryPreference) {
return mql.matches ? 'dark' : 'light';
}
return 'light';
}
function updateTheme(theme) {
root.style.setProperty('--theme', theme);
root.style.setProperty(
'--background',
theme === 'light' ? 'var(--light-background)' : 'var(--dark-background)'
);
root.style.setProperty('--text', theme === 'light' ? 'black' : 'white');
}
const root = document.documentElement;
let theme = getInitialTheme();
document.addEventListener('DOMContentLoaded', () => {
updateTheme(theme);
});
document.querySelector('#switch-theme').addEventListener('click', () => {
theme = theme === 'light' ? 'dark' : 'light';
window.localStorage.setItem('theme', theme);
updateTheme(theme);
});
content/_index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: "Hazem Krimi"
date: 2023-10-18T20:03:43+01:00
---
# Hazem Krimi
layouts/_default/baseof.html
+21
View File
@@ -0,0 +1,21 @@
{{ $styles := resources.Get "css/baseof.css" | toCSS | minify | fingerprint }}
{{ $scripts := resources.Get "js/baseof.js" | minify | fingerprint }}
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="{{ $styles.Permalink }}">
{{ block "styles" . }}{{ end }}
<title>
{{ block "title" . }}
{{ .Site.Title }}
{{ end }}
</title>
<script defer src="{{ $scripts.Permalink }}"></script>
</head>
<body>
<main>
{{ block "main" . }}{{ end }}
</main>
</body>
</html>
layouts/index.html
+4
View File
@@ -0,0 +1,4 @@
{{ define "main" }}
{{ partial "theme-switch.html" . }}
{{ .Content }}
{{ end }}
layouts/partials/theme-switch.html
+1
View File
@@ -0,0 +1 @@
<button id="switch-theme">Switch theme</button>