Fix styling issues with Light theme.

ichenpipi · Aug 8, 2023 · d578981 · d578981
1 parent ef3e97f
commit d578981
Show file tree

Hide file tree

Showing 20 changed files with 146 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.0.2] - 2023-08-08
+
+- Fix styling issues with Light theme.
+
 ## [1.0.1] - 2023-08-05
 
 - Update project structure and fix bugs.

diff --git a/Editor/Scripts/Window/Components/ProjectPinBoardWindowListItem.cs b/Editor/Scripts/Window/Components/ProjectPinBoardWindowListItem.cs
@@ -104,7 +104,6 @@ public ListItem()
                     topImage = new Image
                     {
                         name = "Top",
-                        // image = ProjectPinBoardUtil.GetIcon("UpArrow"),
                         image = PipiUtility.GetIcon("Download-Available"),
                         pickingMode = PickingMode.Ignore,
                         scaleMode = ScaleMode.ScaleToFit,

diff --git a/Editor/Scripts/Window/Components/ProjectPinBoardWindowSeparator.cs b/Editor/Scripts/Window/Components/ProjectPinBoardWindowSeparator.cs
@@ -1,4 +1,3 @@
-using UnityEngine;
 using UnityEngine.UIElements;
 
 namespace ChenPipi.ProjectPinBoard.Editor
@@ -10,11 +9,6 @@ namespace ChenPipi.ProjectPinBoard.Editor
     public partial class ProjectPinBoardWindow
     {
 
-        /// <summary>
-        /// 分割线颜色
-        /// </summary>
-        private readonly Color m_SeparatorColor = new Color(35 / 255f, 35 / 255f, 35 / 255f, 1f);
-
         /// <summary>
         /// 生成水平分割线
         /// </summary>
@@ -30,7 +24,7 @@ private VisualElement GenHorizontalSeparator(float margin = 5, string name = "Se
                 {
                     height = 1,
                     borderBottomWidth = 1,
-                    borderBottomColor = m_SeparatorColor,
+                    borderBottomColor = separatorColor,
                     marginTop = margin,
                     marginBottom = margin,
                     flexShrink = 0,

diff --git a/Editor/Scripts/Window/Components/ProjectPinBoardWindowTagLabel.cs b/Editor/Scripts/Window/Components/ProjectPinBoardWindowTagLabel.cs
@@ -42,13 +42,15 @@ private Label GenTagLabel(string text, Action clickCallback = null)
                     paddingRight = 5,
                     marginLeft = 5,
                     marginTop = 5,
+                    color = tagTextColor,
                     unityTextAlign = TextAnchor.MiddleCenter,
                     unityFontStyleAndWeight = FontStyle.Bold,
                     whiteSpace = WhiteSpace.Normal,
                 }
             };
             // 使用 uss 指定部分样式，代码目前无法指定 hover 状态样式
             label.AddToClassList("Tag");
+            label.AddToClassList(Theme.isDarkTheme ? "Dark" : "Light");
             // 点击回调
             if (clickCallback != null)
             {

diff --git a/Editor/Scripts/Window/Components/ProjectPinBoardWindowTagPopup.cs b/Editor/Scripts/Window/Components/ProjectPinBoardWindowTagPopup.cs
@@ -101,7 +101,7 @@ Label GenSubTitleLabel(string text)
                             marginTop = 0,
                             marginLeft = 5,
                             marginRight = 5,
-                            unityFontStyleAndWeight = FontStyle.Bold,
+                            unityFontStyleAndWeight = FontStyle.Normal,
                             whiteSpace = WhiteSpace.Normal,
                         }
                     };
@@ -162,7 +162,11 @@ Box GenTagContainer(string name)
                         position = Position.Absolute,
                         paddingTop = 5,
                         paddingBottom = 10,
-                        backgroundColor = new Color(57 / 255f, 57 / 255f, 57 / 255f, 1f),
+                        backgroundColor = popupBgColor,
+                        borderTopColor = borderColor,
+                        borderBottomColor = borderColor,
+                        borderLeftColor = borderColor,
+                        borderRightColor = borderColor,
                         borderTopLeftRadius = 8,
                         borderTopRightRadius = 8,
                         borderBottomLeftRadius = 8,
@@ -221,6 +225,7 @@ void UpdateTransform()
                     {
                         marginBottom = 10,
                         unityTextAlign = TextAnchor.MiddleCenter,
+                        unityFontStyleAndWeight = FontStyle.Bold,
                         whiteSpace = WhiteSpace.Normal,
                     }
                 });

