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 */
body, body.light {
--color-scheme: light;
--white-black: white;
--black-white: black;
--theme-color: hsl(85, 50%, 60%);
--back-color: hsl(60, 100%, 98%);
--font-color: #222;
--font-gray: #666;
--grid-color: #fff;
--code-color: #ddd;
--code-block: #30303a;
--frame-shadow: #999;
body {
--white-black: light-dark(white, black);
--black-white: light-dark(black, white);
--theme-color: light-dark(hsl(85, 50%, 60%), teal);
--back-color: light-dark(hsl(60, 100%, 98%), hsl(210, 7%, 18%));
--font-color: light-dark(#222, #f5f5f5);
--font-gray: light-dark(#666, #999);
--grid-color: light-dark(#fff, #333);
--code-color: light-dark(#ddd, #445);
--code-block: light-dark(#30303a, #23232a);
--frame-shadow: light-dark(#999, #111);
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 */
body {