{"id":116,"date":"2020-04-06T03:35:23","date_gmt":"2020-04-06T03:35:23","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/hulk\/?page_id=116"},"modified":"2020-04-13T11:45:06","modified_gmt":"2020-04-13T11:45:06","slug":"style-customization","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/hulk\/style-customization\/","title":{"rendered":"Style Customization"},"content":{"rendered":"\n<h4>Changing Default Variables:<\/h4>\n\n\n\n<p>Open&nbsp;<code>src-&gt;assets-&gt;scss-&gt;_variables.scss<\/code>&nbsp;file and change style variable values as per your requirement. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Custom Variable\n\n\/\/ Common color\n$white:#ffffff;\n$bg-default:#f3f7fa;\n$gray-shade-1:#f4f5f9;\n$gray-shade-2:#f5f5f5;\n$gray-shade-3:#f3f3f3;\n\n\/\/Primary theme\n$primary:#4d7df2;\n$secondary: #ff8600;\n$success: #00d41a;\n$info: #00d0bd;\n$error: #e53935;\n$warning: #ffb70f;\n\n\/\/ Text color\n$text-color: #29303b;\n$text-sec-color:#717275;\n$dark: #29303b;\n$color-disabled:#969fa4;\n\n\/\/ Border color\n$border-color: #e0e0e0;\n\n\/\/ Rating color\n$rating-color:#f9bf00;\n\n\/\/Shop List Img Bg Color\n$img-holder-color:#edf1f2;\n$facebook: #3c5a9a;\n$google: #db4437;\n$twitter: #1da1f2;\n$github: #000000;\n\n\/\/ Box Shadow\n$box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);<\/pre>\n\n\n\n<h4>Changing Teal theme variable color:<\/h4>\n\n\n\n<p>Open&nbsp;<code>src-&gt;assets-&gt;scss-&gt;_teal-theme.scss<\/code>&nbsp;file and change style variable values as per your requirement. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Teal Theme\n$primary:#028484;\n$secondary: #d99830;\n$success: #37ae3d;\n$info: #00d0bd;\n$error: #e64c3d ;\n$warning: #ffb70f;<\/pre>\n\n\n\n<h4>Changing Violet theme variable color:<\/h4>\n\n\n\n<p>Open&nbsp;<code>src-&gt;assets-&gt;scss-&gt;_violet-theme.scss<\/code>&nbsp;file and change style variable values as per your requirement. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Violet theme\n$primary: #53419a;\n$secondary: #f0bc02;\n$success: #37ae3d;\n$info: #00d0bd;\n$error: #e53935 ;\n$warning: #ffb70f;<\/pre>\n\n\n\n<h4>Changing Dark theme variable color:<\/h4>\n\n\n\n<p>Open\u00a0<code>src->assets->scss->_dark-theme.scss<\/code>\u00a0file and change style variable values as per your requirement. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Dark Theme\n$bgPaper:#27293c; \n$bgDefault: #1e1e2e;\n$textPrimary: #9d9daf;\n$textSecondary: #717275;\n$borderColor:$textPrimary;\n$success: #37ae3d;\n$info: #00d0bd;\n$error: #e64c3d ;\n$warning: #ffb70f;<\/pre>\n\n\n\n<h4>Changing Color Values For Charts And Material-ui Theme<\/h4>\n\n\n\n<p>Go to  <code>src->constants->appConfig.js<\/code>\u00a0file <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**\n * App Config File\n*\/\nconst AppConfig = {\n\u00a0\u00a0...\n\u00a0\u00a0\u00a0\/\/ Default Theme Colors \n\u00a0\u00a0\u00a0lightThemeColors: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'primary': '#4d7df2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'secondary': '#ff8600',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'success': '#00d41a',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'info': '#00d0bd',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'warning': '#ffb70f',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'error': '#e53935',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'textPrimary': '#29303b',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'textSecondary': '#717275',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'divider': '#e0e0e0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'icon': '#717275',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'bgPaper': '#FFFFFF',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'bgDefault': '#f3f7fa',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'white':'#ffffff',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'black':'#000000'\n\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\/\/ Teal Theme Colors\n\u00a0\u00a0\u00a0tealThemeColors: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'primary': '#028484',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'secondary': '#d99830',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'success': '#00d41a',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'info': '#00d0bd',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'warning': '#ffb70f',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'error': '#e64c3d ',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'textPrimary': '#29303b',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'textSecondary': '#717275',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'divider': '#e0e0e0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'icon': '#717275',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'bgPaper': '#FFFFFF',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'bgDefault': '#f3f7fa',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'white':'#ffffff',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'black':'#000000'\n\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\/\/ Violet Theme Colors\n\u00a0\u00a0\u00a0violetThemeColors: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'primary': '#53419A',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'secondary': '#F0bc02',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'success': '#ff8600',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'info': '#00d0bd',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'warning': '#ffb70f',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'error': '#e53935',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'textPrimary': '#29303b',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'textSecondary': '#717275',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'divider': '#e0e0e0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'icon': '#717275',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'bgPaper': '#FFFFFF',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'bgDefault': '#f3f7fa',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'white':'#ffffff',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'black':'#000000'\n\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\/\/ Dark Theme Colors\n\u00a0\u00a0\u00a0darkThemeColors: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'primary': '#4d7df2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'secondary': '#ff8600',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'success': '#00d41a',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'info': '#00d0bd',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'warning': '#ffb70f',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'error': '#e53935',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'textPrimary': '#9d9daf',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'textSecondary': '#717275',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'divider': 'rgba(255,255,255,0.12)',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'icon': '#717275',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'bgPaper': '#27293c', \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'bgDefault': '#1e1e2e', \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'white':'#ffffff',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'black':'#000000'\n\u00a0\u00a0\u00a0}\n}\n<\/pre>\n\n\n\n<h3 id=\"font-customizations\">Font Customizations<a href=\"#font-customizations\"><\/a><\/h3>\n\n\n\n<h4 id=\"adding-a-new-font-family\">Adding a New Font Family<a href=\"#adding-a-new-font-family\"><\/a><\/h4>\n\n\n\n<p>If you want to change the existing font of the template, you can easily change them. We are using Google Fonts in the template as it is free to use and is easily available. For more info, please visit:<\/p>\n\n\n\n<div class=\"custom-sec-wrap mb-4\">\n\t<a href=\"https:\/\/fonts.google.com\/\" class=\"link-wrap\">\n\t\t<div class=\"content-wrap\">\n\t\t\t<h6>Google Fonts<\/h6>\n\t\t\t<p>Making the web more beautiful, fast, and open through great typography<\/p>\n\t\t\t<small>fonts.google.com<\/small>\n\t\t<\/div>\n<div style=\"background-image:url('https:\/\/www.gstatic.com\/images\/icons\/material\/apps\/fonts\/1x\/opengraph_color_1200dp.png');\" class=\"ironthm-img-item\"><\/div>\n<\/a>\n\t<\/a>\n<\/div>\n\n\n\n<p><strong>Step 1:<\/strong> To change the font family in the template, please visit the above link and select the font you wish to apply to your template and copy the embed code &amp; font family. Example:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"609\" height=\"614\" src=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/googlrfonts.png\" alt=\"\" class=\"wp-image-397\" srcset=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/googlrfonts.png 609w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/googlrfonts-298x300.png 298w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/googlrfonts-150x150.png 150w\" sizes=\"(max-width: 609px) 100vw, 609px\" \/><\/figure><\/div>\n\n\n\n<p>Paste the embed code in <code>index.html<\/code> file under the <code>public<\/code> folder.<\/p>\n\n\n\n<p>Make sure to copy the embed code in the <code>head<\/code> tag of the <code>index.html<\/code> file.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Now open the <code>src->themes->LightTheme->index.js<\/code> file and paste the font family in typography like:  <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const theme = createMuiTheme({\n\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0typography: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontFamily: \"'Roboto', sans-serif\", \/\/ update new font family here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0},\n   ...\n});\n<\/pre>\n\n\n\n<h4 id=\"adding-a-new-font-family\">Change Typography :<a href=\"#adding-a-new-font-family\"><\/a><\/h4>\n\n\n\n<p>If you want to change the default typography of the template , you can easily change them. Go to <code>src->themes->LightTheme->index.js<\/code> file and do changes as per your requirement.<\/p>\n\n\n\n<p> <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const theme = createMuiTheme({\n    \u2026\n    typography: {\n       htmlFontSize: 16,\n       ...\n       fontSize: 16,\n       h1: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 500,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '2.75rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h2: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 500,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '2.25rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h3: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 500,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '2rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h4: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 500,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '1.75rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h5: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 500,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '1.5rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h6: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 500,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '1.25rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0subtitle1: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '1.125rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 400,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0subtitle2: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textSecondary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 400,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '0.875rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body1: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textSecondary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '0.75rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5'\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body2: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '1rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '1.5',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'@media (max-width:960px)': {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '0.9375rem',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0button: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textPrimary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '14px',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0textTransform: 'capitalize'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0caption: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textSecondary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '11px',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0.33px',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '13px'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0overline: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: AppConfig.lightThemeColors.textSecondary,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '11px',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: 500,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0letterSpacing: '0.33px',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lineHeight: '13px',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0textTransform: 'uppercase'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n    },\n    \u2026\n });<\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Changing Default Variables: Open&nbsp;src-&gt;assets-&gt;scss-&gt;_variables.scss&nbsp;file and change style variable values as per your requirement. \/\/ Custom Variable \/\/ Common color $white:#ffffff; $bg-default:#f3f7fa; $gray-shade-1:#f4f5f9; $gray-shade-2:#f5f5f5; $gray-shade-3:#f3f3f3; \/\/Primary theme $primary:#4d7df2; $secondary: #ff8600; $success: #00d41a; $info: #00d0bd; $error: #e53935; $warning: #ffb70f; \/\/ Text color $text-color: #29303b; $text-sec-color:#717275; $dark: #29303b; $color-disabled:#969fa4; \/\/ Border color $border-color: #e0e0e0; \/\/ Rating color $rating-color:#f9bf00; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":22,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/116"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":13,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/116\/revisions"}],"predecessor-version":[{"id":400,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/116\/revisions\/400"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/media?parent=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}