跳转至

tkflu.designs.litenav · 导航栏配色

轻量导航栏的设计规范。

导航栏本身不画背景(back_color = None)——它一般贴在窗口或面板的 顶部/左侧,背景交给父容器;需要一块独立色块时用 style="card"。

对照 Windows 的 NavigationView:

  • 选中项的指示条是强调色的小圆头条;
  • 选中项底只有一层很淡的强调色,文字变成强调色;
  • 悬停项是一层很淡的中性色。

这里给的是整套调色板(而不是"某个状态下的一个条目"), 对应的实现方式与其它组件一致:控件把它灌进 attributes, 绘制每个条目时按条目自己的状态取值。

litenav(mode='light', style='standard')

取导航栏的整套配色。

:param mode: "light" / "dark" :param style: "standard"(透明底)或 "card"(带圆角卡片底) :returns: 配色字典,键与 FluLiteNav.attributes 一一对应

:raises ValueError: mode / style 无法识别

源代码位于: tkflu\designs\litenav.py
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
def litenav(mode: str = "light", style: str = "standard") -> dict:
    """取导航栏的整套配色。

    :param mode: ``"light"`` / ``"dark"``
    :param style: ``"standard"``(透明底)或 ``"card"``(带圆角卡片底)
    :returns: 配色字典,键与 ``FluLiteNav.attributes`` 一一对应

    :raises ValueError: ``mode`` / ``style`` 无法识别
    """
    mode = str(mode).lower()
    style = str(style).lower()
    if mode not in ("light", "dark"):
        raise ValueError(f"未知的主题模式 {mode!r};应为 'light' 或 'dark'")
    if style not in STYLES:
        raise ValueError(f"未知的样式 {style!r};应为 {list(STYLES)} 之一")

    accent = get_primary_color()[0 if mode == "light" else 1]
    surface = "#ffffff" if mode == "light" else "#2b2b2b"
    overlay = "#000000" if mode == "light" else "#ffffff"

    if style == "card":
        back_color = surface
        # 卡片样式下用一点黑描边压住边缘(深浅主题都是黑,只是透明度不同)
        border_color = "#000000"
        border_opacity = 0.0578 if mode == "light" else 0.10
    else:
        back_color = None
        border_color = None
        border_opacity = 0.0

    return {
        "back_color": back_color,
        "back_opacity": 1.0 if back_color else 0.0,
        "border_color": border_color,
        "border_color_opacity": border_opacity,
        "border_width": 1 if style == "card" else 0,
        "radius": 7,
        # 条目
        "item_text_color": TEXT[mode]["primary"],
        "item_disabled_text": TEXT[mode]["disabled"],
        "item_selected_text": accent,
        "item_hover_back": blend(overlay, _HOVER_TINT, surface),
        "item_pressed_back": blend(overlay, _PRESSED_TINT, surface),
        "item_selected_back": blend(accent, _SELECT_TINT[mode], surface),
        "indicator_color": accent,
        "indicator_idle": blend(accent, 0.35, surface),
        # 禁用态的图标/占位色
        "glyph_disabled": GLYPH_DISABLED[mode],
    }