Pagwin/new_blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

went from localstorage solution with js to simply using the given preference

Browse source
This commit is contained in:
Pagwin 2024-10-26 23:06:36 -04:00
parent 8a7917a0cd
commit a5fe608b2e
No known key found for this signature in database
GPG key ID: 81137023740CA260
5 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/css/colors.css
View file

@ -1,6 +1,7 @@
/* https://color.adobe.com/create/color-contrast-analyzer */
/*dark theme*/
body.dark{
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000;
/*
* #5ac
@ -14,6 +15,7 @@ body.dark{
/*stolen from code theme*/
--blockquote-bg: rgb(29, 31, 33);
}
}
/*
*#ABABD4;
*bs-primary-bg-subtle: #cfe2ff;
@ -25,7 +27,8 @@ body.dark{
--bs-light-bg-subtle: #fcfcfd;
* */
/*light theme*/
body.light{
@media (prefers-color-scheme: light) {
:root {
--bg-color: #e2e3e5;
--normal-text: #000;
--link-unclicked: #2535B4;
@ -43,7 +46,7 @@ body.light{
--content-border-color: #026;
--blockquote-bg: #fff;
}
}
body {
background: var(--bg-color);
color: var(--normal-text);

2
static/css/dark-code.css
View file

@ -1,7 +1,7 @@
/*
* wrapping Google Light so it fits my purposes
* */
body.dark{
@media (prefers-color-scheme: dark){
/*!
Theme: Google Dark
Author: Seth Wright (http://sethawright.com)

2
static/css/light-code.css
View file

@ -1,7 +1,7 @@
/*
* wrapping Google Light so it fits my purposes
* */
body.light{
@media (prefers-color-scheme: light){
/*!
Theme: Google Light
Author: Seth Wright (http://sethawright.com)

6
static/js/color-mode.mjs
View file

@ -1,4 +1,8 @@
// this script is intentionally not a module so it'll block loading the document until we set color mode
// DEPRECATED in favor of using in browser theme handling 8a7917a0cd34bd7637d9a9a8ad327e4b847cdeed is last commit using this
// This code is deprecated due to the js doing some amount of fighting with inbuilt browser capabilities, such as https://developer.chrome.com/blog/paint-holding
// (FALSE before being removed this was a module allowing for a flash of the layout without colors) this script is intentionally not a module so it'll block loading the document until we set color mode
// shamelessly stolen from https://www.joshwcomeau.com/react/dark-mode/
export function getInitialColorMode() {

5
templates/default.html
View file

@ -6,14 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{{title}}} · Pagwin's website</title>
<link rel="stylesheet" type="text/css" href="/static/css/layout.css" />
<link rel="preload" type="text/css" href="/static/css/colors.css" />
<link rel="stylesheet" type="text/css" href="/static/css/colors.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml">
<script type="module" src="/static/js/code_highlighting.mjs"></script>
</head>
<body class="light">
<!--script is at the top of body, it needs body defined but we want to start work on downloading and loading it asap, we can have it block by having it not be a module but that has performance problems for slower internet that makes me prefer having it as a module even if users get a flicker of unstylized page-->
<script type="module" src="/static/js/color-mode.mjs"></script>
<!-- originally handled dark v light via js but decided it would be better to just do it all in css and have no toggle 8a7917a0cd34bd7637d9a9a8ad327e4b847cdeed is the last commit where I had the system setup -->
<div id="header">
<a class="nav-link" href="/">Home</a>
<a class="nav-link" href="/posts/">Blog Posts</a>