feat(sidebar): add dark theme colors [EE-3666] (#7414)

2025-08-02 20:35:25 +02:00 · 2022-08-10 07:12:20 +03:00 · 2022-08-10 07:12:20 +03:00 · c3ce4d8b53
commit c3ce4d8b53
parent fb3a31a4fd
83 changed files with 1738 additions and 1200 deletions
--- a/app/react/components/BoxSelector/BoxOption.tsx
+++ b/app/react/components/BoxSelector/BoxOption.tsx
@ -0,0 +1,65 @@
+import clsx from 'clsx';
+import { PropsWithChildren } from 'react';
+import ReactTooltip from 'react-tooltip';
+
+import './BoxSelectorItem.css';
+
+import { BoxSelectorOption } from './types';
+
+interface Props<T extends number | string> {
+  radioName: string;
+  option: BoxSelectorOption<T>;
+  onChange?(value: T): void;
+  selectedValue: T;
+  disabled?: boolean;
+  tooltip?: string;
+  className?: string;
+  type?: 'radio' | 'checkbox';
+}
+
+export function BoxOption<T extends number | string>({
+  radioName,
+  option,
+  onChange = () => {},
+  selectedValue,
+  disabled,
+  tooltip,
+  className,
+  type = 'radio',
+  children,
+}: PropsWithChildren<Props<T>>) {
+  const tooltipId = `box-option-${radioName}-${option.id}`;
+  return (
+    <div
+      className={clsx('box-selector-item', className)}
+      data-tip
+      data-for={tooltipId}
+      tooltip-append-to-body="true"
+      tooltip-placement="bottom"
+      tooltip-class="portainer-tooltip"
+    >
+      <input
+        type={type}
+        name={radioName}
+        id={option.id}
+        checked={option.value === selectedValue}
+        value={option.value}
+        disabled={disabled}
+        onChange={() => onChange(option.value)}
+      />
+
+      <label htmlFor={option.id} data-cy={`${radioName}_${option.value}`}>
+        {children}
+      </label>
+      {tooltip && (
+        <ReactTooltip
+          place="bottom"
+          className="portainer-tooltip"
+          id={tooltipId}
+        >
+          {tooltip}
+        </ReactTooltip>
+      )}
+    </div>
+  );
+}
--- a/app/react/components/BoxSelector/BoxSelector.css
+++ b/app/react/components/BoxSelector/BoxSelector.css
@ -13,26 +13,6 @@
  }
 }

-.boxselector_wrapper input[type='radio']:checked + label,
-.box-selector-item input[type='radio']:checked + label {
-  background-color: var(--bg-blocklist-hover-color) !important;
-  color: black !important;
-  border-radius: 8px;
-  border-color: var(--ui-blue-7);
-  padding: 15px;
-  box-shadow: none;
-}
-
-.boxselector_wrapper input[type='radio']:not(:disabled) + label,
-.box-selector-item input[type='radio']:not(:disabled) + label {
-  background: var(--ui-gray-2);
-  color: var(--black-color) !important;
-  border-radius: 8px;
-  border-color: var(--ui-gray-5);
-  padding: 15px;
-  box-shadow: none;
-}
-
 .row.header {
  background-color: var(--bg-body-color) !important;
  margin-bottom: 5px !important;
--- a/app/react/components/BoxSelector/BoxSelectorItem.css
+++ b/app/react/components/BoxSelector/BoxSelectorItem.css
@ -1,6 +1,5 @@
 .boxselector_wrapper > div,
 .box-selector-item {
-  --selected-item-color: var(--ui-blue-6);
  flex: 1;
 }

@ -22,38 +21,40 @@
  display: none;
 }

