feat: load theme from first HTML render cookie (#3505)

routers/static_filter.go

@@ -133,6 +133,11 @@ func StaticFilter(ctx *context.Context) {
 		path += urlPath
 	}
 
+	err := appendThemeCookie(ctx, urlPath)
+	if err != nil {
+		fmt.Println(err)
+	}
+
 	if strings.Contains(path, "/../") || !util.FileExist(path) {
 		path = webBuildFolder + "/index.html"
 	}

routers/theme_filter.go

@@ -0,0 +1,76 @@
+// Copyright 2025 The Casdoor 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.
+
+package routers
+
+import (
+	"encoding/json"
+	"fmt"
+	"strings"
+
+	"github.com/beego/beego/context"
+	"github.com/casdoor/casdoor/object"
+)
+
+func appendThemeCookie(ctx *context.Context, urlPath string) error {
+	if urlPath == "/login" {
+		organization, err := object.GetOrganization(fmt.Sprintf("admin/built-in"))
+		if err != nil {
+			return err
+		}
+		if organization != nil {
+			return setThemeDataCookie(ctx, organization.ThemeData)
+		}
+	} else if strings.HasPrefix(urlPath, "/login/oauth/authorize") {
+		clientId := ctx.Input.Query("client_id")
+		if clientId == "" {
+			return nil
+		}
+		application, err := object.GetApplicationByClientId(clientId)
+		if err != nil {
+			return err
+		}
+		if application != nil {
+			organization, err := object.GetOrganization(fmt.Sprintf("admin/%s", application.Organization))
+			if err != nil {
+				return err
+			}
+			if organization != nil {
+				return setThemeDataCookie(ctx, organization.ThemeData)
+			}
+		}
+	} else if strings.HasPrefix(urlPath, "/login/") {
+		owner := strings.Replace(urlPath, "/login/", "", -1)
+		if owner != "undefined" && owner != "oauth/undefined" {
+			organization, err := object.GetOrganization(fmt.Sprintf("admin/%s", owner))
+			if err != nil {
+				return err
+			}
+			if organization != nil {
+				return setThemeDataCookie(ctx, organization.ThemeData)
+			}
+		}
+	}
+
+	return nil
+}
+
+func setThemeDataCookie(ctx *context.Context, themeData *object.ThemeData) error {
+	themeDataString, err := json.Marshal(themeData)
+	if err != nil {
+		return err
+	}
+	ctx.SetCookie("organizationTheme", string(themeDataString))
+	return nil
+}

web/src/App.js

@@ -36,6 +36,7 @@ const {Footer, Content} = Layout;
 
 import {setTwoToneColor} from "@ant-design/icons";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
+import * as Cookie from "cookie";
 
 setTwoToneColor("rgb(87,52,211)");
 
@@ -360,11 +361,19 @@ class App extends Component {
 
   renderPage() {
     if (this.isDoorPages()) {
+      let themeData = this.state.themeData;
+      if (this.state.organization === undefined) {
+        const curCookie = Cookie.parse(document.cookie);
+        if (curCookie["organizationTheme"] && curCookie["organizationTheme"] !== "null") {
+          themeData = JSON.parse(curCookie["organizationTheme"]);
+        }
+      }
+
       return (
         <ConfigProvider theme={{
           token: {
-            colorPrimary: this.state.themeData.colorPrimary,
+            colorPrimary: themeData.colorPrimary,
-            borderRadius: this.state.themeData.borderRadius,
+            borderRadius: themeData.borderRadius,
           },
           algorithm: Setting.getAlgorithm(this.state.themeAlgorithm),
         }}>