Merge pull request #1549 from json-api-dotnet/dark-mode-and-new-logo

New logo, dark mode on landing page
json-api-dotnet · May 20, 2024 · 7b5db17 · 7b5db17
2 parents 7ace826 + dd61f78
commit 7b5db17
Show file tree

Hide file tree

Showing 14 changed files with 252 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,4 @@
-<p align="center">
-<img src ="https://raw.githubusercontent.com/json-api-dotnet/JsonApiDotNetCore/master/logo.png" />
-</p>
+<a href="https://www.jsonapi.net"><img src="docs/home/assets/img/logo.svg" style="height: 345px; width: 345px"/></a>
 
 # JsonApiDotNetCore
 A framework for building [JSON:API](http://jsonapi.org/) compliant REST APIs using .NET Core and Entity Framework Core. Includes support for [Atomic Operations](https://jsonapi.org/ext/atomic/).

diff --git a/docs/home/assets/dark-mode.css b/docs/home/assets/dark-mode.css
@@ -0,0 +1,16 @@
+html {
+  background-color: #171717 !important;
+  filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
+  -webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
+}
+
+body {
+  background-color: #FFF !important;
+}
+
+img,
+video,
+body * [style*="background-image"] {
+  filter: hue-rotate(180deg) contrast(100%) invert(100%);
+  -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
+}
diff --git a/docs/home/assets/home.css b/docs/home/assets/home.css
@@ -603,3 +603,11 @@ div[sponsor]:hover {
     padding: 3px 0;
   }
 }
+
+/*--------------------------------------------------------------
+# Theme selection
+--------------------------------------------------------------*/
+.btn-theme:focus,
+.btn-theme:active {
+  box-shadow: none !important;
+}
diff --git a/docs/home/assets/home.js b/docs/home/assets/home.js
@@ -1,3 +1,31 @@
+function setTheme(theme) {
+  const darkModeStyleSheet = document.getElementById('dark-mode-style-sheet');
+  const activeTheme = document.getElementById('active-theme');
+
+  if (theme === "auto") {
+    darkModeStyleSheet.disabled = !window.matchMedia("(prefers-color-scheme: dark)").matches;
+    activeTheme.className = "bi-circle-half";
+  }
+  else if (theme === "dark") {
+    darkModeStyleSheet.disabled = false;
+    activeTheme.className = "bi bi-moon";
+  } else if (theme === "light") {
+    darkModeStyleSheet.disabled = true;
+    activeTheme.className = "bi bi-sun";
+  }
+
+  localStorage.setItem("theme", theme)
+}
+
+$('.theme-choice').click(function () {
+  setTheme(this.dataset.theme);
+})
+
+function initTheme() {
+  const theme = localStorage.getItem("theme") || "auto";
+  setTheme(theme);
+}
+
 !(function($) {
   "use strict";
 
@@ -89,6 +117,7 @@
   }
   $(window).on('load', function() {
     aos_init();
+    initTheme();
   });
 
 })(jQuery);
diff --git a/docs/home/assets/img/apple-touch-icon.png b/docs/home/assets/img/apple-touch-icon.png
diff --git a/docs/home/assets/img/favicon.png b/docs/home/assets/img/favicon.png
diff --git a/docs/home/assets/img/logo.png b/docs/home/assets/img/logo.png
diff --git a/docs/home/assets/img/logo.svg b/docs/home/assets/img/logo.svg
diff --git a/docs/home/index.html b/docs/home/index.html
@@ -10,13 +10,41 @@
   <link href="favicon.ico" rel="apple-touch-icon">
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
   <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/default.min.css" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
   <link href="styles/home.css" rel="stylesheet">
   <link href="styles/icofont.min.css" rel="stylesheet">
