From f334ce72e22ccf766e0099583915ddd380aa4a85 Mon Sep 17 00:00:00 2001
From: sweetcola <838689894@qq.com>
Date: Mon, 23 Nov 2020 14:25:22 +0800
Subject: [PATCH] Simplify the interface

---
 src/components/LanguageSelection/LSelect.js   |  1 -
 .../MultipleTranslate/MtPopup/index.js        | 36 +++----
 .../MultipleTranslate/MtPopup/style.css       | 11 +--
 src/components/MultipleTranslate/index.js     | 62 ++++++------
 src/components/MultipleTranslate/style.css    | 12 ++-
 .../CustomizeBoardDisplay/index.js            | 94 +++++++++----------
 .../CustomizeBoardOptions/index.js            |  6 +-
 src/components/Popup/style.css                |  7 +-
 src/components/PopupHeader/index.js           |  2 +-
 src/components/PopupHeader/style.css          |  4 +-
 src/components/RawText/style.css              |  3 -
 src/components/ResultBox/index.js             |  4 +-
 src/components/ResultBox/style.css            | 11 +--
 src/components/TsHistory/style.css            |  4 +-
 src/constants/defaultStyleVars.js             |  8 +-
 src/entry/background/install.js               |  5 +
 16 files changed, 130 insertions(+), 140 deletions(-)

diff --git a/src/components/LanguageSelection/LSelect.js b/src/components/LanguageSelection/LSelect.js
index de185cb1..5bdcbf34 100644
--- a/src/components/LanguageSelection/LSelect.js
+++ b/src/components/LanguageSelection/LSelect.js
@@ -24,7 +24,6 @@ const LSelect = ({ isFrom, onChange, disableSelect, from, to, options }) => {
 
     return (
         <div className='ts-select-box'>
-            <label className='ts-fromAndTo'>{isFrom? 'from': 'to'}</label>
             <select
                 value={isFrom ? from : to}
                 className='ts-lselect'
diff --git a/src/components/MultipleTranslate/MtPopup/index.js b/src/components/MultipleTranslate/MtPopup/index.js
index c56fab01..1620cdcb 100644
--- a/src/components/MultipleTranslate/MtPopup/index.js
+++ b/src/components/MultipleTranslate/MtPopup/index.js
@@ -57,25 +57,25 @@ const MtPopup = () => {
                     to={to}
                     options={mtLangCode}
                 />
+                <div className='ts-mt-results ts-scrollbar'>
+                    {translations.length === 0 ? 
+                        <div className='ts-mt-result-add-translate-source'>{getI18nMessage('sentenceAddTranslateSource')}</div> :
+                    translations.map(({ source, status, result }) => (
+                        <MtResult
+                            source={source}
+                            status={status}
+                            result={result}
+                            key={source}
+                            text={text}
+                            translate={() => handleTranslate(source)}
+                            remove={() => handleRemoveSource(source)}
+                            readText={(text, from) => sendAudio(text, { source, from })}
+                            retry={() => handleRetry(source)}
+                        />
+                    ))}
+                </div>
+                <MtAddSource translations={translations} />
             </div>
-            <div className='ts-mt-content ts-scrollbar'>
-                {translations.length === 0 ? 
-                    <div className='ts-mt-result-add-translate-source'>{getI18nMessage('sentenceAddTranslateSource')}</div> :
-                translations.map(({ source, status, result }) => (
-                    <MtResult
-                        source={source}
-                        status={status}
-                        result={result}
-                        key={source}
-                        text={text}
-                        translate={() => handleTranslate(source)}
-                        remove={() => handleRemoveSource(source)}
-                        readText={(text, from) => sendAudio(text, { source, from })}
-                        retry={() => handleRetry(source)}
-                    />
-                ))}
-            </div>
-            <MtAddSource translations={translations} />
         </div>
     );
 };
diff --git a/src/components/MultipleTranslate/MtPopup/style.css b/src/components/MultipleTranslate/MtPopup/style.css
index f80c463a..fa3dcb52 100644
--- a/src/components/MultipleTranslate/MtPopup/style.css
+++ b/src/components/MultipleTranslate/MtPopup/style.css
@@ -8,14 +8,11 @@
     color: var(--text-normal) !important;
 }
 .content {
-    margin: 0 auto;
-    height: fit-content;
-    width: 240px;
-    color: var(--text-normal);
-}
-.ts-mt-content {
-    width: 246px;
     margin: 2px auto;
+    width: 242px;
+}
+.ts-mt-results {
+    width: 100%;
     max-height: 250px;
     overflow-y: auto;
 }
