Theme based logo

yandeu · yandeu · commit fd0f910ae9fb · 2025-04-20T20:17:56.000+02:00
diff --git a/src/css/style.css b/src/css/style.css
@@ -34,6 +34,18 @@
   }
 }
 
+/* logo based on color theme */
+@media not (prefers-color-scheme: dark) {
+  .logo.dark {
+    display: none;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .logo.light {
+    display: none;
+  }
+}
+
 html {
   scroll-behavior: smooth;
   background-color: var(--bg-color);
diff --git a/src/docs.html b/src/docs.html
@@ -15,7 +15,7 @@
       name="description"
       content="3D game framework on top of Three.js and Ammo.js (bullet3) which integrates perfectly with Phaser 3."
     />
-    <link rel="stylesheet" href="/css/style.css?ver=1.2.3" />
+    <link rel="stylesheet" href="/css/style.css?ver=1.3.0" />
     <link rel="stylesheet" href="/css/floating-action-button.css?ver=1.0.1" />
 
     <script SSROnly src="//cdn.jsdelivr.net/npm/marked@3/lib/marked.min.js"></script>
@@ -55,7 +55,8 @@
     <header>
       <div class="container navbar">
         <a href="/">
-          <div id="logo"><img src="/img/enable3d-logo.png" /></div>
+          <div id="logo" class="logo light"><img src="/img/enable3d-logo.png" /></div>
+          <div id="logo" class="logo dark"><img src="/img/enable3d-logo-dark.png" /></div>
         </a>
         <ul class="navbar-items">
           <a href="/examples.html">
diff --git a/src/examples.html b/src/examples.html
@@ -15,7 +15,7 @@
       name="description"
       content="3D game framework on top of Three.js and Ammo.js (bullet3) which integrates perfectly with Phaser 3."
     />
-    <link rel="stylesheet" href="/css/style.css?ver=1.2.3" />
+    <link rel="stylesheet" href="/css/style.css?ver=1.3.0" />
   </head>
 
   <body>
@@ -30,7 +30,8 @@
     <header>
       <div class="container navbar">
         <a href="/">
-          <div id="logo"><img src="/img/enable3d-logo.png" /></div>
+          <div id="logo" class="logo light"><img src="/img/enable3d-logo.png" /></div>
+          <div id="logo" class="logo dark"><img src="/img/enable3d-logo-dark.png" /></div>
         </a>
         <ul class="navbar-items">
           <a href="/examples.html">
diff --git a/src/img/enable3d-logo-dark.png b/src/img/enable3d-logo-dark.png
diff --git a/src/index.html b/src/index.html
@@ -15,7 +15,7 @@
       name="description"
       content="Cross-Platform 3D Game Framework using HTML5 and WebGL wrapping Three.js and ammo.js (bullet3). Includes Headless Physics mode for your Node.js Server and a Phaser 3D Extension."
     />
-    <link rel="stylesheet" href="/css/style.css?ver=1.2.3" />
+    <link rel="stylesheet" href="/css/style.css?ver=1.3.0" />
   </head>
 
   <body>
@@ -30,7 +30,8 @@
     <header>
       <div class="container navbar">
         <a href="/">
-          <div id="logo"><img src="/img/enable3d-logo.png" /></div>
+          <div id="logo" class="logo light"><img src="/img/enable3d-logo.png" /></div>
+          <div id="logo" class="logo dark"><img src="/img/enable3d-logo-dark.png" /></div>
         </a>
         <ul class="navbar-items">
           <a href="/examples.html">
