Sidebar colours
Look of the left-hand menu — icons, hover states, and scrollbars.
Sidebar Color Customization
Use the sections below to tune the drawer panel, navigation items, scrollbar, and links. Changes apply after you save the form. Each sidebar colour is followed by a **dark mode** field. Use the **dark mode** switch in the admin top bar (same as on the site) to show those fields and preview the drawer with data-bs-theme="dark".
Drawer panel
Background of the sidebar and its main text colour.
Sidebar Background
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawerbgSidebar background (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawerbgdarkmodeSidebar Text
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawertextSidebar text (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawertextdarkmodeSection toggles (Categories / My courses)
By default, the “Categories” and “My courses” headers use the **same** colours and hover behaviour as .rui-nav-item-link. Enable **Custom section toggle styles** if you want a separate boxed look; then the two colour fields below control the outer wrapper and the button surface.
Custom section toggle styles
When enabled, the outer wrapper uses “Section toggle outer background” and the row uses “Section toggle button background”. When disabled, toggles match normal sidebar navigation links (transparent row, shared hover rules).
theme_xy/sidebarabtncustomstylesSection toggle outer background
Background of the outer wrapper around “Categories” and “My courses”. **Only applied** when “Custom section toggle styles” is enabled; otherwise toggles use the same flat look as normal sidebar links. Use the **Section toggle** colour fields below for label text, hover, icons, and badges in that mode.
theme_xy/colordrawernavcontainerSection toggle outer background (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavcontainerdarkmodeSection toggle button background
Background of the wide button row (.rui-sidebar-abtn). **Only applied** when “Custom section toggle styles” is enabled. Text, icons, and hover states still follow the “Navigation items” colours below.
theme_xy/colordrawersidebarabtnbgSection toggle button background (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawersidebarabtnbgdarkmodeSection toggle icon color
Icon colour inside the “My courses / Categories” toggle button (.rui-sidebar-abtn .rui-nav-icon). **Only applied** when “Custom section toggle styles” is enabled; otherwise the icon uses the main navigation icon colour.
theme_xy/colordrawersidebarabtniconSection toggle icon (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawersidebarabtnicondarkmodeSection toggle badge background
Background of the counter badge (e.g. *myCourseBadge*) rendered inside the toggle (.rui-sidebar-abtn .rui-drawer-badge). **Only applied** when “Custom section toggle styles” is enabled.
theme_xy/colordrawersidebarabtnbadgebgSection toggle badge background (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawersidebarabtnbadgebgdarkmodeSection toggle badge text
Text colour of the counter badge inside the toggle (.rui-sidebar-abtn .rui-drawer-badge). **Only applied** when “Custom section toggle styles” is enabled.
theme_xy/colordrawersidebarabtnbadgetextSection toggle badge text (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawersidebarabtnbadgetextdarkmodeSection toggle label text color
Main text colour on the “My courses / Categories” toggle (.rui-sidebar-abtn color). **Only applied** when “Custom section toggle styles” is enabled; otherwise the row uses the navigation text colour.
theme_xy/colordrawersidebarabtntextSection toggle label text (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawersidebarabtntextdarkmodeSection toggle hover background
Background colour when hovering the toggle (.rui-sidebar-abtn:hover). **Only applied** when “Custom section toggle styles” is enabled.
theme_xy/colordrawersidebarabtnbghSection toggle hover background (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawersidebarabtnbghdarkmodeSection toggle hover text color
Text colour when hovering the toggle. **Only applied** when “Custom section toggle styles” is enabled.
theme_xy/colordrawersidebarabtntexthSection toggle hover text (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawersidebarabtntexthdarkmodeSection toggle hover icon color
Icon colour when hovering the toggle (.rui-sidebar-abtn:hover .rui-nav-icon). **Only applied** when “Custom section toggle styles” is enabled.
theme_xy/colordrawersidebarabtniconhSection toggle hover icon (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawersidebarabtniconhdarkmodeMy courses filter color
Text and icon colour for the “My courses” filter strip (.rui-sidebar-filter). Also used for switch **labels** and the **unchecked** state of .form-switch .form-check-input, including the thumb drawn via background-image / –bs-form-switch-bg (in-progress and course filters).
theme_xy/colordrawersidebarfilterMy courses filter colour (dark mode)
Same role as “My courses filter color” when the interface is in dark mode. Live preview updates the switch thumb when the admin preview is dark.
My courses list: link text colour
Text colour on each course row in the scroll area (`.rui-course-wrapper`, `#myCoursesList .rui-nav-item-link`). When empty, inherits **Navigation items → Sidebar Button Text**.
theme_xy/colordrawermycoursestextMy courses list: link text (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursestextdarkmodeMy courses list: course icon colour
Stroke/fill inherits via `currentColor` on SVG icons in each course row. When empty, inherits **Navigation items → Sidebar Button Icon**.
theme_xy/colordrawermycoursesiconMy courses list: course icon (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursesicondarkmodeMy courses list: row hover background
Background when hovering or focusing a course row. When empty, inherits **Navigation items** hover background.
theme_xy/colordrawermycoursesitembghoverMy courses list: row hover background (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursesitembghoverdarkmodeMy courses list: row hover text
When empty, inherits **Navigation items** hover text colour.
theme_xy/colordrawermycoursesitemtexthoverMy courses list: row hover text (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursesitemtexthoverdarkmodeMy courses list: row hover icon
When empty, inherits **Navigation items** icon hover colour.
theme_xy/colordrawermycoursesitemiconhoverMy courses list: row hover icon (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursesitemiconhoverdarkmodeMy courses list: progress ring track
Stroke colour of the circular progress **background** ring (`.circle-bg`) only inside `.rui-course-wrapper`.
theme_xy/colordrawermycoursesprogtrackMy courses list: progress ring track (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursesprogtrackdarkmodeMy courses list: progress ring fill
Stroke colour of the in-progress arc (`.circular-chart-color .circle`) in the course list.
theme_xy/colordrawermycoursesprogbarMy courses list: progress ring fill (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursesprogbardarkmodeMy courses list: completed progress ring
Stroke colour when progress is 100% (`.circular-chart-100 .circle`).
theme_xy/colordrawermycoursesprogcompleteMy courses list: completed progress ring (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursesprogcompletedarkmodeMy courses list: progress percentage text
Colour of the numeric label next to the mini chart (`.rui-mycourse-progress-label`).
theme_xy/colordrawermycoursesproglabelMy courses list: progress percentage text (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawermycoursesproglabeldarkmodeSidebar Button Icon
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtniconSidebar navigation row icon (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtnicondarkmodeSidebar Button Icon (Hover)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtniconhSidebar navigation row icon hover (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtniconhdarkmodeSidebar Button Text
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtntextSidebar navigation row text (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtntextdarkmodeSidebar Button Text (Hover)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtntexthSidebar navigation row text hover (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtntexthdarkmodeSidebar Button Background (Hover/Active)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtnbghSidebar navigation row background hover (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtnbghdarkmodeSidebar Button Text (Light)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtntextlightSidebar navigation row text light (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawernavbtntextlightdarkmodeScrollbar
Colour of the thin scrollbar track inside the drawer.
Sidebar scrollbar track color
Background colour of the scrollbar **track** inside the sidebar (.nav-drawer-container, .drawercontent) and the mini “My courses / Categories” list (.rui-course-wrapper). Works cross-browser via scrollbar-color (Firefox / modern Chromium) and ::-webkit-scrollbar-track (Chrome, Edge, Safari).
theme_xy/colordrawerscrollbarSidebar scrollbar track (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawerscrollbardarkmodeSidebar scrollbar thumb color
Colour of the draggable scrollbar **thumb** inside the sidebar and the “My courses / Categories” list. Falls back to the theme default when empty.
theme_xy/colordrawerscrollbarthumbSidebar scrollbar thumb (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawerscrollbarthumbdarkmodeLinks
Default and hover colours for text links inside the sidebar.
Sidebar Link Color
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawerlinkSidebar link (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawerlinkdarkmodeSidebar Link Color (Hover)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawerlinkhSidebar link hover (dark mode)
Enter a short value such as a label, link, or colour code.
theme_xy/colordrawerlinkhdarkmode