diff --git a/src/components/MultipleTranslate/index.js b/src/components/MultipleTranslate/index.js
index 313d2f4e..5005be80 100644
--- a/src/components/MultipleTranslate/index.js
+++ b/src/components/MultipleTranslate/index.js
@@ -96,7 +96,7 @@ const MultipleTranslate = () => {
                 onMouseDown={e => drag(e, pinPos, changePinPos, handlePosChange)}
             >
                 <span className='ts-mt-header-title'>
-                    <span>{getI18nMessage('contentResult')}</span>
+                    <span>Sc</span>
                 </span>
                 <span className='ts-mt-header-icons'>
                     <IconFont
@@ -113,37 +113,39 @@ const MultipleTranslate = () => {
                     />
                 </span>
             </div>
-            <div style={{display: showRtAndLs ? 'block' : 'none', width: '246px', margin: '0px auto'}}>
-                <RawText
-                    defaultValue={text}
-                    rawTextTranslate={handleRawTextChange}
-                    focusDependency={focusRawText}
-                />
-                <LanguageSelection
-                    selectionChange={handleSelectionChange}
-                    from={from}
-                    to={to}
-                    options={mtLangCode}
-                />
-            </div>
-            <div className='ts-mt-content ts-scrollbar'>
-                {translations.length === 0 ? 
-                    <div className='ts-mt-result-add-translate-source'>{getI18nMessage('sentenceAddTranslateSource')}</div> :
-                translations.map(({ source, status, result }) => (
-                    <MtResult
-                        source={source}
-                        status={status}
-                        result={result}
-                        key={source}
-                        text={text}
-                        translate={() => handleTranslate(source)}
-                        remove={() => handleRemoveSource(source)}
-                        readText={(text, from) => sendAudio(text, { source, from })}
-                        retry={() => handleRetry(source)}
+            <div className='ts-mt-content'>
+                <div style={{display: showRtAndLs ? 'block' : 'none'}}>
+                    <RawText
+                        defaultValue={text}
+                        rawTextTranslate={handleRawTextChange}
+                        focusDependency={focusRawText}
+                    />
+                    <LanguageSelection
+                        selectionChange={handleSelectionChange}
+                        from={from}
+                        to={to}
+                        options={mtLangCode}
                     />
-                ))}
+                </div>
+                <div className='ts-mt-results ts-scrollbar'>
+                    {translations.length === 0 ? 
+                        <div className='ts-mt-result-add-translate-source'>{getI18nMessage('sentenceAddTranslateSource')}</div> :
+                    translations.map(({ source, status, result }) => (
+                        <MtResult
+                            source={source}
+                            status={status}
+                            result={result}
+                            key={source}
+                            text={text}
+                            translate={() => handleTranslate(source)}
+                            remove={() => handleRemoveSource(source)}
+                            readText={(text, from) => sendAudio(text, { source, from })}
+                            retry={() => handleRetry(source)}
+                        />
+                    ))}
+                </div>
+                <MtAddSource translations={translations} />
             </div>
-            <MtAddSource translations={translations} />
         </div>
     );
 };
diff --git a/src/components/MultipleTranslate/style.css b/src/components/MultipleTranslate/style.css
index c8cb9318..953aab1f 100644
--- a/src/components/MultipleTranslate/style.css
+++ b/src/components/MultipleTranslate/style.css
@@ -7,10 +7,14 @@
     left: 0px;
     width: 250px;
     background-color: var(--bg-total);
+    box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 10px 0px;
 }
 .ts-mt-content {
-    width: 246px;
-    margin: 2px auto;
+    width: 242px;
+    margin: 0 auto 4px;
+}
+.ts-mt-results {
+    width: 100%;
     max-height: 250px;
     overflow-y: auto;
 }
@@ -18,8 +22,6 @@
     cursor: move;
     user-select: none;
     width: 100%;