diff --git a/Editor/Scripts/Window/Content/ProjectPinBoardWindowAssetList.cs b/Editor/Scripts/Window/Content/ProjectPinBoardWindowAssetList.cs
@@ -306,7 +306,7 @@ private ListItem CreateListItem()
             ListItem listItem = new ListItem();
             // 浮动按钮
             listItem.enableFloatButton = true;
-            listItem.floatButton.SetIcon(PipiUtility.GetIcon("d_Record Off"));
+            listItem.floatButton.SetIcon(PipiUtility.GetIcon("Record Off"));
             listItem.floatButton.tooltip = "Locate to asset";
             listItem.floatButtonClicked += OnListItemFloatButtonClicked;
             // 注册右键菜单

diff --git a/Editor/Scripts/Window/Content/ProjectPinBoardWindowDragAndDrop.cs b/Editor/Scripts/Window/Content/ProjectPinBoardWindowDragAndDrop.cs
@@ -71,14 +71,13 @@ private void InitDropArea()
                     bottom = 0,
                     left = 0,
                     right = 0,
-                    backgroundColor = new Color(0f, 0f, 0f, 80 / 255f),
+                    backgroundColor = dropTipBgColor,
                 }
             };
             rootVisualElement.Add(m_DropArea);
 
             // 放置样式
             const int dropTipBorderWidth = 2;
