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