[PLA-1753] dark mode

[zlayine]

PR Type

enhancement

---

Description

• Implemented dark mode support across various components and pages.
• Updated UI elements to dynamically switch between light and dark themes based on user settings.
• Enhanced visibility and consistency of text and background colors across different themes.

---

Changes walkthrough 📝

Relevant files

Enhancement

16 files DetailsFuelTankSlideover.vue Implement Dark Mode Support in Fuel Tank Details Slideover resources/js/components/slideovers/fueltank/DetailsFuelTankSlideover.vue Updated UI to support dark mode by adding conditional classes for text and background colors. Adjusted text and background colors for various elements to toggle between light and dark themes. Modified class bindings to support dynamic changes based on the theme. +87/-40  CreateCollection.vue Add Dark Mode Compatibility to Create Collection Page        resources/js/components/pages/create/CreateCollection.vue Enhanced UI to support dark mode in the Create Collection page. Updated text and background colors to adapt to light and dark themes. Added dark mode compatible classes for buttons and form elements. +67/-24  DispatchRuleForm.vue Update Dispatch Rule Form for Dark Mode Support                    resources/js/components/fueltank/DispatchRuleForm.vue Updated Dispatch Rule Form to support dark mode. Modified text and background colors for better visibility in both light and dark themes. Adjusted UI elements to dynamically switch styles based on the theme. +51/-22  CreateToken.vue Enable Dark Mode on Create Token Page                                        resources/js/components/pages/create/CreateToken.vue Enabled dark mode support for the Create Token page. Updated UI elements to toggle styles between light and dark themes. Enhanced form inputs and labels to adapt to the selected theme. +57/-21  DetailsTransactionSlideover.vue Implement Dark Mode in Transaction Details Slideover          resources/js/components/slideovers/common/DetailsTransactionSlideover.vue Implemented dark mode in Transaction Details Slideover. Adjusted UI components to switch between light and dark themes dynamically. Updated color schemes for text and dividers to match the theme. +81/-28  DetailsListingSlideover.vue Add Dark Mode Support to Listing Details Slideover              resources/js/components/slideovers/marketplace/DetailsListingSlideover.vue Added dark mode support for Listing Details Slideover. Updated background and text colors to adapt to both light and dark themes. Enhanced visibility and consistency of UI elements across themes. +70/-33  DetailsTokenSlideover.vue Enable Dark Mode for Token Details Slideover                          resources/js/components/slideovers/token/DetailsTokenSlideover.vue Enabled dark mode for Token Details Slideover. Updated UI elements to toggle between light and dark themes based on user preference. Enhanced text and background color schemes for better readability in both themes. +62/-36  BeamsList.vue Update Beams List for Dark Mode Support                                    resources/js/components/beam/BeamsList.vue Updated Beams List to support dark mode. Adjusted background and text colors to adapt to light and dark themes. Enhanced UI consistency across different themes. +42/-19  Transactions.vue Enhance Transactions Page for Dark Mode Support                    resources/js/components/pages/Transactions.vue Enhanced Transactions page to support dark mode. Updated UI elements to dynamically switch between light and dark themes. Improved visibility and readability of text and background elements in both themes. +51/-19  ListingsList.vue Update Listings List for Dark Mode Support                              resources/js/components/marketplace/ListingsList.vue Updated Listings List to support dark mode. Modified UI components to adapt to both light and dark themes dynamically. Enhanced text and background colors for better visibility in both themes. +62/-19  SideNavbar.vue Enhance Side Navbar for Dark Mode Support                                resources/js/components/SideNavbar.vue Enhanced Side Navbar to support dark mode. Updated UI elements to toggle between light and dark themes based on user settings. Improved visibility and consistency of UI components across themes. +20/-15  DetailsCollectionSlideover.vue Implement Dark Mode in Collection Details Slideover            resources/js/components/slideovers/collection/DetailsCollectionSlideover.vue Implemented dark mode support in Collection Details Slideover. Updated UI components to adapt to both light and dark themes dynamically. Enhanced text and background colors for better readability in both themes. +46/-24  FuelTanks.vue Update Fuel Tanks Page for Dark Mode Support                          resources/js/components/pages/FuelTanks.vue Updated Fuel Tanks page to support dark mode. Modified UI elements to switch between light and dark themes based on user preference. Enhanced visibility and consistency of text and background colors in both themes. +48/-15  Handbook.vue Enhance Handbook Component for Dark Mode Support                  resources/js/components/Handbook.vue Enhanced Handbook component to support dark mode. Updated UI elements to dynamically adapt to light and dark themes. Improved readability and visibility of text and background elements in both themes. +28/-15  DetailsBeamSlideover.vue Add Dark Mode Support to Beam Details Slideover                    resources/js/components/slideovers/beam/DetailsBeamSlideover.vue Added dark mode support for Beam Details Slideover. Updated UI components to toggle between light and dark themes based on user settings. Enhanced visibility and consistency of text and background colors across themes. +40/-19  Collections.vue Update Collections Page for Dark Mode Support                        resources/js/components/pages/Collections.vue Updated Collections page to support dark mode. Modified UI elements to adapt to both light and dark themes dynamically. Enhanced text and background colors for better visibility in both themes. +42/-14

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Description updated to latest commit (ff63a95)