-    color: var(--text-title);
-    background-color: var(--bg-title);
     padding: 5px;
     box-sizing: border-box;
     overflow: hidden;
@@ -35,6 +37,8 @@
     white-space: nowrap;
     max-width: 100px;
     overflow: hidden;
+    font-weight: bold;
+    color: var(--text-icon);
 }
 .ts-mt-header-icons {
     float: right;
diff --git a/src/components/Options/CustomizeTheme/CustomizeBoardDisplay/index.js b/src/components/Options/CustomizeTheme/CustomizeBoardDisplay/index.js
index cdb7c9d1..ac4521b8 100644
--- a/src/components/Options/CustomizeTheme/CustomizeBoardDisplay/index.js
+++ b/src/components/Options/CustomizeTheme/CustomizeBoardDisplay/index.js
@@ -29,24 +29,22 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                 <div
                     class="ts-rb-head"
                     style={{
-                        color: styleVars['--text-title'],
-                        background: styleVars['--bg-title']
+                        color: styleVars['--text-icon']
                     }}
                 >
-                    <div class="tsrbh-title">Result</div>
+                    <div class="tsrbh-title">Sc</div>
                     <span class="tsrbh-icons">
                         <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)', opacity: '1', color: styleVars['--text-icon']}} />
                         <IconFont iconName='#icon-GoPin' style={{color: styleVars['--text-icon']}} />
                     </span>
                 </div>
                 <div class="ts-rb-content">
-                    <div class="tsrbc-rtandls tsrbc-rtandls-show">
+                    <div style={{color: styleVars['--text-normal']}}>
                         <div class="ts-raw-text">
                             <textarea placeholder="Input here" class="ts-rt-text">welcome</textarea>
                         </div>
                         <div class="ts-language-selection">
                             <div class="ts-select-box">
-                                <label class="ts-fromAndTo">from</label>
                                 <select class="ts-lselect" disabled style={{color: styleVars['--text-normal'], opacity: '1'}}>
                                     <option value="">自动选择</option>
                                 </select>
@@ -55,7 +53,6 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                                 <IconFont iconName='#icon-MdSwap' />
                             </span>
                             <div class="ts-select-box">
-                                <label class="ts-fromAndTo">to</label>
                                 <select class="ts-lselect" disabled style={{color: styleVars['--text-normal'], opacity: '1', background: styleVars['--bg-select-focus']}}>
                                     <option value="">自动选择</option>
                                 </select>
@@ -98,11 +95,10 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                 <div
                     class="title"
                     style={{
-                        color: styleVars['--text-title'],
-                        background: styleVars['--bg-title']
+                        color: styleVars['--text-icon']
                     }}
                 >
-                    <div class="title-logo">ScTranslator</div>
+                    <div class="title-logo">Sc</div>
                     <div class="title-icons">
                         <IconFont iconName='#icon-theme' className='title-icons-enable' style={{color: styleVars['--text-icon']}} />
                         <IconFont iconName='#icon-MdTranslate' className='title-icons-enable' style={{color: styleVars['--text-icon']}} />
@@ -116,7 +112,6 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                     </div>
                     <div class="ts-language-selection">
                         <div class="ts-select-box">
-                            <label class="ts-fromAndTo">from</label>
                             <select class="ts-lselect" disabled style={{color: styleVars['--text-normal'], opacity: '1', background: styleVars['--bg-select-focus']}}>
                                 <option value="">自动选择</option>
                             </select>
@@ -125,56 +120,55 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                             <IconFont iconName='#icon-MdSwap' />
                         </span>
                         <div class="ts-select-box">
-                            <label class="ts-fromAndTo">to</label>
                             <select class="ts-lselect" disabled style={{color: styleVars['--text-normal'], opacity: '1'}}>
                                 <option value="ja">日语</option>
                             </select>
                         </div>
                     </div>
