Unify light theme surfaces and style Fluent navigation for readability

Author: imadreamerboy

markitdowngui/ui/themes.py

@@ -3,7 +3,7 @@
 from PySide6.QtGui import QColor, QPalette
 from qfluentwidgets import Theme, isDarkTheme, setTheme, setThemeColor
 
-SOLARIZED_ACCENT = "#268BD2"
+SOLARIZED_ACCENT = "#2AA198"
 NORD_ACCENT = "#88C0D0"
 ACCENT_COLOR = SOLARIZED_ACCENT
 
@@ -28,6 +28,10 @@ def build_app_stylesheet(is_dark: bool) -> str:
     if is_dark:
         panel_bg_a = "#2E3440"
         panel_bg_b = "#3B4252"
+        window_bg = "#2B313D"
+        stack_bg = "#313947"
+        nav_bg = "#2E3440"
+        nav_border = "#4C566A"
         card_bg = "#3B4252"
         card_bg_alt = "#434C5E"
         border = "#4C566A"
@@ -39,96 +43,162 @@ def build_app_stylesheet(is_dark: bool) -> str:
         accent = NORD_ACCENT
     else:
         panel_bg_a = "#FDF6E3"
-        panel_bg_b = "#EEE8D5"
-        card_bg = "#FDF8E8"
-        card_bg_alt = "#FAF3DF"
-        border = "#D8CCAA"
-        text = "#586E75"
-        subtext = "#657B83"
-        input_bg = "#FFFDF5"
-        hover = "#EEE8D5"
-        title = "#073642"
+        panel_bg_b = "#F7F0DB"
+        window_bg = "#F6EFD8"
+        stack_bg = "#FAF4E2"
+        nav_bg = "#F2EAD3"
+        nav_border = "#D9CCA8"
+        card_bg = "#FFFDF7"
+        card_bg_alt = "#FFF9EB"
+        border = "#D9CCA8"
+        text = "#4F646A"
+        subtext = "#61767C"
+        input_bg = "#FFFDF6"
+        hover = "#EFE5CB"
+        title = "#2B3F45"
         accent = SOLARIZED_ACCENT
 
     return f"""
+FluentWindowBase {{
+    background-color: {window_bg};
+}}
+
+FluentTitleBar, SplitTitleBar {{
+    background-color: transparent;
+}}
+
+FluentTitleBar>QLabel#titleLabel, SplitTitleBar>QLabel#titleLabel {{
+    color: {title};
+    font-size: 14px;
+    font-weight: 600;
+}}
+
+StackedWidget {{
+    background-color: {stack_bg};
+    border: 1px solid {border};
+    border-right: none;
+    border-bottom: none;
+    border-top-left-radius: 12px;
+}}
+
+NavigationInterface {{
+    background-color: {nav_bg};
+}}
+
+NavigationPanel[menu=false] {{
+    background-color: {nav_bg};
+    border: none;
+    border-right: 1px solid {nav_border};
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+}}
+
+NavigationPanel[menu=true] {{
+    background-color: {nav_bg};
+    border: 1px solid {nav_border};
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+}}
+
+NavigationPanel QScrollArea, NavigationPanel #scrollWidget {{
+    border: none;
+    background: transparent;
+}}
+
 QWidget#SettingsInterface, QWidget#HelpInterface, QWidget#HomeInterface {{
     background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 {panel_bg_a}, stop:1 {panel_bg_b});
-    font-size: 15px;
+    font-size: 14px;
 }}
+
 CardWidget, ElevatedCardWidget, SimpleCardWidget {{
     background: {card_bg};
     border: 1px solid {border};
     border-radius: 14px;
 }}
+
 QGroupBox {{
     border: 1px solid {border};
     border-radius: 12px;
     margin-top: 16px;
     padding: 14px 14px 14px 14px;
-    font-size: 17px;
+    font-size: 16px;
     font-weight: 700;
     color: {title};
     background: {card_bg_alt};
 }}
+
 QGroupBox::title {{
     subcontrol-origin: margin;
     left: 12px;
     padding: 0 8px;
     color: {title};
-    font-size: 18px;
-    font-weight: 800;
+    font-size: 16px;
+    font-weight: 700;
     background: transparent;
 }}
+
 BodyLabel, CaptionLabel, TitleLabel, SubtitleLabel {{
     color: {text};
 }}
+
 TitleLabel {{
-    font-size: 34px;
+    font-size: 30px;
     font-weight: 800;
     color: {title};
-    letter-spacing: 0.3px;
+    letter-spacing: 0.2px;
 }}
+
 SubtitleLabel {{
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 700;
     color: {title};
 }}
+
 BodyLabel {{
-    font-size: 16px;
-    font-weight: 600;
+    font-size: 15px;
+    font-weight: 500;
 }}
+
 CaptionLabel {{
-    font-size: 14px;
+    font-size: 13px;
     color: {subtext};
 }}
+
 QPushButton, PrimaryPushButton, PillPushButton, HyperlinkButton, QRadioButton, QCheckBox {{
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
 }}
+
 QComboBox, ComboBox, SpinBox, QAbstractSpinBox, QLineEdit {{
     font-size: 15px;
 }}
+
 QTextEdit, QTextBrowser, QListWidget, QLineEdit {{
     background: {input_bg};
     border: 1px solid {border};
     border-radius: 8px;
     color: {text};
     font-size: 15px;
 }}
+
 QTextEdit:focus, QTextBrowser:focus, QListWidget:focus, QLineEdit:focus {{
     border: 1px solid {accent};
 }}
+
 QListWidget::item {{
     padding: 8px 10px;
 }}
+
 QListWidget::item:selected {{
     background: {hover};
 }}
+
 QSplitter::handle {{
     background: {border};
     margin: 2px;
     border-radius: 2px;
 }}
+
 QSplitter::handle:hover {{
     background: {subtext};
 }}
@@ -145,12 +215,12 @@ def markdown_html_css(is_dark: bool) -> str:
         border = "#4C566A"
         muted = "#D8DEE9"
     else:
-        bg = "#FFFDF5"
-        text = "#586E75"
-        link = "#268BD2"
-        code_bg = "#FAF3DF"
-        border = "#D8CCAA"
-        muted = "#657B83"
+        bg = "#FFFDF6"
+        text = "#4F646A"
+        link = "#2AA198"
+        code_bg = "#FFF9EB"
+        border = "#D9CCA8"
+        muted = "#61767C"
 
     return (
         "body {"