[github-actions]

PR Review 🔍

⏱️ Estimated effort to review [1-5]	3, because the PR involves a significant number of files (16 files detailed, with more truncated) and changes related to implementing a dark mode feature across various components. The changes are mostly consistent, involving conditional class additions for dark mode, but the volume and spread across multiple components increase the complexity.
🧪 Relevant tests	No
⚡ Possible issues	No
🔒 Security concerns	No

Code feedback:

---

relevant file	resources/js/components/slideovers/fueltank/DetailsFuelTankSlideover.vue
suggestion	Consider using a computed property or a method to handle the repetitive conditional class bindings for dark mode. This will reduce redundancy and make the code cleaner. For example, you can create a method themeClass that returns the appropriate class based on the current theme. [important]
relevant line	class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"

---

relevant file	resources/js/components/pages/create/CreateCollection.vue
suggestion	It's recommended to handle repetitive logic for theme-related class bindings more efficiently. Consider using Vue.js directives or a global mixin that automatically binds these classes based on the current theme. This approach will reduce the need for verbose conditional class checks throughout your templates. [important]
relevant line	class="bg-light-surface-primary dark:bg-dark-surface-primary p-4 md:p-6 shadow rounded-lg"

---

relevant file	resources/js/components/fueltank/DispatchRuleForm.vue
suggestion	For elements that include repetitive theme-based class bindings, such as text-light-content-strong dark:text-dark-content-strong, consider creating CSS utility classes that encapsulate these conditional classes. This will simplify your Vue templates and make the styling more manageable. [medium]
relevant line	class="text-base font-semibold leading-6 text-light-content-strong dark:text-dark-content-strong"

---

relevant file	resources/js/components/pages/create/CreateToken.vue
suggestion	To further enhance maintainability, consider using a CSS pre-processor like SASS or LESS, which can utilize variables and mixins for theme colors. This way, you can define your color themes in one place and reuse them throughout your stylesheets, reducing redundancy and potential errors. [medium]
relevant line	class="bg-light-surface-primary dark:bg-dark-surface-primary p-4 md:p-6 shadow rounded-lg sm:p-6 transition-all"

