The sidebar secondary menu icon is not controlled like the primary menu icon with --sidebar-accent and --sidebar-accent-foreground

[quanhongyang]

Why are the colors of {item.title} and {item.icon} controlled by -- sidebar--accent where
The {subItem.icon} color is controlled by --sidebar--accent--foreground, the {subItem.title} color is controlled by --sidebar--accent, what can I do to make {subItem.title} and {subItem.icon} like {item.title} and {item.icon}。

 <SidebarMenuItem>
        <CollapsibleTrigger asChild>
          <SidebarMenuButton tooltip={item.title}>
            {item.icon && <item.icon />}
            <span>{item.title}</span>
            {item.badge && <NavBadge>{item.badge}</NavBadge>}
            <ChevronRight className='ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
          </SidebarMenuButton>
        </CollapsibleTrigger>
        <CollapsibleContent className='CollapsibleContent'>
          <SidebarMenuSub>
            {item.items.map((subItem: any) => (
              <SidebarMenuSubItem key={subItem.title}>
                <SidebarMenuSubButton
                  asChild
                  isActive={checkIsActive(href, subItem)}
                >
                  <NavLink to={subItem.url} onClick={() => setOpenMobile(false)}  >
                    {subItem.icon && <subItem.icon />}
                    <span>{subItem.title}</span>
                    {subItem.badge && <NavBadge>{subItem.badge}</NavBadge>}
                  </NavLink>
                </SidebarMenuSubButton>       
              </SidebarMenuSubItem>
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>