+  <link href="styles/dark-mode.css" rel="stylesheet" id="dark-mode-style-sheet" disabled>
+  <script>
+    // Running this early to prevent an initial white flash on page load when dark mode is the default theme.
+    const darkModeStyleSheet = document.getElementById('dark-mode-style-sheet');
+    const theme = localStorage.getItem("theme") || "auto";
+
+    if (theme === "auto") {
+      darkModeStyleSheet.disabled = !window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    else if (theme === "dark") {
+      darkModeStyleSheet.disabled = false;
+    } else if (theme === "light") {
+      darkModeStyleSheet.disabled = true;
+    }
+  </script>
 </head>
 <body>
+  <div class="container-xl">
+    <div class="dropdown p-3 float-right">
+      <a class="btn btn-theme dropdown-toggle" href="#" role="button" id="themeSelector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <i id="active-theme"></i>
+      </a>
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="themeSelector">
+        <a class="dropdown-item theme-choice" data-theme="light" href="#"><i class="bi bi-sun"></i> Light</a>
+        <a class="dropdown-item theme-choice" data-theme="dark" href="#"><i class="bi bi-moon"></i> Dark</a>
+        <a class="dropdown-item theme-choice" data-theme="auto" href="#"><i class="bi-circle-half"></i> Auto</a>
+      </div>
+    </div>
+  </div>
   <section id="hero" class="d-flex align-items-center">
     <div class="container">
       <div class="row">
@@ -31,7 +59,7 @@ <h2>
           <a href="https://github.com/json-api-dotnet/JsonApiDotNetCore/" target="_blank" class="btn-get-started">Contribute on GitHub</a>
         </div>
         <div class="col-lg-5 order-1 order-lg-2 hero-img">
-          <img src="styles/img/logo.png" class="img-fluid animated" alt="project logo">
+          <img src="styles/img/logo.svg" class="img-fluid animated" alt="project logo">
         </div>
       </div>
     </div>

diff --git a/logo.png b/logo.png
diff --git a/package-icon.png b/package-icon.png
diff --git a/src/JsonApiDotNetCore.Annotations/JsonApiDotNetCore.Annotations.csproj b/src/JsonApiDotNetCore.Annotations/JsonApiDotNetCore.Annotations.csproj
@@ -17,15 +17,15 @@
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
     <PackageRequireLicenseAcceptance>false</PackageRequireLicenseAcceptance>
     <PackageReleaseNotes>See https://github.com/json-api-dotnet/JsonApiDotNetCore/releases.</PackageReleaseNotes>
-    <PackageIcon>logo.png</PackageIcon>
+    <PackageIcon>package-icon.png</PackageIcon>
     <PackageReadmeFile>PackageReadme.md</PackageReadmeFile>
     <PublishRepositoryUrl>true</PublishRepositoryUrl>
     <EmbedUntrackedSources>true</EmbedUntrackedSources>
     <DebugType>embedded</DebugType>
   </PropertyGroup>
 
   <ItemGroup>
-    <None Include="..\..\logo.png" Visible="false" Pack="True" PackagePath="" />
+    <None Include="..\..\package-icon.png" Visible="false" Pack="True" PackagePath="" />
     <None Include="..\..\PackageReadme.md" Visible="false" Pack="True" PackagePath="" />
   </ItemGroup>
 

diff --git a/src/JsonApiDotNetCore.SourceGenerators/JsonApiDotNetCore.SourceGenerators.csproj b/src/JsonApiDotNetCore.SourceGenerators/JsonApiDotNetCore.SourceGenerators.csproj
@@ -19,13 +19,13 @@
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
     <PackageRequireLicenseAcceptance>false</PackageRequireLicenseAcceptance>
     <PackageReleaseNotes>See https://github.com/json-api-dotnet/JsonApiDotNetCore/releases.</PackageReleaseNotes>
-    <PackageIcon>logo.png</PackageIcon>
+    <PackageIcon>package-icon.png</PackageIcon>
     <PackageReadmeFile>PackageReadme.md</PackageReadmeFile>
     <RepositoryUrl>https://github.com/json-api-dotnet/JsonApiDotNetCore</RepositoryUrl>
   </PropertyGroup>
 
   <ItemGroup>
-    <None Include="..\..\logo.png" Visible="false" Pack="True" PackagePath="" />
+    <None Include="..\..\package-icon.png" Visible="false" Pack="True" PackagePath="" />
     <None Include="..\..\PackageReadme.md" Visible="false" Pack="True" PackagePath="" />
   </ItemGroup>
 

diff --git a/src/JsonApiDotNetCore/JsonApiDotNetCore.csproj b/src/JsonApiDotNetCore/JsonApiDotNetCore.csproj
@@ -16,15 +16,15 @@
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
     <PackageRequireLicenseAcceptance>false</PackageRequireLicenseAcceptance>
     <PackageReleaseNotes>See https://github.com/json-api-dotnet/JsonApiDotNetCore/releases.</PackageReleaseNotes>
-    <PackageIcon>logo.png</PackageIcon>
+    <PackageIcon>package-icon.png</PackageIcon>
     <PackageReadmeFile>PackageReadme.md</PackageReadmeFile>
     <PublishRepositoryUrl>true</PublishRepositoryUrl>
     <EmbedUntrackedSources>true</EmbedUntrackedSources>
     <DebugType>embedded</DebugType>
   </PropertyGroup>
 
   <ItemGroup>
-    <None Include="..\..\logo.png" Visible="false" Pack="True" PackagePath="" />
+    <None Include="..\..\package-icon.png" Visible="false" Pack="True" PackagePath="" />
     <None Include="..\..\PackageReadme.md" Visible="false" Pack="True" PackagePath="" />
   </ItemGroup>