-                </div>
-                <div class="ts-mt-content ts-scrollbar">
-                    <div class="ts-mt-result" style={{background: styleVars['--bg-content']}}>
-                        <div class="ts-mt-result-head ts-button" style={{color: styleVars['--text-normal']}}>
-                            <span class="ts-mt-result-head-source">
-                                <SourceFavicon source='google.com' />
-                                <IconFont iconName='#icon-GoUnmute' style={{marginLeft: '5px'}} />
-                            </span>
-                            <span class="ts-mt-result-head-icons">
-                                <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)'}} />
-                                <IconFont iconName='#icon-GoX' />
-                            </span>
-                        </div>
-                        <div class="ts-mt-result-result">
-                            <div style={{marginBottom: '10px'}}>[ˈwelkəm]</div>
-                            <div>
-                                <span style={{marginRight: '5px'}}>ようこそ</span>
-                                <IconFont iconName='#icon-GoUnmute' />
+                    <div class="ts-mt-results ts-scrollbar">
+                        <div class="ts-mt-result" style={{background: styleVars['--bg-content']}}>
+                            <div class="ts-mt-result-head ts-button" style={{color: styleVars['--text-normal']}}>
+                                <span class="ts-mt-result-head-source">
+                                    <SourceFavicon source='google.com' />
+                                    <IconFont iconName='#icon-GoUnmute' style={{marginLeft: '5px'}} />
+                                </span>
+                                <span class="ts-mt-result-head-icons">
+                                    <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)'}} />
+                                    <IconFont iconName='#icon-GoX' />
+                                </span>
+                            </div>
+                            <div class="ts-mt-result-result">
+                                <div style={{marginBottom: '10px'}}>[ˈwelkəm]</div>
+                                <div>
+                                    <span style={{marginRight: '5px'}}>ようこそ</span>
+                                    <IconFont iconName='#icon-GoUnmute' />
+                                </div>
+                                <div style={{marginTop: '10px'}}>名词: 歓迎, ウエルカム, 優待, 奉迎, 遠見, 接待</div>
+                                <div>动词: 歓迎する</div>
                             </div>
-                            <div style={{marginTop: '10px'}}>名词: 歓迎, ウエルカム, 優待, 奉迎, 遠見, 接待</div>
-                            <div>动词: 歓迎する</div>
-                        </div>
-                    </div>
-                    <div class="ts-mt-result" style={{background: styleVars['--bg-content']}}>
-                        <div class="ts-mt-result-head ts-button" style={{color: styleVars['--text-normal']}}>
-                            <span class="ts-mt-result-head-source">
-                                <SourceFavicon source='bing.com' />
-                                <IconFont iconName='#icon-GoUnmute' style={{marginLeft: '5px'}} />
-                            </span>
-                            <span class="ts-mt-result-head-icons">
-                                <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)'}} />
-                                <IconFont iconName='#icon-GoX' />
-                            </span>
                         </div>
-                        <div class="ts-mt-result-result">
-                            <div>
-                                <span style={{marginRight: '5px'}}>ようこそ</span>
-                                <IconFont iconName='#icon-GoUnmute' />
+                        <div class="ts-mt-result" style={{background: styleVars['--bg-content']}}>
+                            <div class="ts-mt-result-head ts-button" style={{color: styleVars['--text-normal']}}>
+                                <span class="ts-mt-result-head-source">
+                                    <SourceFavicon source='bing.com' />
+                                    <IconFont iconName='#icon-GoUnmute' style={{marginLeft: '5px'}} />
+                                </span>
+                                <span class="ts-mt-result-head-icons">
+                                    <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)'}} />
+                                    <IconFont iconName='#icon-GoX' />
+                                </span>
+                            </div>
+                            <div class="ts-mt-result-result">
+                                <div>
+                                    <span style={{marginRight: '5px'}}>ようこそ</span>
+                                    <IconFont iconName='#icon-GoUnmute' />
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="ts-mt-add-source">
-                    <IconFont iconName='#icon-plus' />
+                    <div class="ts-mt-add-source">
+                        <IconFont iconName='#icon-plus' />
+                    </div>
                 </div>
             </div>
             {/* SourceSelector */}
diff --git a/src/components/Options/CustomizeTheme/CustomizeBoardOptions/index.js b/src/components/Options/CustomizeTheme/CustomizeBoardOptions/index.js
index 9386cb64..2c658bd9 100644
--- a/src/components/Options/CustomizeTheme/CustomizeBoardOptions/index.js
+++ b/src/components/Options/CustomizeTheme/CustomizeBoardOptions/index.js
@@ -4,14 +4,12 @@ import ColorSelector from './ColorSelector';
 import './style.css';
 
 const initChanging = { targetColor: '', saved: false, offsetColor: '' };