---

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Accessibility	Add an aria-label to the 'Read more' button for better accessibility To improve accessibility and user interaction, consider adding an aria-label attribute to the element that triggers the 'Read more' action, providing a clear description of the action. resources/js/components/ReadMoreButton.vue [4] <span :dusk="`btn__readmore-${dusk}`" class="underline text-light-content dark:text-dark-content cursor-pointer text-xs" @click="sendReadmoreEvent" + aria-label="Read more about this topic" > Suggestion importance[1-10]: 10 Why: Adding an aria-label attribute enhances accessibility by providing a clear description of the action, which is crucial for users relying on screen readers.	10
	Enhance accessibility by adding aria-label to buttons For better accessibility and user experience, consider adding an aria-label attribute to the button element to provide a clear description of the button's action, especially for screen readers. resources/js/components/SnackbarGroup.vue [54-56] -<button type="button" @click="close(notification.id, true)" +<button type="button" aria-label="Close notification" @click="close(notification.id, true)" Suggestion importance[1-10]: 8 Why: Adding an aria-label is a significant improvement for accessibility, making the interface more usable for people using screen readers.	8
	Enhance accessibility by adding explicit roles to interactive elements For better accessibility, consider adding role="button" to the ComboboxButton component to explicitly indicate its interactive nature. resources/js/components/FormSelect.vue [25] -<ComboboxButton ref="comboButtonRef" class="absolute inset-y-0 right-0 flex items-center pr-2"> +<ComboboxButton ref="comboButtonRef" class="absolute inset-y-0 right-0 flex items-center pr-2" role="button"> Suggestion importance[1-10]: 6 Why: Adding role="button" to the ComboboxButton component is a good practice for accessibility, making it clear that the element is interactive.	6
	Check contrast ratios for border colors to ensure accessibility To ensure that the border color changes are visible in both themes, verify that the contrast ratios meet accessibility standards. This can be checked using tools like WebAIM's Contrast Checker. resources/js/components/SnackbarGroup.vue [51] +class="flex border-l border-light-stroke dark:border-dark-stroke" - Suggestion importance[1-10]: 6 Why: This suggestion is relevant as it addresses accessibility concerns regarding contrast ratios, which is important for users with visual impairments. However, it lacks specific guidance on how to adjust the code if the current contrast is found inadequate.	6
	Improve accessibility and consistency by specifying button types To ensure consistent behavior across browsers and improve accessibility, add type="button" to the Tooltip icon button within the checkbox options. resources/js/components/MultiCheckbox.vue [36] -<Tooltip class="!flex items-center" v-if="option.tooltip" :text="option.tooltip"> +<Tooltip class="!flex items-center" v-if="option.tooltip" :text="option.tooltip" type="button"> Suggestion importance[1-10]: 5 Why: Adding type="button" to the Tooltip within the checkbox options is a minor but correct improvement for accessibility and consistency, although it's not a critical change.	5
Enhancement	Improve the robustness of theme application by checking for explicit 'light' theme Consider using a more robust condition to check the theme before applying the class to the document element. This will ensure that the theme is only applied if it is explicitly set to 'dark' or 'light', avoiding potential issues with undefined or null values. resources/js/components/App.vue [35-39] if (appStore.theme === 'dark') { document.documentElement.classList.add('dark'); -} else { +} else if (appStore.theme === 'light') { document.documentElement.classList.remove('dark'); } Suggestion importance[1-10]: 8 Why: This suggestion correctly identifies a potential issue with handling undefined or null theme values and provides a more robust solution.	8
	Enhance the visual transition between light and dark modes Add a transition effect for the background color change to enhance the visual experience when switching between light and dark modes. resources/js/components/CardToModal.vue [2] -<div class="bg-light-surface-primary dark:bg-dark-surface-primary shadow rounded-lg"> +<div class="bg-light-surface-primary dark:bg-dark-surface-primary shadow rounded-lg transition-colors duration-300"> Suggestion importance[1-10]: 5 Why: Adding a transition effect can enhance user experience by providing smoother visual feedback. This is a minor enhancement but improves the overall aesthetics.	5
