feat: dark mode toggle, settings icon-only in toolbar, full-width tab bar, centered action row, remove "Experimental" from Inline editor

[Copilot]

• Remove toolbar box/border artifacts
• Expand dark mode CSS to item cards, modals, etc.
• Fix website background in dark mode (html.dark background added to CSS so full page turns dark)
• Fix template gallery dark mode:
  • Added dark:bg-gray-800 dark:border-gray-700 to panel container in template-gallery.html
  • Added dark Tailwind classes to heading, description text, status output, and back button
  • Added comprehensive CSS for all slot components: template-slot-index, template-slot-title, template-slot-subtitle, template-slot-badge, template-slot-empty, template-slot-action-add

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feat: UI/UX improvements – dark mode toggle, settings icon, tab bar, action row, editor name</issue_title>
<issue_description>### Overview
This issue tracks several quality-of-life improvements to the CookieCut UI/UX:

1. Add dark mode toggle:

   • Implement a dark mode theme for the tool, with a toggle switch. Consider where makes sense in the UI (suggested: top right bar).
   • Use Tailwind's dark mode utilities (see CDN docs). Ensure all pages and dialogs/theme areas are covered.

2. Settings button to icon-only, top row:

   • Move the settings button to the top toolbar row with other global controls.
   • Remove the text label from the settings button (icon-only per project conventions).

3. Tab bar: full-width, no bounding box:

   • Remove the background/bounding box behind the tab bar.
   • Make the tab bar span the entire screen width, rendered below the top toolbar row.

4. Center bottom button row:

   • Center-align the row containing badges, menu, and classic UI tool actions at the bottom.
   • Confirm layout is visually balanced across window sizes.

5. Rename InLine editor:

   • Remove "Experimental" from the InLine editor's label/menu entry throughout the UI.
   • Update references in UI and any user-facing help or tooltips.

---

Acceptance Criteria

• Dark mode can be toggled on/off and applies consistently across the app.
• Settings button is top-right, icon-only, with no text.
• Tab bar is visually separated only by layout (no box) and full width.
• Action row/buttons at the bottom are centered horizontally.
• InLine editor and related copy no longer display "Experimental".

Related files: Likely involves app.js, js/dom.js, and affected partials/templates in partials/.

/cc UI maintainers for review.
</issue_description>

<agent_instructions>Please work on the feature described in the issue description.
When you are complete with your development, commit and then check for checks to pass, if they do not, check review comments for feedback needed to solve any issues.
Once you are done with feedback, please mark the PR as ready for review via the CLI.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes feat: UI/UX improvements – dark mode toggle, settings icon, tab bar, action row, editor name #60

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

[deepsource-io]

DeepSource Code Review

We reviewed changes in 3fc63a7...a5925d8 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene   Coverage

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
Shell		Mar 23, 2026 6:12p.m.	Review ↗
JavaScript		Mar 23, 2026 6:12p.m.	Review ↗
Secrets		Mar 23, 2026 6:12p.m.	Review ↗
Test coverage		Mar 23, 2026 7:53p.m.	Review ↗

Code Coverage Summary

Language	Line Coverage (Overall)
Aggregate	100%
Javascript	0%

➟ Additional coverage metrics may have been reported. See full coverage report ↗

[github-actions]

Visit the preview URL for this PR (updated for commit a5925d8):

https://slf-cookiecutter--pr63-copilot-add-dark-mod-rnr4ptvv.web.app

_{(expires Tue, 24 Mar 2026 18:12:39 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: f3acc43c256baca92da4092df239688a133cbab3}

[kiyarose]

• The Dark mode toggle does not work on toggling the theme on most elements.
• The box behind the buttons should be removed and the line artifacts removed (pictured)

[Copilot]

• The Dark mode toggle does not work on toggling the theme on most elements.
• The box behind the buttons should be removed and the line artifacts removed (pictured)
  ...

Fixed in a47781d:

• Box/border artifacts – Removed bg-white, rounded-lg, shadow-lg from the builder panel, and removed the border-b/border-t lines from the toolbar wrapper and action row so there is no box or divider lines.
• Dark mode coverage – Replaced the partial dark mode CSS with a comprehensive set of .dark selectors covering: body background, all modal inner boxes (toast, text, icon key, settings, print, clear, close-tab), all modal labels/text/inputs, JS-generated content item cards (#content-inputs > div), recipe preview, template gallery, selection toolbar, tab bar, and inline preview.

[sonarqubecloud]

Quality Gate failed

Failed conditions
2 Security Hotspots

See analysis details on SonarQube Cloud