Skip to content

KB-17: Avoid flashes on dark mode #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sixelasacul merged 4 commits into from
Feb 7, 2025
Merged

KB-17: Avoid flashes on dark mode #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f49a96
KB-17: Avoid flashes on dark mode
sixelasacul Feb 5, 2025
bd6fc95
fixed lint
sixelasacul Feb 5, 2025
75e4812
used public folder for not bundled files
sixelasacul Feb 7, 2025
de303c4
oops
sixelasacul Feb 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions .eslintrc.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,10 @@ plugins:
- react
- react-hooks
- import
overrides: []
parserOptions:
ecmaVersion: latest
sourceType: module
project:
- apps/front/tsconfig.json
- apps/worker/tsconfig.json
- packages/common/tsconfig.json
project: true
settings:
import/resolver:
typescript: true
Expand Down
84 changes: 55 additions & 29 deletions apps/front/en/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,58 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="alternate" hreflang="fr" href="https://knucklebones.io/fr/" />
<link rel="alternate" hreflang="en" href="https://knucklebones.io/en/" />
<link
rel="alternate"
hreflang="zh-Hant"
href="https://knucklebones.io/zh-tw/"
/>
<link
rel="alternate"
hreflang="x-default"
href="https://knucklebones.io/en/"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knucklebones | From Cult of the Lamb</title>
<meta
name="description"
content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!"
/>
<meta property="og:title" content="Knucklebones | From Cult of the Lamb" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:image" content="/og-image.png" />
<meta
property="og:description"
content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!"
/>
<meta name="twitter:card" content="summary_large_image" />
<link rel="stylesheet" href="/theme.css" />
<link
rel="preload"
href="/Mona-Sans.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/Hubot-Sans.woff2"
as="font"
type="font/woff2"
crossorigin
/>
</head>

<head>
<meta charset="UTF-8" />
<link rel="alternate" hreflang="fr" href="https://knucklebones.io/fr/" />
<link rel="alternate" hreflang="en" href="https://knucklebones.io/en/" />
<link rel="alternate" hreflang="zh-Hant" href="https://knucklebones.io/zh-tw/" />
<link rel="alternate" hreflang="x-default" href="https://knucklebones.io/en/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knucklebones | From Cult of the Lamb</title>
<meta name="description" content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!"/>
<meta property="og:title" content="Knucklebones | From Cult of the Lamb" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:image" content="/og-image.png" />
<meta property="og:description" content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!" />
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/Hubot-Sans.woff2" as="font" type="font/woff2" crossorigin>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

<body>
<script src="/theme.js"></script>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
84 changes: 55 additions & 29 deletions apps/front/fr/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,58 @@
<!DOCTYPE html>
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<link rel="alternate" hreflang="fr" href="https://knucklebones.io/fr/" />
<link rel="alternate" hreflang="en" href="https://knucklebones.io/en/" />
<link
rel="alternate"
hreflang="zh-Hant"
href="https://knucklebones.io/zh-tw/"
/>
<link
rel="alternate"
hreflang="x-default"
href="https://knucklebones.io/en/"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knucklebones | De Cult of the Lamb</title>
<meta
name="description"
content="Découvrez Knucklebones (Osselets), de Cult of the Lamb, un jeu de dés en ligne créé par des fans. Jouez contre une IA ou vos amis gratuitement. Non officiel mais addictif, amusez-vous ou soyez compétitif !"
/>
<meta property="og:title" content="Knucklebones | De Cult of the Lamb" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:image" content="/og-image.png" />
<meta
property="og:description"
content="Découvrez Knucklebones (Osselets), de Cult of the Lamb, un jeu de dés en ligne créé par des fans. Jouez contre une IA ou vos amis gratuitement. Non officiel mais addictif, amusez-vous ou soyez compétitif !"
/>
<meta name="twitter:card" content="summary_large_image" />
<link rel="stylesheet" href="/theme.css" />
<link
rel="preload"
href="/Mona-Sans.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/Hubot-Sans.woff2"
as="font"
type="font/woff2"
crossorigin
/>
</head>