-.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
-.box-selector-item input[type='radio']:not(:disabled) ~ label {
-  cursor: pointer;
-  background-color: var(--bg-boxselector-wrapper-disabled-color);
+.boxselector_wrapper label,
+.box-selector-item label {
+  @apply border border-solid;
+  @apply bg-gray-2 border-gray-5 text-black;
+  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
+
+  font-weight: normal;
+  font-size: 12px;
+  display: block;
+  border-radius: 8px;
+  padding: 15px;
+  text-align: left;
+  box-shadow: var(--shadow-boxselector-color);
+  position: relative;
+
  text-align: left;
  height: 100%;
 }

-.boxselector_wrapper input[type='radio']:not(:disabled):hover ~ label:hover,
-.box-selector-item input[type='radio']:not(:disabled):hover ~ label:hover {
+/* not disabled */
+.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
+.box-selector-item input[type='radio']:not(:disabled) ~ label {
+  box-shadow: none;
  cursor: pointer;
 }

-.boxselector_wrapper label,
-.box-selector-item label {
-  font-weight: normal;
-  font-size: 12px;
-  display: block;
-  background: var(--bg-boxselector-color);
-  border: 1px solid var(--border-boxselector-color);
-  border-radius: 2px;
-  padding: 10px 10px 0 10px;
-  text-align: left;
-  box-shadow: var(--shadow-boxselector-color);
-  position: relative;
-}
-
+/* disabled */
 .box-selector-item input:disabled + label,
 .boxselector_wrapper label.boxselector_disabled {
-  background: var(--bg-boxselector-disabled-color) !important;
-  border-color: #787878;
-  color: #787878;
+  @apply !bg-white;
+  @apply th-dark:!bg-gray-7;
+  @apply th-highcontrast:!bg-black;
+  filter: opacity(0.3) grayscale(1);
+
  cursor: not-allowed;
  pointer-events: none;
 }
@ -63,30 +64,19 @@
  pointer-events: auto;
 }

+/* checked */
 .boxselector_wrapper input[type='radio']:checked + label,
 .box-selector-item input[type='radio']:checked + label {
-  color: white;
+  @apply bg-blue-3 border-blue-6;
+  @apply th-dark:bg-blue-10 th-dark:border-blue-7;
+
  background-image: url(../../../assets/ico/checked.svg);
  background-repeat: no-repeat;
  background-position: right 15px top 15px;
-  border-color: var(--selected-item-color);
-}

-.box-selector-item input[type='radio']:checked:disabled + label {
-  color: #787878;
-}
-
-.boxselector_wrapper input[type='radio']:checked + label .box_selector_mask_icon {
-  color: var(--selected-item-color);
-}
-
-:root[theme='highcontrast'] .box_selector_mask_icon,
-:root[theme='dark'] .box_selector_mask_icon {
-  color: var(--bg-boxselector-wrapper-disabled-color);
-}
-
-.box_selector_mask_icon {
-  color: var(--bg-boxselector-color);
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: none;
 }

@media only screen and (max-width: 700px) {
@ -95,48 +85,23 @@
  }
 }

-.box-selector-item.limited.business {
-  --selected-item-color: var(--BE-only);
-}
-
-.box-selector-item.limited.business label {
-  border-color: var(--BE-only);
-  border-width: 2px;
-}
-
-.box-selector-item .limited-icon {
-  position: absolute;
-  left: 1em;
-  top: calc(50% - 0.5em);
-  height: 1em;
-}
-
-@media (min-width: 992px) {
-  .box-selector-item .limited-icon {
-    left: 2em;
-  }
-}
-
-.box-selector-item.limited.business :checked + label {
-  background-color: initial;
-  color: initial;
+.box-selector-item.limited.business label,
+.box-selector-item.limited.business input[type='radio']:checked + label {
+  @apply border-warning-7 bg-warning-1 text-black;
+  @apply th-dark:bg-warning-3;
 }

 .boxselector_img_container {
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
-}

-.boxselector_img {
-  height: 48px;
-  width: 48px;
-  left: 5px;
+  line-height: 90px;
+  margin-bottom: 0;
 }

 .boxselector_icon,
 .boxselector_icon img {
-  color: var(--ui-blue-8);
  font-size: 90px;
  display: block;
 }
@ -149,16 +114,6 @@
  padding-left: 20px;
 }

-.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
-.box-selector-item input[type='radio']:not(:disabled) ~ label {
-  background-color: var(--ui-gray-2);
-}
-
-.boxselector_img_container {
-  line-height: 90px;
-  margin-bottom: 0;
-}
-
 .box-selector-item p {
  margin-bottom: 0;
 }
