mirror of
https://github.com/hsjobeki/noogle.git
synced 2024-12-25 06:53:17 +03:00
Merge pull request #403 from nix-community/johannes
Website/theme: dark mode by default
This commit is contained in:
commit
6e910a5040
@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { CssBaseline, useMediaQuery } from "@mui/material";
|
||||
import { CssBaseline } from "@mui/material";
|
||||
import { cssThemeOptions } from "@/styles/theme";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
@ -13,19 +13,19 @@ import {
|
||||
const theme = extendTheme(cssThemeOptions);
|
||||
|
||||
const ModeTracker = () => {
|
||||
const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
|
||||
const { setMode } = useColorScheme();
|
||||
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
setMounted(true);
|
||||
|
||||
setMode(userPrefersDarkmode ? "dark" : "light");
|
||||
const persistedMode = localStorage.getItem("mui-mode");
|
||||
if (!persistedMode) {
|
||||
setMode("dark");
|
||||
}
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[userPrefersDarkmode]
|
||||
[]
|
||||
);
|
||||
|
||||
if (!mounted) {
|
||||
|
@ -5,6 +5,7 @@ import { ReactNode, Suspense } from "react";
|
||||
import { SocialIcons } from "./layout";
|
||||
import localFont from "next/font/local";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { ThemeSwitch } from "./themeSwitch";
|
||||
|
||||
const HeaderLink = styled(Link)(({ theme }) => ({
|
||||
color: theme.palette.primary.contrastText + "!important",
|
||||
@ -64,17 +65,6 @@ export const Header = (props: HeaderProps) => {
|
||||
{"Noogλe"}
|
||||
</Button>
|
||||
</Box>
|
||||
{/* <Box
|
||||
sx={{
|
||||
justifySelf: "start",
|
||||
display: { xs: "block", md: "none" },
|
||||
color: "primary.contrastText",
|
||||
}}
|
||||
>
|
||||
<IconButton color="inherit" aria-label="Home">
|
||||
<Home />
|
||||
</IconButton>
|
||||
</Box> */}
|
||||
{search && (
|
||||
<Box
|
||||
sx={{
|
||||
@ -104,6 +94,7 @@ export const Header = (props: HeaderProps) => {
|
||||
}}
|
||||
>
|
||||
<SocialIcons />
|
||||
<ThemeSwitch />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
@ -23,7 +23,12 @@ export const SocialIcons = () => {
|
||||
sx={{ color: "inherit" }}
|
||||
>
|
||||
<Tooltip title="Github">
|
||||
<IconButton color="inherit" aria-label="nixos github">
|
||||
<IconButton
|
||||
sx={{
|
||||
color: "#fff",
|
||||
}}
|
||||
aria-label="nixos github"
|
||||
>
|
||||
<GitHubIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
Loading…
Reference in New Issue
Block a user