-            Color dropTipBorderColor = new Color(210 / 255f, 210 / 255f, 210 / 255f, 1f);
             float dropTipMarginTop = m_Toolbar.style.height.value.value;
             m_DropTip = new VisualElement()
             {
@@ -111,7 +110,7 @@ private void InitDropArea()
                     paddingLeft = 0,
                     paddingRight = 0,
                     fontSize = 40,
-                    color = new Color(210 / 255f, 210 / 255f, 210 / 255f, 1f),
+                    color = dropTipTextColor,
                     unityFontStyleAndWeight = FontStyle.Bold,
                     unityTextAlign = TextAnchor.MiddleCenter,
 #if UNITY_2021_1_OR_NEWER

diff --git a/Editor/Scripts/Window/Content/ProjectPinBoardWindowPreview.cs b/Editor/Scripts/Window/Content/ProjectPinBoardWindowPreview.cs
@@ -260,7 +260,7 @@ private void InitContentPreview()
                     paddingRight = 5,
                     borderTopWidth = 1,
                     backgroundColor = PipiUtility.EditorBackgroundColor,
-                    borderTopColor = m_SeparatorColor,
+                    borderTopColor = separatorColor,
                     flexDirection = FlexDirection.Row,
                     flexWrap = Wrap.Wrap,
                     alignItems = Align.Center,

diff --git a/Editor/Scripts/Window/ProjectPinBoardWindow.cs b/Editor/Scripts/Window/ProjectPinBoardWindow.cs
@@ -1,6 +1,5 @@
 using System;
 using System.Collections.Generic;
-using System.Text.RegularExpressions;
 using UnityEditor;
 using UnityEngine;
 using UnityEngine.UIElements;
@@ -30,11 +29,6 @@ public partial class ProjectPinBoardWindow
         /// </summary>
         private const string k_Title = "Project Pin Board";
 
-        /// <summary>
-        /// 窗口图标
-        /// </summary>
-        private const string k_Icon = "d_Favorite";
-
         /// <summary>
         /// 是否有已打开的窗口实例
         /// </summary>
@@ -70,7 +64,7 @@ public static ProjectPinBoardWindow CreateInstance()
             window.titleContent = new GUIContent()
             {
                 text = k_Title,
-                image = PipiUtility.GetIcon(k_Icon),
+                image = PipiUtility.GetIcon("Favorite"),
             };
             window.minSize = new Vector2(250f, 200f);
             window.SetSize(600, 500);

diff --git a/Editor/Scripts/Window/ProjectPinBoardWindowContent.cs b/Editor/Scripts/Window/ProjectPinBoardWindowContent.cs
@@ -96,11 +96,12 @@ void Callback(GeometryChangedEvent evt)
             // 拖拽线
             {
                 VisualElement dragLine = m_ContentSplitView.Q<VisualElement>("unity-dragline-anchor");
-                IStyle style = dragLine.style;
+                IStyle dragLineStyle = dragLine.style;
                 // 禁止拖拽线在Hover的时候变颜色
-                dragLine.RegisterCallback<MouseEnterEvent>((evt) => style.backgroundColor = new Color(89 / 255f, 89 / 255f, 89 / 255f, 1f));
+                Color color = dragLineColor;
+                dragLine.RegisterCallback<MouseEnterEvent>((evt) => dragLineStyle.backgroundColor = color);
                 // 拖动拖拽线后保存其位置
-                dragLine.RegisterCallback<MouseUpEvent>((evt) => ProjectPinBoardSettings.dragLinePos = style.left.value.value);
+                dragLine.RegisterCallback<MouseUpEvent>((evt) => ProjectPinBoardSettings.dragLinePos = dragLineStyle.left.value.value);
             }
 
             // 初始化列表

diff --git a/Editor/Scripts/Window/ProjectPinBoardWindowStyle.cs b/Editor/Scripts/Window/ProjectPinBoardWindowStyle.cs
@@ -0,0 +1,98 @@
+using System.Collections.Generic;
+using UnityEditor;
+using UnityEngine;
+
+namespace ChenPipi.ProjectPinBoard.Editor
+{
+
+    /// <summary>
+    /// 窗口
+    /// </summary>
+    public partial class ProjectPinBoardWindow
+    {
+
+        private static Color separatorColor => Theme.GetColor("SeparatorColor");
+
+        private static Color dragLineColor => Theme.GetColor("DragLineColor");
+
+        private static Color popupBgColor => Theme.GetColor("PopupBgColor");
+
+        private static Color textColor => Theme.GetColor("TextColor");
+        private static Color borderColor => Theme.GetColor("BorderColor");
+
+        private static Color tagBgColor => Theme.GetColor("TagBgColor");
+        private static Color tagTextColor => Theme.GetColor("TagTextColor");
+
+        private static Color dropTipBgColor => Theme.GetColor("DropTipBgColor");
+        private static Color dropTipBorderColor => Theme.GetColor("DropTipBorderColor");
+        private static Color dropTipTextColor => Theme.GetColor("DropTipTextColor");
+
+        private static class Theme
+        {
+
+            public static Color GetColor(string name)
+            {
+                if (isDarkTheme)
+                {
+                    if (s_DarkColor.TryGetValue(name, out Color color)) return color;
+                }
+                else
+                {
+                    if (s_LightColor.TryGetValue(name, out Color color)) return color;
+                }
+                return s_DefaultColor;
+            }
+
+            public static bool isDarkTheme => EditorGUIUtility.isProSkin;
+
+            private static readonly Color s_DefaultColor = Color.black;
+
+            private static readonly Dictionary<string, Color> s_DarkColor = new Dictionary<string, Color>()
+            {
+                { "SeparatorColor", new Color(35 / 255f, 35 / 255f, 35 / 255f, 1) },
+
+                { "DragLineColor", new Color(89 / 255f, 89 / 255f, 89 / 255f, 1) },
+
+                { "TextColor", new Color(196 / 255f, 196 / 255f, 196 / 255f, 1) },
+                { "BorderColor", new Color(102 / 255f, 102 / 255f, 102 / 255f, 1) },
+
+                { "PopupBgColor", new Color(57 / 255f, 57 / 255f, 57 / 255f, 1) },
+
+                { "TagBgColor", new Color(34 / 255f, 73 / 255f, 128 / 255f, 1) },
+                { "TagTextColor", new Color(196 / 255f, 196 / 255f, 196 / 255f, 1) },
+
+                { "DropTipBgColor", new Color(0f, 0f, 0f, 80 / 255f) },
+                { "DropTipBorderColor", new Color(210 / 255f, 210 / 255f, 210 / 255f, 1) },
+                { "DropTipTextColor", new Color(210 / 255f, 210 / 255f, 210 / 255f, 1) },
+
+                { "ListItemNormalColor", new Color(0, 0, 0, 0) },
+                { "ListItemActiveColor", new Color(44 / 255f, 93 / 255f, 135 / 255f, 1) },
+            };
+
+            private static readonly Dictionary<string, Color> s_LightColor = new Dictionary<string, Color>()
+            {
+                { "SeparatorColor", new Color(153 / 255f, 153 / 255f, 153 / 255f, 1) },
+
+                { "DragLineColor", new Color(153 / 255f, 153 / 255f, 153 / 255f, 1) },
+
+                { "TextColor", new Color(250 / 255f, 250 / 255f, 250 / 255f, 1) },
+                { "BorderColor", new Color(153 / 255f, 153 / 255f, 153 / 255f, 1) },
+
+                { "PopupBgColor", new Color(222 / 255f, 222 / 255f, 222 / 255f, 1) },
+
+                { "TagBgColor", new Color(20 / 255f, 100 / 255f, 200 / 255f, 1) },
+                { "TagTextColor", new Color(250 / 255f, 250 / 255f, 250 / 255f, 1) },
+
+                { "DropTipBgColor", new Color(0f, 0f, 0f, 160 / 255f) },
+                { "DropTipBorderColor", new Color(210 / 255f, 210 / 255f, 210 / 255f, 1) },
+                { "DropTipTextColor", new Color(210 / 255f, 210 / 255f, 210 / 255f, 1) },
+
+                { "ListItemNormalColor", new Color(0, 0, 0, 0) },
+                { "ListItemActiveColor", new Color(46 / 255f, 91 / 255f, 141 / 255f, 1) },
+            };
+
+        }
+
+    }
+
+}
diff --git a/Editor/Scripts/Window/ProjectPinBoardWindowStyle.cs.meta b/Editor/Scripts/Window/ProjectPinBoardWindowStyle.cs.meta
diff --git a/Editor/Scripts/Window/ProjectPinBoardWindowToolbar.cs b/Editor/Scripts/Window/ProjectPinBoardWindowToolbar.cs
@@ -28,6 +28,12 @@ private void InitToolbar()
                 m_Toolbar.style.flexDirection = FlexDirection.Row;
             }
 
