Fixed dark screen when using dark reader extension

README.md

@@ -28,9 +28,10 @@ Our Content Management System (CMS) that uses [Strapi](https://strapi.io/).
 
 ### [img.accords-library.com](https://github.com/Accords-Library/img.accords-library.com)
 
-A custom made image processor to overcome the lack of customization offered by Strapi build-in image processor. There is a python script to bulk process all images uploaded to Strapi. Subsequent changes to Strapi's media library can be handled using webhooks. The repo includes a server that listen to these webhook calls, and another to serve the images.  
+A custom made image processor to overcome the lack of customization offered by Strapi build-in image processor. There is a python script to bulk process all images uploaded to Strapi. Subsequent changes to Strapi's media library can be handled using webhooks. The repo includes a server that listen to these webhook calls, and another to serve the images.
 
 Each image in Strapi's media library is converted to four different formats:
+
 - Small: 512x512, quality 60, .webp
 - Medium: 1024x1024, quality 75, .webp
 - Large: 2048x2048, quality 80, .webp
@@ -39,7 +40,7 @@ Each image in Strapi's media library is converted to four different formats:
 ### [search.accords-library.com](https://github.com/Accords-Library/search.accords-library.com)
 
 A search engine that uses [Meilisearch](https://www.meilisearch.com/).
-The repo includes a docker-compose file to run an instance of Meilisearch. There is also a server that populates Meilisearch's documents at startup, then listen to webhooks sent by Strapi for subsequent changes. 
+The repo includes a docker-compose file to run an instance of Meilisearch. There is also a server that populates Meilisearch's documents at startup, then listen to webhooks sent by Strapi for subsequent changes.
 
 ### [gallery.accords-library.com](https://github.com/Accords-Library/gallery.accords-library.com)
 
@@ -139,7 +140,6 @@ A detailled look at the technologies used in this repository:
   - Handle query params using [Zod](https://zod.dev/)
   - A secret "Terminal" mode. Can you find it?
 
-
 ## Installation
 
 ```bash

public/local-data/websiteInterfaces.json

@@ -179,7 +179,8 @@
           "x_results": "{ x, plural, =0 {No results} one {# result} other {# results} }",
           "definition_x": "Definition {x}",
           "subitem_of_x": "Subitem of {x}",
-          "variant_of_x": "Variant of {x}"
+          "variant_of_x": "Variant of {x}",
+          "dark_mode_extension_warning": "This website offers a light and dark theme. If you are using a \"dark mode\" browser extension, make sure to disable it for an optimal experience."
         }
       },
       {
@@ -360,7 +361,8 @@
           "x_results": "{ x, plural, =0 {Pas de résultat} one {# résultat} other {# résultats} }",
           "definition_x": "Définition {x}",
           "subitem_of_x": "Sous-item de {x}",
-          "variant_of_x": "Variante de {x}"
+          "variant_of_x": "Variante de {x}",
+          "dark_mode_extension_warning": "Ce site web propose un thème clair et un thème sombre. Si vous utilisez une extension de navigateur qui simule un thème sombre, veillez à la désactiver pour une expérience optimale."
         }
       },
       {
@@ -541,7 +543,8 @@
           "x_results": null,
           "definition_x": null,
           "subitem_of_x": null,
-          "variant_of_x": null
+          "variant_of_x": null,
+          "dark_mode_extension_warning": null
         }
       },
       {
@@ -722,7 +725,8 @@
           "x_results": null,
           "definition_x": null,
           "subitem_of_x": null,
-          "variant_of_x": null
+          "variant_of_x": null,
+          "dark_mode_extension_warning": null
         }
       },
       {
@@ -903,7 +907,8 @@
           "x_results": null,
           "definition_x": null,
           "subitem_of_x": null,
-          "variant_of_x": null
+          "variant_of_x": null,
+          "dark_mode_extension_warning": null
         }
       }
     ]

src/components/Containers/Popup.tsx

@@ -47,8 +47,8 @@ export const Popup = ({
       )}>
       <div
         className={cJoin(
-          "fixed inset-0 bg-shade transition-all duration-500",
-          cIf(isVisible, "bg-opacity-50", "bg-opacity-0")
+          "fixed inset-0 transition-colors duration-500",
+          cIf(isVisible, "bg-shade/50", "bg-shade/0")
         )}
         onClick={onCloseRequest}
       />

src/components/LightBox.tsx

@@ -61,8 +61,8 @@ export const LightBox = ({
       )}>
       <div
         className={cJoin(
-          "fixed inset-0 bg-shade transition-all duration-500",
-          cIf(isVisible, "bg-opacity-50", "bg-opacity-0")
+          "fixed inset-0 transition-colors duration-500",
+          cIf(isVisible, "bg-shade/50", "bg-shade/0")
         )}
       />
       <div

src/components/Panels/SettingsPopup.tsx

@@ -15,6 +15,7 @@ import { useAtomGetter, useAtomPair } from "helpers/atoms";
 import { ThemeMode } from "contexts/settings";
 import { Ico } from "components/Ico";
 import { useFormat } from "hooks/useFormat";
+import { ToolTip } from "components/ToolTip";
 
 export const SettingsPopup = (): JSX.Element => {
   const [preferredLanguages, setPreferredLanguages] = useAtomPair(
@@ -95,7 +96,12 @@ export const SettingsPopup = (): JSX.Element => {
             cIf(!is1ColumnLayout, "grid-cols-2")
           )}>
           <div>
-            <h3 className="text-xl">{format("theme")}</h3>
+            <div className="flex place-content-center place-items-center gap-1">
+              <h3 className="text-xl">{format("theme")}</h3>
+              <ToolTip content={format("dark_mode_extension_warning")} placement="top">
+                <Ico icon="info" />
+              </ToolTip>
+            </div>
             <ButtonGroup
               buttonsProps={[
                 {

src/components/PreviewCard.tsx

@@ -139,8 +139,8 @@ export const PreviewCard = ({
             {hoverlay && hoverlay.__typename === "Video" && (
               <>
                 <div
-                  className="absolute inset-0 grid place-content-center bg-shade bg-opacity-0
-                  text-light transition-colors group-hover:bg-opacity-50">
+                  className="absolute inset-0 grid place-content-center bg-shade/0
+                   text-light transition-colors group-hover:bg-shade/50">
                   <Ico
                     icon="play_circle"
                     className="!text-6xl text-light opacity-0 drop-shadow-lg transition-opacity

src/graphql/icuParams.ts

@@ -178,4 +178,5 @@ export interface ICUParams {
   definition_x: { x: Date | boolean | number | string };
   subitem_of_x: { x: Date | boolean | number | string };
   variant_of_x: { x: Date | boolean | number | string };
+  dark_mode_extension_warning: never;
 }

src/graphql/operations/local-data/localDataGetWebsiteInterfaces.graphql

@@ -185,6 +185,7 @@ query localDataGetWebsiteInterfaces {
         definition_x
         subitem_of_x
         variant_of_x
+        dark_mode_extension_warning
       }
     }
   }

src/pages/500.tsx

@@ -45,7 +45,6 @@ export default FiveHundred;
 export const getStaticProps: GetStaticProps = (context) => {
   const { format } = getFormat(context.locale);
   const props: Props = {
-    /* TODO: Langui */
     openGraph: getOpenGraph(format, "500 - Internal Server Error"),
   };
   return {

src/pages/dev/editor.tsx

@@ -374,7 +374,7 @@ const Editor = (props: Props): JSX.Element => {
               const textarea = event.target as HTMLTextAreaElement;
               handleInput(textarea.value);
             }}
-            className="h-[70vh] w-full rounded-xl bg-mid !bg-opacity-40 p-8
+            className="h-[70vh] w-full rounded-xl bg-mid/40 p-8
               font-mono text-black outline-none"
             value={markdown}
             title="Input textarea"
@@ -382,7 +382,7 @@ const Editor = (props: Props): JSX.Element => {
         </div>
         <div>
           <h2>Preview</h2>
-          <div className="h-[70vh] overflow-scroll rounded-xl bg-mid bg-opacity-40 p-8">
+          <div className="h-[70vh] overflow-scroll rounded-xl bg-mid/40 p-8">
             <Markdawn className="w-full" text={markdown} />
           </div>
         </div>

src/pages/index.tsx

@@ -5,7 +5,6 @@ import { Terminal } from "components/Cli/Terminal";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 import { getOpenGraph } from "helpers/openGraph";
-import { useFormat } from "hooks/useFormat";
 import { getFormat } from "helpers/i18n";
 import { getReadySdk } from "graphql/sdk";
 import { PostWithTranslations } from "types/types";
@@ -16,7 +15,6 @@ import { PostWithTranslations } from "types/types";
  */
 
 const Home = (props: PostStaticProps): JSX.Element => {
-  const { format } = useFormat();
   const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
 
   if (isTerminalMode) {