light/dark logo
This commit is contained in:
parent
10baea2483
commit
9ed6c5642a
|
@ -24,6 +24,8 @@ function setPreference() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function reflectPreference() {
|
function reflectPreference() {
|
||||||
|
document.firstElementChild.classList.remove("light", "dark");
|
||||||
|
document.firstElementChild.classList.add(themeValue);
|
||||||
document.firstElementChild.setAttribute("data-theme", themeValue);
|
document.firstElementChild.setAttribute("data-theme", themeValue);
|
||||||
|
|
||||||
document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
|
document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
|
||||||
|
|
|
@ -6,6 +6,9 @@ import LinkButton from "./LinkButton.astro";
|
||||||
import logoPNG from "/assets/logo.png";
|
import logoPNG from "/assets/logo.png";
|
||||||
import logoSVG from "/assets/logo.svg";
|
import logoSVG from "/assets/logo.svg";
|
||||||
|
|
||||||
|
import logoLightPNG from "/assets/logo-light.png";
|
||||||
|
import logoLightSVG from "/assets/logo-light.svg";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
activeNav?: "posts" | "tags" | "about" | "search";
|
activeNav?: "posts" | "tags" | "about" | "search";
|
||||||
}
|
}
|
||||||
|
@ -25,6 +28,14 @@ const { activeNav } = Astro.props;
|
||||||
alt="AstroPaper Logo"
|
alt="AstroPaper Logo"
|
||||||
width={LOGO_IMAGE.width}
|
width={LOGO_IMAGE.width}
|
||||||
height={LOGO_IMAGE.height}
|
height={LOGO_IMAGE.height}
|
||||||
|
class="hidden dark:block"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={LOGO_IMAGE.svg ? logoLightSVG : logoLightPNG}
|
||||||
|
alt="AstroPaper Logo"
|
||||||
|
width={LOGO_IMAGE.width}
|
||||||
|
height={LOGO_IMAGE.height}
|
||||||
|
class="block dark:hidden"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
SITE.title
|
SITE.title
|
||||||
|
|
|
@ -10,6 +10,7 @@ function withOpacity(variableName) {
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||||
|
darkMode: "class",
|
||||||
theme: {
|
theme: {
|
||||||
// Remove the following screen breakpoint or add other breakpoints
|
// Remove the following screen breakpoint or add other breakpoints
|
||||||
// if one breakpoint is not enough for you
|
// if one breakpoint is not enough for you
|
||||||
|
|
Loading…
Reference in New Issue