moris/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ダークモードをlight-dark関数で置き換え

Browse source
This commit is contained in:
moris 2025-02-28 21:09:35 +09:00
parent 11a342c54a
commit 25d8591816
2 changed files with 26 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/app.css
View file

@ -1,60 +1,24 @@
@property --theme-color {
syntax: "<color>";
inherits: true;
}
@property --back-color {
syntax: "<color>";
inherits: true;
}
@property --grid-color {
syntax: "<color>";
inherits: true;
}
/* theme color */ /* theme color */
body, body.light { body {
--color-scheme: light; --white-black: light-dark(white, black);
--white-black: white; --black-white: light-dark(black, white);
--black-white: black; --theme-color: light-dark(hsl(85, 50%, 60%), teal);
--theme-color: hsl(85, 50%, 60%); --back-color: light-dark(hsl(60, 100%, 98%), hsl(210, 7%, 18%));
--back-color: hsl(60, 100%, 98%); --font-color: light-dark(#222, #f5f5f5);
--font-color: #222; --font-gray: light-dark(#666, #999);
--font-gray: #666; --grid-color: light-dark(#fff, #333);
--grid-color: #fff; --code-color: light-dark(#ddd, #445);
--code-color: #ddd; --code-block: light-dark(#30303a, #23232a);
--code-block: #30303a; --frame-shadow: light-dark(#999, #111);
--frame-shadow: #999;
color-scheme: light dark;
&.light {color-scheme: light;}
&.dark {color-scheme: dark;}
} }
body.dark {
--color-scheme: dark;
--white-black: black;
--black-white: white;
--theme-color: teal;
--back-color: hsl(210, 7%, 18%);
--font-color: #f5f5f5;
--font-gray: #999;
--grid-color: #333;
--code-color: #445;
--code-block: #23232a;
--frame-shadow: #111;
}
@media(prefers-color-scheme: dark){
body {
--color-scheme: dark;
--white-black: black;
--black-white: white;
--theme-color: teal;
--back-color: hsl(210, 7%, 18%);
--font-color: #fafafa;
--font-gray: #999;
--grid-color: #333;
--code-color: #445;
--code-block: #23232a;
--frame-shadow: #111;
}
}
/* general */ /* general */
body { body {

24
src/routes/code/[slug]/app.css
View file

@ -2,23 +2,17 @@
height: 100%; height: 100%;
background-color: var(--white-black); background-color: var(--white-black);
--back-color: white; /*rgb(240 238 245)*/ --back-color: light-dark(white, rgb(43 48 55));
--head-color: rgb(245, 245, 245); /*rgb(244 243 250)*/ --head-color: light-dark(#f5f5f5, rgb(58 60 66));
--divider-color: rgb(220 220 220); --divider-color: rgb(220 220 220);
--border-color: #bbb; --border-color: light-dark(#bbb, #222);
--shadow-color: #0009; --shadow-color: light-dark(#0009, #000);
--white-black: #fff; --white-black: light-dark(#fff, #000);
--font-color: #222; --font-color: light-dark(#222, #f5f5f5);
@media(prefers-color-scheme: dark){ color-scheme: light dark;
--back-color: rgb(43 48 55); &.light {color-scheme: light;}
--head-color: rgb(58 60 66); &.dark {color-scheme: dark;}
--divider-color: #222;
--border-color: #555;
--shadow-color: #000;
--white-black: #000;
--font-color: #f5f5f5;
}
} }
body { body {