+            // 分割线
+            VisualElement separator = rootVisualElement.Q<VisualElement>("Separator");
+            {
+                separator.style.borderBottomColor = separatorColor;
+            }
+
             // 搜索栏
             InitToolbarSearchField();
             // 过滤器

diff --git a/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarFilter.cs b/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarFilter.cs
@@ -54,7 +54,7 @@ private void InitToolbarFilterButton()
             // 图标
             m_TypeFilterButton.Add(new Image()
             {
-                image = PipiUtility.GetIcon("d_FilterByType"),
+                image = PipiUtility.GetIcon("FilterByType"),
                 scaleMode = ScaleMode.ScaleToFit,
                 style =
                 {
@@ -89,7 +89,7 @@ private void InitToolbarFilterButton()
             // 图标
             m_TagFilterButton.Add(new Image()
             {
-                image = PipiUtility.GetIcon("d_FilterByLabel"),
+                image = PipiUtility.GetIcon("FilterByLabel"),
                 scaleMode = ScaleMode.ScaleToFit,
                 style =
                 {

diff --git a/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarPreview.cs b/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarPreview.cs
@@ -50,7 +50,7 @@ private void InitToolbarPreviewToggle()
             // 图标
             m_ToolbarPreviewToggle.Add(new Image()
             {
-                image = PipiUtility.GetIcon("d_scenevis_visible_hover"),
+                image = PipiUtility.GetIcon("scenevis_visible_hover"),
                 scaleMode = ScaleMode.ScaleToFit,
                 style =
                 {

diff --git a/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarSort.cs b/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarSort.cs
@@ -48,7 +48,7 @@ private void InitToolbarSortingMenu()
             // 图标
             m_SortingMenu.Insert(0, new Image()
             {
-                image = PipiUtility.GetIcon("d_AlphabeticalSorting"),
+                image = PipiUtility.GetIcon("AlphabeticalSorting"),
                 scaleMode = ScaleMode.ScaleToFit,
             });
             // 隐藏文本元素

diff --git a/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarSyncSelection.cs b/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarSyncSelection.cs
@@ -50,7 +50,7 @@ private void InitToolbarSyncSelectionToggle()
             // 图标
             m_ToolbarSyncSelectionToggle.Add(new Image()
             {
-                image = PipiUtility.GetIcon("d_Grid.Default"),
+                image = PipiUtility.GetIcon("Grid.Default"),
                 scaleMode = ScaleMode.ScaleToFit,
                 style =
                 {

diff --git a/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarTopFolder.cs b/Editor/Scripts/Window/Toolbar/ProjectPinBoardWindowToolbarTopFolder.cs
@@ -50,7 +50,7 @@ private void InitToolbarTopFolderToggle()
             // 图标
             m_ToolbarTopFolderToggle.Add(new Image()
             {
-                image = PipiUtility.GetIcon("d_Folder Icon"),
+                image = PipiUtility.GetIcon("Folder Icon"),
                 scaleMode = ScaleMode.ScaleToFit,
                 style =
                 {

diff --git a/Editor/UI/ProjectPinBoard.uss b/Editor/UI/ProjectPinBoard.uss
@@ -1,11 +1,19 @@
 .Tag {
-    background-color: rgba(34, 73, 128, 1.0);
+
 }
 
 .Tag:hover {
 
 }
 
+.Tag.Dark {
+    background-color: rgba(34, 73, 128, 1.0);
+}
+
+.Tag.Light {
+    background-color: rgba(20, 100, 200, 1.0);
+}
+
 .Tag.Addable {
 
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "com.chenpipi.project-pin-board",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "unity": "2020.2",
     "displayName": "Project Pin Board",
     "keywords": [