final version

src/App.svelte

@@ -1356,7 +1356,7 @@
     <div class="flex content-center items-center justify-end">
       {#if showDropdown}
         <div class="px-15 py-1">
-          <select class="border border-indigo-500 border-4" bind:value={selectedWs} on:change={() => devicesDropdownChange()}>
+          <select class="border border-indigo-500 border-1" bind:value={selectedWs} on:change={() => devicesDropdownChange()}>
             {#each deviceList as device}
               <option value={device.ws}>
                 {device.name}

src/pages/Connection.svelte

@@ -84,7 +84,7 @@
       <Card title="Подключение к MQTT">
         <div class="crd-itm-psn">
           <div class="w-4/6">
-            <p class="wgt-dscr-stl text-rose-500 truncate">Состояние подключения</p>
+            <p class="wgt-dscr-stl text-gray-500 truncate">Состояние подключения</p>
           </div>
           <div class="flex justify-center w-3/6 align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
             {#if errorsJson.mqtt === "e5"}

src/pages/System.svelte

@@ -176,7 +176,7 @@
             <p class="pr-4 text-gray-500 font-bold text-sm truncate">Доступные версии</p>
           </div>
           <div class="flex justify-center w-1/3">
-            <select class="border border-indigo-500 border-4 text-center" bind:value={choosingVersion}>
+            <select class="border border-indigo-500 border-1 text-center" bind:value={choosingVersion}>
               {#if versionsList}
                 {#each Object.entries(versionsList) as [key, param]}
                   <option value={param}>
@@ -483,7 +483,7 @@
 
       <!--LOG-->
       <Card title="Лог">
-        <div class="overflow-y-auto" style={{ width: `$200px` }}>
+        <div class="h-96 overflow-y-auto">
           {#each coreMessages as message, i}
             <div class={message.msg.toString().includes("[E]") || message.msg.toString().includes("[!]") ? "text-xs text-red-500" : "text-xs text-black"}>{message.msg}</div>
           {/each}

src/widgets/Anydata.svelte

@@ -3,7 +3,7 @@
   export let value;
   value = value;
 
-  $: widget.status, blink(), colorSet();
+  $: widget.status, blink();
 
   let prevStatus;
 
@@ -49,8 +49,8 @@
   </div>
   <div class="flex justify-end w-1/3">
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-adt-stl text-{setedColor}-500 {green ? 'text-green-500' : ''}">{!widget.status ? "" : widget.status}</label>
+    <label class="wgt-adt-stl  {green ? 'text-green-500' : ''}">{!widget.status ? "" : widget.status}</label>
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="wgt-adt-stl text-{setedColor}-500 {green ? 'text-green-500' : ''}">&nbsp;{!widget.after ? "" : widget.after}</label>
+    <label class="wgt-adt-stl  {green ? 'text-green-500' : ''}">&nbsp;{!widget.after ? "" : widget.after}</label>
   </div>
 </div>

tailwind.config.js

@@ -21,7 +21,7 @@ module.exports = {
       //keyframes: true,
     },
   },
-  darkMode: false, // or 'media' or 'class'
+  //darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       colors: {
@@ -32,12 +32,6 @@ module.exports = {
         //emerald: colors.emerald,
       },
     },
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
-  theme: {
     fontSize: {
       xxs: ".5rem",
       xs: ".75rem",
@@ -54,4 +48,8 @@ module.exports = {
       "7xl": "5rem",
     },
   },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
 };