{"id":3411,"date":"2025-11-13T09:56:58","date_gmt":"2025-11-13T02:56:58","guid":{"rendered":"https:\/\/portal-atlasx.cdg.co.th\/home\/?post_type=docs&#038;p=3411"},"modified":"2025-11-13T09:56:58","modified_gmt":"2025-11-13T02:56:58","slug":"theme","status":"publish","type":"docs","link":"https:\/\/portal-atlasx.cdg.co.th\/home\/docs\/atlasx-web-template\/configuration\/theme\/","title":{"rendered":"Theme"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"theme-configuration\">Theme Configuration<\/h1>\n\n\n\n<p>AtlasX Web Application (Berlin Template) \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e18\u0e35\u0e21\u0e02\u0e2d\u0e07\u0e41\u0e2d\u0e1e\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e48\u0e19\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01 variable \u0e02\u0e2d\u0e07 scss<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"variable-configuration\">Variable Configuration<\/h2>\n\n\n\n<p>\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e44\u0e1f\u0e25\u0e4c&nbsp;<code>ClientApp\/src\/styles.scss<\/code>&nbsp;\u0e41\u0e25\u0e49\u0e27\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e48\u0e32\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a variable \u0e15\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>:root {\n  --navbar-height: 80px;\n  --navbar-bg-c: #140e52;\n  --navbar-c: #fff;\n  --navbar-active-c: #52eac8;\n  --navbar-hover-c: #52eac8;\n  --navbar-separator-bg-c: rgba(255, 255, 255, 0.3);\n  --navbar-dropdown-menu-bg-c: #fff;\n  --mobile-navbar-height: 70px;\n  --mobile-navbar-bg-c: #2a217d;\n  --mobile-navbar-c: #fff;\n  --mobile-navbar-active-c: #52eac8;\n  --mobile-navbar-hover-c: #52eac8;\n  --mobile-navbar-separator-bg-c: rgba(255, 255, 255, 0.3);\n  --mobile-submenu-bg-c: #fff;\n  --mobile-submenu-primary-c: #4f4f4f;\n  --mobile-submenu-secondary-c: #4f4f4f;\n  --mobile-submenu-active-c: #52eac8;\n  --mobile-submenu-hover-c: #52eac8;\n  --mobile-submenu-separator-bg-c: #f2f2f2;\n  --mobile-backdrop-bg-c: rgba(0, 0, 0, 0.4);\n  --sider-bg-c: #140e52;\n  --sider-c: #fff;\n  --sider-active-c: #52eac8;\n  --sider-hover-c: #52eac8;\n  --sider-hover-bg-c: rgba(255, 255, 255, 0.4);\n  --max-content-width: 2000px;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #000000\">:<\/span><span style=\"color: #001080\">root<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-height: 80<\/span><span style=\"color: #001080\">px<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: #<\/span><span style=\"color: #098658\">140e52<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-c: #<\/span><span style=\"color: #001080\">fff<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">active<\/span><span style=\"color: #000000\">-c: #52<\/span><span style=\"color: #001080\">eac8<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">hover<\/span><span style=\"color: #000000\">-c: #52<\/span><span style=\"color: #001080\">eac8<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">separator<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: <\/span><span style=\"color: #795E26\">rgba<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">0.3<\/span><span style=\"color: #000000\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">dropdown<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">menu<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: #<\/span><span style=\"color: #001080\">fff<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-height: 70<\/span><span style=\"color: #001080\">px<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: #2<\/span><span style=\"color: #001080\">a217d<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-c: #<\/span><span style=\"color: #001080\">fff<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">active<\/span><span style=\"color: #000000\">-c: #52<\/span><span style=\"color: #001080\">eac8<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">hover<\/span><span style=\"color: #000000\">-c: #52<\/span><span style=\"color: #001080\">eac8<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">navbar<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">separator<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: <\/span><span style=\"color: #795E26\">rgba<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">0.3<\/span><span style=\"color: #000000\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">submenu<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: #<\/span><span style=\"color: #001080\">fff<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">submenu<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">primary<\/span><span style=\"color: #000000\">-c: #4<\/span><span style=\"color: #001080\">f4f4f<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">submenu<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">secondary<\/span><span style=\"color: #000000\">-c: #4<\/span><span style=\"color: #001080\">f4f4f<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">submenu<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">active<\/span><span style=\"color: #000000\">-c: #52<\/span><span style=\"color: #001080\">eac8<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">submenu<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">hover<\/span><span style=\"color: #000000\">-c: #52<\/span><span style=\"color: #001080\">eac8<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">submenu<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">separator<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: #<\/span><span style=\"color: #001080\">f2f2f2<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">mobile<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">backdrop<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: <\/span><span style=\"color: #795E26\">rgba<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">0<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">0<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">0<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">0.4<\/span><span style=\"color: #000000\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">sider<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: #<\/span><span style=\"color: #098658\">140e52<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">sider<\/span><span style=\"color: #000000\">-c: #<\/span><span style=\"color: #001080\">fff<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">sider<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">active<\/span><span style=\"color: #000000\">-c: #52<\/span><span style=\"color: #001080\">eac8<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">sider<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">hover<\/span><span style=\"color: #000000\">-c: #52<\/span><span style=\"color: #001080\">eac8<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">sider<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">hover<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">bg<\/span><span style=\"color: #000000\">-c: <\/span><span style=\"color: #795E26\">rgba<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">255<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">0.4<\/span><span style=\"color: #000000\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  --<\/span><span style=\"color: #001080\">max<\/span><span style=\"color: #000000\">-<\/span><span style=\"color: #001080\">content<\/span><span style=\"color: #000000\">-width: 2000<\/span><span style=\"color: #001080\">px<\/span><span style=\"color: #000000\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"featured_media":0,"parent":3410,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nav_title":"","positive":"","negative":"","footnotes":""},"docs_category":[],"class_list":["post-3411","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/comments?post=3411"}],"version-history":[{"count":1,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3411\/revisions"}],"predecessor-version":[{"id":3412,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3411\/revisions\/3412"}],"up":[{"embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3410"}],"wp:attachment":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/media?parent=3411"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs_category?post=3411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}