Best practice	Add cleanup for the watcher on 'appStore.theme' to prevent potential memory leaks To avoid potential memory leaks or unexpected behavior, ensure that the watcher for 'appStore.theme' is properly cleaned up when the component is destroyed. resources/js/components/App.vue [57-61] -watch( +const unwatchTheme = watch( () => appStore.theme, () => { initialTheme(); } ); +onUnmounted(() => { + unwatchTheme(); +}); Suggestion importance[1-10]: 7 Why: Proper cleanup of watchers is a best practice in Vue.js to prevent memory leaks, especially in large applications. This suggestion correctly addresses this issue.	7
Maintainability	Simplify class bindings using computed properties Consider using a computed property for class bindings to simplify the template and enhance maintainability. This is especially useful for complex class bindings like those in the ComboboxInput component. resources/js/components/FormSelect.vue [21] -class="w-full py-2.5 pl-3 pr-10 text-sm leading-5 border-0 text-light-content-strong dark:text-dark-content-strong ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong placeholder:text-light-content placeholder:dark:text-dark-content focus:ring-2 focus:ring-inset focus:ring-primary rounded-md transition-all disabled:bg-dark-surface-background/10 disabled:dark:bg-light-surface-background/10 bg-light-surface-background dark:bg-dark-surface-background" +:class="comboboxInputClasses" Suggestion importance[1-10]: 7 Why: The suggestion to use computed properties for complex class bindings is valid and improves maintainability. It directly addresses the complexity in the ComboboxInput component's class attribute.	7
	Use computed properties to manage complex class bindings To improve the readability and maintainability of the class bindings, consider using a computed property or a method to generate the class string dynamically based on conditions. resources/js/components/Handbook.vue [29] -class="mx-auto max-w-3xl transform divide-y divide-light-stroke dark:divide-dark-stroke overflow-hidden rounded-xl bg-light-surface-primary dark:bg-dark-surface-primary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all" +:class="dialogPanelClasses" Suggestion importance[1-10]: 7 Why: Using a computed property for dynamic class bindings in the DialogPanel component is a good suggestion for enhancing readability and maintainability.	7
	Extract complex class bindings into a computed property for better code readability For better readability and maintenance, consider extracting the complex class bindings into a computed property or method. This will make the template cleaner and the logic easier to manage. resources/js/components/RichTextEditor.vue [98-105] -:class="[ - 'bg-light-surface-background', - 'dark:bg-dark-surface-background', - 'max-w-none', - 'prose', - 'dark:prose-invert', - 'pl-2', -]" +:class="previewClassBindings" Suggestion importance[1-10]: 7 Why: Extracting complex class bindings into a computed property would indeed improve readability and maintainability of the code, making it easier to manage and understand.	7
	Use a computed property for class bindings to simplify the template Simplify the class binding by using a computed property that returns the appropriate class based on the button type. This will make the template cleaner and easier to maintain. resources/js/components/Btn.vue [6-13] -:class="{ - 'text-white bg-primary hover:bg-primary-light': primary, - 'text-white bg-red-500 hover:bg-red-600': error, - 'text-light-content-strong dark:text-dark-content-strong bg-light-surface-primary dark:bg-dark-surface-primary hover:bg-light-surface-background hover:dark:bg-dark-surface-background !bg-opacity-50 ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong': - basic && !error && !primary, - 'px-5': loading, - '!bg-gray-400': disabled, -}" +:class="buttonClass" Suggestion importance[1-10]: 6 Why: Using a computed property can indeed simplify the template and improve maintainability. This suggestion is relevant and improves code readability.	6
	Standardize the naming of CSS classes for better consistency and maintainability Consider using a consistent naming convention for CSS classes related to color themes. The class bg-light-surface-primary could be renamed to bg-light-surface to match the dark:bg-dark-surface pattern, enhancing readability and maintainability. resources/js/components/SnackbarGroup.vue [14] -class="pointer-events-auto flex w-full max-w-md rounded-lg bg-light-surface-primary dark:bg-dark-surface-primary shadow-lg ring-1 ring-black ring-opacity-5" +class="pointer-events-auto flex w-full max-w-md rounded-lg bg-light-surface dark:bg-dark-surface shadow-lg ring-1 ring-black ring-opacity-5" Suggestion importance[1-10]: 5 Why: The suggestion to standardize CSS class names for consistency is valid, but the suggested class names in 'improved_code' do not match the existing dark theme class name, which is dark:bg-dark-surface-primary, not dark:bg-dark-surface.	5
Possible issue	Verify the existence of newly introduced text color classes in the CSS Ensure that the text color classes text-light-content-strong and text-dark-content-strong are defined in your CSS, as these are critical for maintaining legibility in both light and dark modes. resources/js/components/SnackbarGroup.vue [37] +class="text-sm font-medium text-light-content-strong dark:text-dark-content-strong" - Suggestion importance[1-10]: 7 Why: This is a good suggestion as it ensures that the new CSS classes are defined and functional, which is crucial for maintaining a consistent user experience across themes.	7