--- a/app/react/components/BoxSelector/BoxSelectorItem.tsx
+++ b/app/react/components/BoxSelector/BoxSelectorItem.tsx
@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import ReactTooltip from 'react-tooltip';

 import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
 import { Icon } from '@/react/components/Icon';
@ -7,6 +6,8 @@ import { Icon } from '@/react/components/Icon';
 import './BoxSelectorItem.css';

 import { BoxSelectorOption } from './types';
+import { LimitedToBeIndicator } from './LimitedToBeIndicator';
+import { BoxOption } from './BoxOption';

 interface Props<T extends number | string> {
  radioName: string;
@ -27,53 +28,38 @@ export function BoxSelectorItem<T extends number | string>({
 }: Props<T>) {
  const limitedToBE = isLimitedToBE(option.feature);

-  const tooltipId = `box-selector-item-${radioName}-${option.id}`;
+  const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
  return (
-    <div
-      className={clsx('box-selector-item', {
+    <BoxOption
+      className={clsx({
        business: limitedToBE,
        limited: limitedToBE,
      })}
-      data-tip
-      data-for={tooltipId}
-      tooltip-append-to-body="true"
-      tooltip-placement="bottom"
-      tooltip-class="portainer-tooltip"
+      radioName={radioName}
+      option={option}
+      selectedValue={selectedValue}
+      disabled={disabled}
+      onChange={(value) => onChange(value, limitedToBE)}
+      tooltip={tooltip}
    >
-      <input
-        type="radio"
-        name={radioName}
-        id={option.id}
-        checked={option.value === selectedValue}
-        value={option.value}
-        disabled={disabled}
-        onChange={() => onChange(option.value, limitedToBE)}
-      />
-
-      <label htmlFor={option.id} data-cy={`${radioName}_${option.value}`}>
-        {limitedToBE && <i className="fas fa-briefcase limited-icon" />}
-        <div className="boxselector_img_container">
-          {!!option.icon && (
-            <Icon
-              icon={option.icon}
-              feather={option.featherIcon}
-              className="boxselector_icon space-right"
-            />
-          )}
+      <>
+        {limitedToBE && (
+          <LimitedToBeIndicator tooltipId={beIndicatorTooltipId} />
+        )}
+        <div className={clsx({ 'opacity-30': limitedToBE })}>
+          <div className="boxselector_img_container">
+            {!!option.icon && (
+              <Icon
+                icon={option.icon}
+                feather={option.featherIcon}
+                className="boxselector_icon space-right"
+              />
+            )}
+          </div>
+          <div className="boxselector_header">{option.label}</div>
+          <p className="box-selector-item-description">{option.description}</p>
        </div>
-        <div className="boxselector_header">{option.label}</div>
-
-        <p className="box-selector-item-description">{option.description}</p>
-      </label>
-      {tooltip && (
-        <ReactTooltip
-          place="bottom"
-          className="portainer-tooltip"
-          id={tooltipId}
-        >
-          {tooltip}
-        </ReactTooltip>
-      )}
-    </div>
+      </>
+    </BoxOption>
  );
 }
--- a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
+++ b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
@ -0,0 +1,35 @@
+import { HelpCircle } from 'react-feather';
+import ReactTooltip from 'react-tooltip';
+
+interface Props {
+  tooltipId: string;
+}
+
+export function LimitedToBeIndicator({ tooltipId }: Props) {
+  return (
+    <>
+      <div className="absolute left-0 top-0 w-full">
+        <div className="mx-auto max-w-fit bg-warning-4 rounded-b-lg py-1 px-3 flex gap-1 text-sm items-center">
+          <span className="text-warning-9">Pro Feature</span>
+          <HelpCircle
+            className="feather !text-warning-7"
+            data-tip
+            data-for={tooltipId}
+            tooltip-append-to-body="true"
+            tooltip-placement="top"
+            tooltip-class="portainer-tooltip"
+          />
+        </div>
+      </div>
+      <ReactTooltip
+        className="portainer-tooltip"
+        id={tooltipId}
+        place="top"
+        delayHide={1000}
+      >
+        Business Edition feature. <br />
+        This feature is currently limited to Business Edition users only.
+      </ReactTooltip>
+    </>
+  );
+}
--- a/app/react/components/Icon.tsx
+++ b/app/react/components/Icon.tsx
@ -53,7 +53,12 @@ export function Icon({ icon, feather, className, mode, size }: Props) {

  if (icon.indexOf('svg-') === 0) {
    const svgIcon = icon.replace('svg-', '');
-    return <Svg icon={svgIcon as keyof typeof SvgIcons} className={classes} />;
+    return (
+      <Svg
+        icon={svgIcon as keyof typeof SvgIcons}
+        className={clsx(classes, '!flex')}
+      />
+    );
  }

  if (feather) {
@ -66,6 +71,10 @@ export function Icon({ icon, feather, className, mode, size }: Props) {
  }

  return (
-    <i className={clsx('fa', icon, classes)} aria-hidden="true" role="img" />
+    <i
+      className={clsx(icon.startsWith('fa-') ? `fa ${icon}` : icon, classes)}
+      aria-hidden="true"
+      role="img"
+    />
  );
 }
--- a/app/react/components/PageHeader/HeaderTitle.tsx
+++ b/app/react/components/PageHeader/HeaderTitle.tsx
@ -36,7 +36,15 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
          data-cy="userMenu-button"
          aria-label="User menu toggle"
        >
-          <User className="icon-nested-gray" />
+          <div
+            className={clsx(
+              'icon-badge text-lg !p-2 mr-1',
+              'bg-gray-4 text-gray-8',
+              'th-dark:bg-gray-warm-10 th-dark:text-gray-warm-7'
+            )}
+          >
+            <User className="feather" />
+          </div>
          {user && <span>{user.Username}</span>}
          <ChevronDown className={styles.arrowDown} />
        </MenuButton>
--- a/app/react/components/Widget/WidgetTitle.tsx
+++ b/app/react/components/Widget/WidgetTitle.tsx
@ -25,11 +25,13 @@ export function WidgetTitle({
    <div className="widget-header">
      <div className="row">
        <span className={clsx('pull-left', className)}>
-          <Icon
-            icon={icon}
-            feather={featherIcon}
-            className="icon-nested-blue icon-primary space-right"
-          />
+          <div className="widget-icon">
+            <Icon
+              icon={icon}
+              feather={featherIcon}
+              className="space-right feather"
+            />
+          </div>
          <span>{title}</span>
        </span>
        <span className={clsx('pull-right', className)}>{children}</span>
--- a/app/react/components/buttons/Button.stories.tsx
+++ b/app/react/components/buttons/Button.stories.tsx
@ -9,6 +9,63 @@ export default {
  title: 'Components/Buttons/Button',
 } as Meta;

+export function DifferentTheme() {
+  const colors = [
+    'primary',
+    'secondary',
+    'success',
+    'danger',
+    'dangerlight',
+    'warning',
+    'light',
+    'link',
+  ] as const;
+
+  const themes = ['light', 'dark', 'highcontrast'] as const;
+  const states = ['', 'disabled'] as const;
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Color/Theme</th>
+          {themes.map((theme) => (
+            <th key={theme} className="text-center">
+              {theme}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {colors.map((color) => (
+          <tr key={color}>
+            <td>{color}</td>
+            {themes.map((theme) => (
+              <td
+                key={theme}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                theme={theme}
+                className="p-5"
+                style={{ background: 'var(--bg-body-color)' }}
+              >
+                {states.map((state) => (
+                  <Button
+                    color={color}
+                    key={state}
+                    disabled={state === 'disabled'}
+                  >
+                    {state} {color} button
+                  </Button>
+                ))}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
 function Template({
  onClick,
  color,
--- a/app/react/components/buttons/Button.tsx
+++ b/app/react/components/buttons/Button.tsx
@ -58,14 +58,7 @@ export function Button({
      /* eslint-disable-next-line react/button-has-type */
      type={type}
      disabled={disabled}
-      className={clsx(
-        {
-          'opacity-60': disabled,
-        },
-        `btn btn-${color}`,
-        sizeClass(size),
-        className
-      )}
+      className={clsx(`btn btn-${color}`, sizeClass(size), className)}
      onClick={onClick}
      title={title}
      // eslint-disable-next-line react/jsx-props-no-spreading
--- a/app/react/components/datatables/TableTitle.tsx
+++ b/app/react/components/datatables/TableTitle.tsx
@ -19,11 +19,13 @@ export function TableTitle({
  return (
    <div className="toolBar">
      <div className="toolBarTitle">
-        <Icon
-          icon={icon}
-          feather={featherIcon}
-          className="icon-nested-blue icon-primary space-right"
-        />
+        <div className="widget-icon">
+          <Icon
+            icon={icon}
+            feather={featherIcon}
+            className="space-right feather"
+          />
+        </div>

        {label}
      </div>
--- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/KaaSIcon.module.css
+++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/KaaSIcon.module.css
@ -1,8 +0,0 @@
-.selected .mask-icon {
-  color: var(--selected-item-color);
-}
-
-.mask-icon {
-  color: var(--bg-boxselector-color);
-  transform: scale(1.2);
-}
--- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/KaaSIcon.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/KaaSIcon.tsx
@ -1,21 +0,0 @@
-import clsx from 'clsx';
-
-import styles from './KaaSIcon.module.css';
-
-export interface Props {
-  selected?: boolean;
-  className?: string;
-}
-
-export function KaaSIcon({ selected, className }: Props) {
-  return (
-    <span
-      className={clsx('fa-stack fa-1x', styles.root, className, {
-        [styles.selected]: selected,
-      })}
-    >
-      <i className="fas fa-cloud fa-stack-2x" />
-      <i className={clsx('fas fa-dharmachakra fa-stack-1x', styles.maskIcon)} />
-    </span>
-  );
-}
--- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/environment-types.ts
+++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/environment-types.ts
@ -1,34 +1,29 @@
 import { FeatureId } from '@/portainer/feature-flags/enums';

-import { KaaSIcon, Props as KaaSIconProps } from './KaaSIcon';
+import KaaSIcon from './kaas-icon.svg?c';

-interface WizardEnvironmentOption {
-  id: string;
-  title: string;
-  icon: string | { ({ selected, className }: KaaSIconProps): JSX.Element };
-  description: string;
-  featureId?: FeatureId;
-}
-
-export const environmentTypes: WizardEnvironmentOption[] = [
+export const environmentTypes = [
  {
    id: 'docker',
    title: 'Docker',
    icon: 'fab fa-docker',
    description:
      'Connect to Docker Standalone / Swarm via URL/IP, API or Socket',
+    featureId: undefined,
  },
  {
    id: 'kubernetes',
    title: 'Kubernetes',
    icon: 'fas fa-dharmachakra',
    description: 'Connect to a kubernetes environment via URL/IP',
+    featureId: undefined,
  },
  {
    id: 'aci',
    title: 'ACI',
    description: 'Connect to ACI environment via API',
    icon: 'fab fa-microsoft',
+    featureId: undefined,
  },
  {
    id: 'nomad',
@ -44,4 +39,4 @@ export const environmentTypes: WizardEnvironmentOption[] = [
    icon: KaaSIcon,
    featureId: FeatureId.KAAS_PROVISIONING,
  },
-];
+] as const;
--- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/kaas-icon.svg
+++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/kaas-icon.svg
@ -0,0 +1,5 @@
+<svg width="auto" height="auto" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M11 0C6.78119 0 3.3251 3.26563 3.02165 7.40697C1.24457 8.17346 0 9.9404 0 12C0 14.7614 2.23858 17 5 17H16.5C19.5376 17 22 14.5376 22 11.5C22 9.30813 20.7183 7.41775 18.8658 6.53369C18.1766 2.81531 14.9177 0 11 0ZM11.4999 4.40625C11.4999 4.13011 11.276 3.90625 10.9999 3.90625C10.7237 3.90625 10.4999 4.13011 10.4999 4.40625V4.70044C9.67915 4.79483 8.92827 5.11878 8.31307 5.60645L8.1049 5.39828C7.90964 5.20302 7.59306 5.20302 7.39779 5.39828C7.20253 5.59354 7.20253 5.91013 7.39779 6.10539L7.60597 6.31356C7.11829 6.92876 6.79434 7.67964 6.69995 8.50036H6.40576C6.12962 8.50036 5.90576 8.72422 5.90576 9.00036C5.90576 9.2765 6.12962 9.50036 6.40576 9.50036H6.69996C6.79437 10.3211 7.11834 11.0719 7.60602 11.6871L7.39779 11.8953C7.20253 12.0906 7.20253 12.4072 7.39779 12.6024C7.59306 12.7977 7.90964 12.7977 8.1049 12.6024L8.31314 12.3942C8.92832 12.8819 9.67918 13.2058 10.4999 13.3002V13.5945C10.4999 13.8706 10.7237 14.0945 10.9999 14.0945C11.276 14.0945 11.4999 13.8706 11.4999 13.5945V13.3002C12.3206 13.2057 13.0714 12.8818 13.6866 12.3942L13.8948 12.6024C14.0901 12.7977 14.4067 12.7977 14.602 12.6024C14.7972 12.4072 14.7972 12.0906 14.602 11.8953L14.3937 11.687C14.8813 11.0719 15.2053 10.321 15.2997 9.50036H15.594C15.8701 9.50036 16.094 9.2765 16.094 9.00036C16.094 8.72422 15.8701 8.50036 15.594 8.50036H15.2997C15.2053 7.67966 14.8814 6.92881 14.3937 6.31363L14.602 6.10539C14.7972 5.91013 14.7972 5.59354 14.602 5.39828C14.4067 5.20302 14.0901 5.20302 13.8948 5.39828L13.6866 5.60651C13.0714 5.11883 12.3206 4.79486 11.4999 4.70045V4.40625ZM10.4999 5.70917C9.95399 5.7914 9.45154 6.00621 9.02637 6.31975L10.4999 7.79326V5.70917ZM8.31926 7.02685C8.00572 7.45203 7.79091 7.95448 7.70868 8.50036H9.79277L8.31926 7.02685ZM7.7087 9.50036C7.79095 10.0462 8.00576 10.5487 8.31931 10.9738L9.79277 9.50036H7.7087ZM9.02643 11.6809C9.4516 11.9944 9.95402 12.2092 10.4999 12.2914V10.2075L9.02643 11.6809ZM11.4999 12.2914C12.0457 12.2092 12.5481 11.9944 12.9733 11.6809L11.4999 10.2075V12.2914ZM13.6804 10.9738C13.9939 10.5486 14.2087 10.0462 14.2909 9.50036H12.207L13.6804 10.9738ZM14.2909 8.50036C14.2087 7.95451 13.9939 7.45208 13.6804 7.02692L12.207 8.50036H14.2909ZM12.9733 6.3198L11.4999 7.79326V5.70919C12.0457 5.79144 12.5482 6.00625 12.9733 6.3198Z"
+    fill="currentColor" />
+</svg>
--- a/app/react/portainer/environments/wizard/components/Option/Option.module.css
+++ b/app/react/portainer/environments/wizard/components/Option/Option.module.css
@ -1,27 +1,32 @@
-.optionTile {
+.root {
+  --selected-item-color: var(--blue-2);
+  @apply border border-solid;
+  @apply bg-gray-2 border-gray-5 text-black;
+  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
+
+  display: block;
+  width: 200px;
+
+  min-height: 300px;
+
  border-radius: 5px;
  padding: 25px 20px;
  cursor: pointer;
-  box-shadow: 0 3px 10px -2px rgb(161 170 166 / 60%);
+  box-shadow: var(--shadow-boxselector-color);
+
  margin: 0;
  display: block;
-  width: 200px;
-  min-height: 300px;
-}
-
-.feature {
-  --selected-item-color: var(--blue-2);
-  border: 1px solid rgb(163, 163, 163);
 }

 .feature:hover {
-  box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
-  border: 1px solid var(--blue-2);
+  border-color: var(--blue-2);
  color: #337ab7;
+  box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
 }

 .teaser {
-  border: 2px solid var(--BE-only) !important;
+  @apply border-2;
+  border-color: var(--BE-only);
  color: var(--text-muted-color);
 }

@ -29,14 +34,10 @@
  box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
 }

-.active:hover {
-  color: #fff;
-}
-
 .active {
-  background: #337ab7;
-  color: #fff;
-  border: 1px solid var(--blue-2);
+  @apply bg-blue-3 border-blue-6;
+  @apply th-dark:bg-blue-10 th-dark:border-blue-7;
+
  box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
 }

@ -45,5 +46,5 @@
 }

 .icon-component {
-  font-size: 40px;
+  font-size: 80px;
 }
--- a/app/react/portainer/environments/wizard/components/Option/Option.tsx
+++ b/app/react/portainer/environments/wizard/components/Option/Option.tsx
@ -33,7 +33,7 @@ export function Option({
  return (
    <button
      className={clsx(
-        styles.optionTile,
+        styles.root,
        isLimited ? styles.teaser : styles.feature,
        'border-0',
        {
--- a/app/react/sidebar/EnvironmentSidebar.tsx
+++ b/app/react/sidebar/EnvironmentSidebar.tsx
@ -1,6 +1,7 @@
 import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 import { useEffect } from 'react';
 import { X, Slash } from 'react-feather';
+import clsx from 'clsx';

 import {
  PlatformType,
@ -31,7 +32,13 @@ export function EnvironmentSidebar() {
  }

  return (
-    <div className="rounded border border-dotted py-2 be:bg-gray-10 bg-blue-11 be:border-gray-8 border-blue-9">
+    <div
+      className={clsx(
+        'rounded border border-dotted py-2',
+        'bg-blue-11 be:bg-gray-10 th-dark:bg-gray-warm-11',
+        'border-blue-9 be:border-gray-8  th-dark:border-gray-warm-9'
+      )}
+    >
      {environment ? (
        <Content environment={environment} onClear={clearEnvironment} />
      ) : (
@ -138,7 +145,7 @@ function Title({ environment, onClear }: TitleProps) {
        title="Clear environment"
        type="button"
        onClick={onClear}
-        className="flex items-center justify-center be:bg-gray-9 bg-blue-10 hover:bg-blue-9 be:hover:bg-gray-7 transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white"
+        className="flex items-center justify-center be:bg-gray-9 bg-blue-10 th-dark:bg-gray-warm-10 hover:bg-blue-9 be:hover:bg-gray-7 th-dark:hover:bg-gray-8 transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white"
      >
        <X />
      </button>
--- a/app/react/sidebar/Header.tsx
+++ b/app/react/sidebar/Header.tsx
@ -31,7 +31,7 @@ export function Header({ logo }: Props) {
      <button
        type="button"
        onClick={() => toggle()}
-        className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm bg-blue-11 hover:bg-blue-10 be:bg-gray-10 be:hover:bg-gray-8 transition-colors duration-200  hover:text-white be:hover:text-white"
+        className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm bg-blue-11 hover:bg-blue-10 be:bg-gray-10 be:hover:bg-gray-8 th-dark:bg-gray-warm-11 hover:th-dark:bg-gray-warm-9 transition-colors duration-200  hover:text-white be:hover:text-white"
        aria-label="Toggle Sidebar"
        title="Toggle Sidebar"
      >
--- a/app/react/sidebar/Sidebar.tsx
+++ b/app/react/sidebar/Sidebar.tsx
@ -32,7 +32,7 @@ export function Sidebar() {
      <nav
        className={clsx(
          styles.root,
-          'p-5 flex flex-col be:bg-gray-11 bg-blue-10'
+          'p-5 flex flex-col be:bg-gray-11 bg-blue-10 th-dark:bg-gray-warm-10'
        )}
        aria-label="Main"
      >
--- a/app/react/sidebar/SidebarItem/Head.tsx
+++ b/app/react/sidebar/SidebarItem/Head.tsx
@ -34,7 +34,7 @@ export function Head({
  const { isOpen } = useSidebarState();
  const anchorProps = useSrefActive(
    to,
-    'bg-blue-8 be:bg-gray-8',
+    'bg-blue-8 be:bg-gray-8 th-dark:bg-gray-9',
    params,
    options,
    ignorePaths