<head>
<meta charset="UTF-8" />
<link rel="alternate" hreflang="fr" href="https://knucklebones.io/fr/" />
<link rel="alternate" hreflang="en" href="https://knucklebones.io/en/" />
<link rel="alternate" hreflang="zh-Hant" href="https://knucklebones.io/zh-tw/" />
<link rel="alternate" hreflang="x-default" href="https://knucklebones.io/en/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knucklebones | De Cult of the Lamb</title>
<meta name="description" content="Découvrez Knucklebones (Osselets), de Cult of the Lamb, un jeu de dés en ligne créé par des fans. Jouez contre une IA ou vos amis gratuitement. Non officiel mais addictif, amusez-vous ou soyez compétitif !"/>
<meta property="og:title" content="Knucklebones | De Cult of the Lamb" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:image" content="/og-image.png" />
<meta property="og:description" content="Découvrez Knucklebones (Osselets), de Cult of the Lamb, un jeu de dés en ligne créé par des fans. Jouez contre une IA ou vos amis gratuitement. Non officiel mais addictif, amusez-vous ou soyez compétitif !" />
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/Hubot-Sans.woff2" as="font" type="font/woff2" crossorigin>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

<body>
<script src="/theme.js"></script>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
78 changes: 50 additions & 28 deletions apps/front/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,53 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="alternate" hreflang="fr" href="https://knucklebones.io/fr/" />
<link rel="alternate" hreflang="en" href="https://knucklebones.io/en/" />
<link
rel="alternate"
hreflang="x-default"
href="https://knucklebones.io/en/"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knucklebones | From Cult of the Lamb</title>
<meta
name="description"
content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!"
/>
<meta property="og:title" content="Knucklebones | From Cult of the Lamb" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:image" content="/og-image.png" />
<meta
property="og:description"
content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!"
/>
<meta name="twitter:card" content="summary_large_image" />
<link rel="stylesheet" href="/theme.css" />
<link
rel="preload"
href="/Mona-Sans.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/Hubot-Sans.woff2"
as="font"
type="font/woff2"
crossorigin
/>
</head>

<head>
<meta charset="UTF-8" />
<link rel="alternate" hreflang="fr" href="https://knucklebones.io/fr/" />
<link rel="alternate" hreflang="en" href="https://knucklebones.io/en/" />
<link rel="alternate" hreflang="x-default" href="https://knucklebones.io/en/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knucklebones | From Cult of the Lamb</title>
<meta name="description" content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!"/>
<meta property="og:title" content="Knucklebones | From Cult of the Lamb" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:image" content="/og-image.png" />
<meta property="og:description" content="Discover Knucklebones, a fan-made online dice game from Cult of the Lamb. Play against AI or friends for free. Unofficial but thrilling and addictive multiplayer fun awaits!" />
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/Hubot-Sans.woff2" as="font" type="font/woff2" crossorigin>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

<body>
<script src="/theme.js"></script>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions apps/front/public/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*
allow to quickly style the index.html before the full app loads, and avoid
flashes during refreshes
*/
body.dark {
/* bg-slate-900 */
background-color: #0f172a;
min-height: 100vh;
margin: 0;
padding: 0;
}
12 changes: 12 additions & 0 deletions apps/front/public/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/*
allow to quickly style the index.html before the full app loads, and avoid
flashes during refreshes. This file should be imported right after `body`.
*/
const shouldUseDarkTheme =
localStorage.theme === 'dark' ||
(localStorage.theme === 'default' &&
window.matchMedia('(prefers-color-scheme: dark)').matches)

if (shouldUseDarkTheme) {
document.body.classList.add('dark')
}
7 changes: 2 additions & 5 deletions apps/front/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,9 @@
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"jsx": "react-jsx",
"moduleResolution": "Bundler",
"moduleResolution": "Bundler"
},
"include": [
"src",
"@types"
],
"include": ["src", "@types", "public/theme.js"],
"references": [
{
"path": "./tsconfig.node.json"
Expand Down
Loading