-const textKeyList = ['--text-normal', '--text-title', '--text-icon'];
-const bgKeyList = ['--bg-content', '--bg-title', '--bg-total', '--bg-item-hover', '--bg-select-focus'];
+const textKeyList = ['--text-normal', '--text-icon'];
+const bgKeyList = ['--bg-content', '--bg-total', '--bg-item-hover', '--bg-select-focus'];
 const i18nMessage = {
     '--text-normal': 'Normal',
-    '--text-title': 'Title',
     '--text-icon': 'Icon',
     '--bg-content': 'Content',
-    '--bg-title': 'Title',
     '--bg-total': 'Total',
     '--bg-item-hover': 'Item hover',
     '--bg-select-focus': 'Select focus'
diff --git a/src/components/Popup/style.css b/src/components/Popup/style.css
index deab9665..f41856ea 100644
--- a/src/components/Popup/style.css
+++ b/src/components/Popup/style.css
@@ -5,10 +5,9 @@
   height: fit-content;
   background: var(--bg-total);
   padding-bottom: 2px;
+  color: var(--text-normal) !important;
 }
 .content {
-  margin: 0 auto;
-  height: fit-content;
-  width: 240px;
-  color: var(--text-normal);
+  margin: 4px;
+  width: 242px;
 }
\ No newline at end of file
diff --git a/src/components/PopupHeader/index.js b/src/components/PopupHeader/index.js
index 750799b3..88f0ddbe 100644
--- a/src/components/PopupHeader/index.js
+++ b/src/components/PopupHeader/index.js
@@ -59,7 +59,7 @@ const PopupHeader = () => {
 
     return (
         <div className="title">
-            <div className='title-logo'>{getI18nMessage('extName')}</div>
+            <div className='title-logo'>Sc</div>
             <div className='title-icons'>
                 <IconFont
                     iconName='#icon-theme'
diff --git a/src/components/PopupHeader/style.css b/src/components/PopupHeader/style.css
index eb381acd..c36c57e3 100644
--- a/src/components/PopupHeader/style.css
+++ b/src/components/PopupHeader/style.css
@@ -1,11 +1,11 @@
 .title {
     position: relative;
-    background: var(--bg-title);
+    color: var(--text-icon);
     height: 30px;
     line-height: 30px;
-    color: var(--text-title);
 }
 .title-logo {
+    font-weight: bold;
     font-size: 16px;
     margin-left: 5px;
 }
diff --git a/src/components/RawText/style.css b/src/components/RawText/style.css
index 03940849..94806141 100644
--- a/src/components/RawText/style.css
+++ b/src/components/RawText/style.css
@@ -1,6 +1,3 @@
-.ts-raw-text {
-    margin: 5px auto;
-}
 .ts-rt-text {
     border: none;
     font-size: 16px;
diff --git a/src/components/ResultBox/index.js b/src/components/ResultBox/index.js
index c8561ee5..192592dc 100644
--- a/src/components/ResultBox/index.js
+++ b/src/components/ResultBox/index.js
@@ -138,7 +138,7 @@ const ResultBox = () => {
                 className='ts-rb-head'
                 onMouseDown={(e) => drag(e, pinPos, changePinPos, handlePosChange)}
             >
-                <div className='tsrbh-title'>{getI18nMessage('contentResult')}</div>
+                <div className='tsrbh-title'>Sc</div>
                 <span 
                     className='tsrbh-icons'
                 >
@@ -158,7 +158,7 @@ const ResultBox = () => {
                 </span>
             </div>
             <div className='ts-rb-content'>
-                <div className={`tsrbc-rtandls ${showRtAndLs && !resultFromHistory ? 'tsrbc-rtandls-show' : ''}`}>
+                <div style={{display: (showRtAndLs && !resultFromHistory) ? 'block' : 'none'}}>
                     <RawText
                         defaultValue={text}
                         rawTextTranslate={handleRawTextChange}
diff --git a/src/components/ResultBox/style.css b/src/components/ResultBox/style.css
index 45ff7ecf..1ba50d96 100644
--- a/src/components/ResultBox/style.css
+++ b/src/components/ResultBox/style.css
@@ -7,30 +7,30 @@
     left: 0px;
     width: 250px;
     background-color: var(--bg-total);
+    box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 10px 0px;
 }
 .ts-rb-head {
     cursor: move;
     user-select: none;
     width: 100%;
-    color: var(--text-title);
-    background-color: var(--bg-title);
+    color: var(--text-icon);
     padding: 5px;
     box-sizing: border-box;
     overflow: hidden;
 }
 .ts-rb-content {
-    width: 246px;
-    margin: 2px auto;
+    width: 242px;
+    margin: 0 auto 4px;
 }
 .tsrbc-rtandls {
     overflow: hidden;
-    height: 0px;
 }
 .tsrbc-rtandls-show {
     height: fit-content;
 }
 .tsrbh-title {
     float: left;
+    font-weight: bold;
 }
 .tsrbh-icons {
     float: right;
@@ -38,6 +38,5 @@
 }
 .tsrbh-icons .ts-iconfont {
     cursor: pointer;
-    color: var(--text-icon);
     opacity: 0.6;
 }
\ No newline at end of file
diff --git a/src/components/TsHistory/style.css b/src/components/TsHistory/style.css
index e5d63ca6..2d767687 100644
--- a/src/components/TsHistory/style.css
+++ b/src/components/TsHistory/style.css
@@ -53,9 +53,9 @@
     position: absolute;
     top: 0px;
     left: 0px;
-    color: var(--text-title);
+    color: var(--text-icon);
     width: 100%;
-    background: var(--bg-title);
+    background: var(--bg-total);
     padding: 10px 5px;
     min-height: 40px;
     box-sizing: border-box;
diff --git a/src/constants/defaultStyleVars.js b/src/constants/defaultStyleVars.js
index 10ce4064..a372f7da 100644
--- a/src/constants/defaultStyleVars.js
+++ b/src/constants/defaultStyleVars.js
@@ -1,9 +1,7 @@
 export const defaultStyleVars = {
     '--text-normal': 'rgba(102,102,102,1)',
-    '--text-title': 'rgba(187,187,187,1)',
-    '--text-icon': 'rgba(255,255,255,1)',
+    '--text-icon': 'rgba(51,51,51,1)',
     '--bg-content': 'rgba(255,255,255,1)',
-    '--bg-title': 'rgba(102,102,102,1)',
     '--bg-total': 'rgba(238,238,238,1)',
     '--bg-item-hover': 'rgba(221,221,221,0.2)',
     '--bg-select-focus': 'rgba(221,221,221,1)'
@@ -11,12 +9,10 @@ export const defaultStyleVars = {
 
 export const darkStyleVars = {
     '--text-normal': 'rgba(255,255,255,0.88)',
-    '--text-title': 'rgba(187,187,187,1)',
     '--text-icon': 'rgba(255,255,255,1)',
     '--bg-content': 'rgba(40,44,53,1)',
-    '--bg-title': 'rgba(34,34,34,1)',
     '--bg-total': 'rgba(17,17,17,1)',
-    '--bg-item-hover': 'rgba(221,221,221, 0.2)',
+    '--bg-item-hover': 'rgba(221,221,221,0.2)',
     '--bg-select-focus': 'rgba(51,51,51,1)'
 };
 
diff --git a/src/entry/background/install.js b/src/entry/background/install.js
index 09633c11..8c7845e6 100644
--- a/src/entry/background/install.js
+++ b/src/entry/background/install.js
@@ -1,6 +1,7 @@
 import { LANG_ZH_CN, LANG_JA, preferredLangCode } from '../../constants/langCode';
 import defaultOptions from '../../constants/defaultOptions';
 import { getLocalStorage } from '../../public/chrome-call';
+import { defaultStyleVars } from '../../constants/defaultStyleVars';
 
 /* global chrome */
 
@@ -29,6 +30,10 @@ const initStorageOnInstalled = (userLang, update) => {
             data.defaultAudioSource = sourceSwitch(data.defaultAudioSource);
         }
 
+        if (data.styleVarsList?.[0]?.styleVars) {
+            (data.styleVarsList[0].styleVars = defaultStyleVars);
+        }
+
         chrome.storage.local.set({ ...defaultSet, ...data });
     });
 };