This is an automated email from the ASF dual-hosted git repository.
hsluoyz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/casbin-gateway.git
The following commit(s) were added to refs/heads/master by this push:
new 82f875f feat(ui): update logo with a dark variant
82f875f is described below
commit 82f875f7f0b5f2049941b434de973f4eaeedbcb8
Author: Yang Luo <[email protected]>
AuthorDate: Fri Sep 4 15:46:48 2026 +0800
feat(ui): update logo with a dark variant
---
web/src/App.tsx | 7 ++---
web/src/components/shared/app-sidebar.tsx | 18 +++++--------
web/src/components/shared/logo.tsx | 43 +++++++++++++++++++++++++++++++
web/src/pages/SigninPage.tsx | 7 ++---
4 files changed, 53 insertions(+), 22 deletions(-)
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 25b710e..8f6fc8d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -25,6 +25,7 @@ import {AppHeader} from "@/components/shared/app-header";
import {AppSidebar, persistOpenKeys, readSavedOpenKeys, useIsDesktop} from
"@/components/shared/app-sidebar";
import {CommandPalette, useCommandPalette} from
"@/components/shared/command-palette";
import {Loading} from "@/components/shared/loading";
+import {Logo} from "@/components/shared/logo";
import {TooltipProvider} from "@/components/ui/tooltip";
import {cn} from "@/lib/utils";
import AccountPage from "@/pages/AccountPage";
@@ -330,11 +331,7 @@ export default function App() {
<footer className="flex items-center justify-center border-t py-5">
<a target="_blank" rel="noreferrer"
href="https://github.com/apache/casbin-gateway";>
- <img
- className="h-[30px] w-auto dark:invert dark:hue-rotate-180"
- alt="Casbin"
- src={`${Setting.StaticBaseUrl}/img/casbin_logo_1024x256.png`}
- />
+ <Logo className="h-[30px] w-auto" />
</a>
</footer>
</div>
diff --git a/web/src/components/shared/app-sidebar.tsx
b/web/src/components/shared/app-sidebar.tsx
index 309b506..f4f8f78 100644
--- a/web/src/components/shared/app-sidebar.tsx
+++ b/web/src/components/shared/app-sidebar.tsx
@@ -17,9 +17,9 @@ import {Link} from "react-router-dom";
import {ChevronDown, type LucideIcon} from "lucide-react";
import i18next from "i18next";
-import * as Setting from "@/Setting";
import {cn} from "@/lib/utils";
import {navGroups, type NavGroup} from "@/nav";
+import {Logo, LogoMark} from "@/components/shared/logo";
import {SimpleTooltip} from "@/components/ui/tooltip";
const OPEN_KEYS_STORAGE = "siderMenuOpenKeys";
@@ -169,17 +169,11 @@ export function AppSidebar({
>
<div className={cn("flex h-13 shrink-0 items-center border-b px-5",
railCollapsed && "justify-center px-0")}>
<Link to="/" className="flex items-center overflow-hidden">
- <img
- src={`${Setting.StaticBaseUrl}/img/logo_384x96.png`}
- alt="Casbin Gateway"
- // The wordmark is black ink on transparent. Inverting luminance
- // and rotating the hue back lights it up without draining the
- // colour out of the gopher and the shield.
- className={cn(
- "w-auto object-contain transition-all dark:invert
dark:hue-rotate-180",
- railCollapsed ? "h-5" : "h-7 max-w-[150px]",
- )}
- />
+ {railCollapsed ? (
+ <LogoMark className="h-7 w-auto object-contain transition-all" />
+ ) : (
+ <Logo className="h-7 w-auto max-w-[150px] object-contain
transition-all" />
+ )}
</Link>
</div>
diff --git a/web/src/components/shared/logo.tsx
b/web/src/components/shared/logo.tsx
new file mode 100644
index 0000000..069abb1
--- /dev/null
+++ b/web/src/components/shared/logo.tsx
@@ -0,0 +1,43 @@
+// Copyright 2026 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as Setting from "@/Setting";
+import {cn} from "@/lib/utils";
+
+// Two files with the ink baked in rather than one recoloured on the fly: an
+// <img> cannot inherit currentColor, and the theme is a class on <html>, so
+// prefers-color-scheme inside the SVG would not follow the toggle either.
+export function Logo({className}: {className?: string}) {
+ return (
+ <>
+ <img
+ src={`${Setting.StaticBaseUrl}/img/apache-casbin-logo.svg`}
+ alt="Apache Casbin"
+ className={cn("dark:hidden", className)}
+ />
+ <img
+ src={`${Setting.StaticBaseUrl}/img/apache-casbin-logo_dark.svg`}
+ alt=""
+ aria-hidden="true"
+ className={cn("hidden dark:block", className)}
+ />
+ </>
+ );
+}
+
+// The gopher on its own, for slots too narrow for the wordmark. It carries its
+// own colour and reads on either background, so there is only one of it.
+export function LogoMark({className}: {className?: string}) {
+ return <img src={`${Setting.StaticBaseUrl}/img/casbin-mark.svg`} alt="Apache
Casbin" className={className} />;
+}
diff --git a/web/src/pages/SigninPage.tsx b/web/src/pages/SigninPage.tsx
index 9cf2975..3342df0 100644
--- a/web/src/pages/SigninPage.tsx
+++ b/web/src/pages/SigninPage.tsx
@@ -20,6 +20,7 @@ import * as AccountBackend from "@/backend/AccountBackend";
import * as Conf from "@/Conf";
import * as Setting from "@/Setting";
import {Loading} from "@/components/shared/loading";
+import {Logo} from "@/components/shared/logo";
import {ResultScreen} from "@/components/shared/misc";
import {PasswordInput} from "@/components/shared/password-input";
import {Button} from "@/components/ui/button";
@@ -96,11 +97,7 @@ export default function SigninPage() {
<div className="bg-muted/30 flex min-h-screen items-center justify-center
p-6">
<div className="w-full max-w-sm">
<div className="mb-9 flex justify-center">
- <img
- src={`${Setting.StaticBaseUrl}/img/logo_384x96.png`}
- alt="Casbin Gateway"
- className="h-10 w-auto max-w-[260px] object-contain dark:invert
dark:hue-rotate-180"
- />
+ <Logo className="h-10 w-auto max-w-[260px] object-contain" />
</div>
<form onSubmit={onSubmit} className="bg-card grid gap-4 rounded-xl
border p-6 shadow-sm">
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
