diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index 1771afbdb0d..f653bc37b27 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -298,6 +298,9 @@
     "blocking_mode_nxdomain": "NXDOMAIN: Respond with NXDOMAIN code",
     "blocking_mode_null_ip": "Null IP: Respond with zero IP address (0.0.0.0 for A; :: for AAAA)",
     "blocking_mode_custom_ip": "Custom IP: Respond with a manually set IP address",
+    "theme_auto": "Auto",
+    "theme_light": "Light",
+    "theme_dark": "Dark",
     "upstream_dns_client_desc": "If you keep this field empty, AdGuard Home will use the servers configured in the <0>DNS settings</0>.",
     "tracker_source": "Tracker source",
     "source_label": "Source",
diff --git a/client/src/actions/index.js b/client/src/actions/index.js
index 2242490b944..d86ea43efee 100644
--- a/client/src/actions/index.js
+++ b/client/src/actions/index.js
@@ -363,18 +363,18 @@ export const changeLanguage = (lang) => async (dispatch) => {
     }
 };
 
-export const getLanguageRequest = createAction('GET_LANGUAGE_REQUEST');
-export const getLanguageFailure = createAction('GET_LANGUAGE_FAILURE');
-export const getLanguageSuccess = createAction('GET_LANGUAGE_SUCCESS');
+export const changeThemeRequest = createAction('CHANGE_THEME_REQUEST');
+export const changeThemeFailure = createAction('CHANGE_THEME_FAILURE');
+export const changeThemeSuccess = createAction('CHANGE_THEME_SUCCESS');
 
-export const getLanguage = () => async (dispatch) => {
-    dispatch(getLanguageRequest());
+export const changeTheme = (theme) => async (dispatch) => {
+    dispatch(changeThemeRequest());
     try {
-        const langSettings = await apiClient.getCurrentLanguage();
-        dispatch(getLanguageSuccess(langSettings.language));
+        await apiClient.changeTheme({ theme });
+        dispatch(changeThemeSuccess({ theme }));
     } catch (error) {
         dispatch(addErrorToast({ error }));
-        dispatch(getLanguageFailure());
+        dispatch(changeThemeFailure());
     }
 };
 
diff --git a/client/src/api/Api.js b/client/src/api/Api.js
index 06f40c6c479..d984bbb8b0f 100644
--- a/client/src/api/Api.js
+++ b/client/src/api/Api.js
@@ -1,8 +1,12 @@
 import axios from 'axios';
 
 import { getPathWithQueryString } from '../helpers/helpers';
-import { QUERY_LOGS_PAGE_LIMIT, HTML_PAGES, R_PATH_LAST_PART } from '../helpers/constants';
+import {
+    QUERY_LOGS_PAGE_LIMIT, HTML_PAGES, R_PATH_LAST_PART, THEMES,
+} from '../helpers/constants';
 import { BASE_URL } from '../../constants';
+import i18n from '../i18n';
+import { LANGUAGES } from '../helpers/twosky';
 
 class Api {
     baseUrl = BASE_URL;
@@ -224,21 +228,21 @@ class Api {
     }
 
     // Language
-    CURRENT_LANGUAGE = { path: 'i18n/current_language', method: 'GET' };
 
-    CHANGE_LANGUAGE = { path: 'i18n/change_language', method: 'POST' };
+    async changeLanguage(config) {
+        const profile = await this.getProfile();
+        profile.language = config.language;
 
-    getCurrentLanguage() {
-        const { path, method } = this.CURRENT_LANGUAGE;
-        return this.makeRequest(path, method);
+        return this.setProfile(profile);
     }
 
-    changeLanguage(config) {
-        const { path, method } = this.CHANGE_LANGUAGE;
-        const parameters = {
-            data: config,
-        };
-        return this.makeRequest(path, method, parameters);
+    // Theme
+
+    async changeTheme(config) {
+        const profile = await this.getProfile();
+        profile.theme = config.theme;
+
+        return this.setProfile(profile);
     }
 
     // DHCP
@@ -571,11 +575,24 @@ class Api {
     // Profile
     GET_PROFILE = { path: 'profile', method: 'GET' };
 
+    UPDATE_PROFILE = { path: 'profile/update', method: 'PUT' };
+
     getProfile() {
         const { path, method } = this.GET_PROFILE;
         return this.makeRequest(path, method);
     }
 
+    setProfile(data) {
+        const theme = data.theme ? data.theme : THEMES.auto;
+        const defaultLanguage = i18n.language ? i18n.language : LANGUAGES.en;
+        const language = data.language ? data.language : defaultLanguage;
+
+        const { path, method } = this.UPDATE_PROFILE;
+        const config = { data: { theme, language } };
+
+        return this.makeRequest(path, method, config);
+    }
+
     // DNS config
     GET_DNS_CONFIG = { path: 'dns_info', method: 'GET' };
 
diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
index fa8ca78899b..751a8e2239e 100644
--- a/client/src/components/App/index.css
+++ b/client/src/components/App/index.css
@@ -1,4 +1,26 @@
 :root {
+    --bgcolor: #f5f7fb;
+    --mcolor: #495057;
+    --scolor: rgba(74, 74, 74, 0.7);
+    --border-color: rgba(0, 40, 100, 0.12);
+    --header-bgcolor: #fff;
+    --card-bgcolor: #fff;
+    --card-border-color: rgba(0, 40, 100, 0.12);
+    --ctrl-bgcolor: #fff;
+    --ctrl-select-bgcolor: rgba(69, 79, 94, 0.12);
+    --ctrl-dropdown-color: #212529;
+    --ctrl-dropdown-bgcolor-focus: #f8f9fa;
+    --ctrl-dropdown-color-focus: #16181b;
+    --btn-success-bgcolor: #5eba00;
+    --form-disabled-bgcolor: #f8f9fa;
+    --form-disabled-color: #495057;
+    --rt-nodata-bgcolor: rgba(255,255,255,0.8);
+    --rt-nodata-color: rgba(0,0,0,0.5);
+    --modal-overlay-bgcolor: rgba(255, 255, 255, 0.75);
+    --logs__table-bgcolor: #fff;
+    --logs__row--blue-bgcolor: #e5effd;
+    --logs__row--white-bgcolor: #fff;
+    --detailed-info-color: #888888;
     --yellow-pale: rgba(247, 181, 0, 0.1);
     --green79: #67b279;
     --gray-a5: #a5a5a5;
@@ -8,6 +30,32 @@
     --font-size-disable-autozoom: 1rem;
 }
 
+[data-theme="dark"] {
+    --bgcolor: #131313;
+    --mcolor: #e6e6e6;
+    --scolor: #a5a5a5;
+    --header-bgcolor: #131313;
+    --border-color: #222;
+    --card-bgcolor: #1c1c1c;
+    --card-border-color: #3d3d3d;
+    --ctrl-bgcolor: #1c1c1c;
+    --ctrl-select-bgcolor: #3d3d3d;
+    --ctrl-dropdown-color: #fff;
+    --ctrl-dropdown-bgcolor-focus: #000;
+    --ctrl-dropdown-color-focus: #fff;
+    --btn-success-bgcolor: #67b279;
+    --form-disabled-bgcolor: #3d3d3d;
+    --form-disabled-color: #a5a5a5;
+    --logs__text-color: #f3f3f3;
+    --rt-nodata-bgcolor: #1c1c1c;
+    --rt-nodata-color: #fff;
+    --modal-overlay-bgcolor: #1c1c1c;
+    --logs__table-bgcolor: #3d3d3d;
+    --logs__row--blue-bgcolor: #467fcf;
+    --logs__row--white-bgcolor: #1c1c1c;
+    --detailed-info-color: #fff;
+}
+
 body {
     margin: 0;
     padding: 0;
diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
index 6d65ccb8cc4..819bb0c6902 100644
--- a/client/src/components/App/index.js
+++ b/client/src/components/App/index.js
@@ -20,8 +20,13 @@ import EncryptionTopline from '../ui/EncryptionTopline';
 import Icons from '../ui/Icons';
 import i18n from '../../i18n';
 import Loading from '../ui/Loading';
-import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS } from '../../helpers/constants';
-import { getLogsUrlParams, setHtmlLangAttr } from '../../helpers/helpers';
+import {
+    FILTERS_URLS,
+    MENU_URLS,
+    SETTINGS_URLS,
+    THEMES,
+} from '../../helpers/constants';
+import { getLogsUrlParams, setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
 import Header from '../Header';
 import { changeLanguage, getDnsStatus } from '../../actions';
 
@@ -109,6 +114,7 @@ const App = () => {
         isCoreRunning,
         isUpdateAvailable,
         processing,
+        theme,
     } = useSelector((state) => state.dashboard, shallowEqual);
 
     const { processing: processingEncryption } = useSelector((
@@ -138,6 +144,41 @@ const App = () => {
         setLanguage();
     }, [language]);
 
+    const handleAutoTheme = (e, accountTheme) => {
+        if (accountTheme !== THEMES.auto) {
+            return;
+        }
+
+        if (e.matches) {
+            setUITheme(THEMES.dark);
+        } else {
+            setUITheme(THEMES.light);
+        }
+    };
+
+    useEffect(() => {
+        if (theme !== THEMES.auto) {
+            setUITheme(theme);
+
+            return;
+        }
+
+        const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+        const prefersDark = colorSchemeMedia.matches;
+        setUITheme(prefersDark ? THEMES.dark : THEMES.light);
+
+        if (colorSchemeMedia.addEventListener !== undefined) {
+            colorSchemeMedia.addEventListener('change', (e) => {
+                handleAutoTheme(e, theme);
+            });
+        } else {
+            // Deprecated addListener for older versions of Safari.
+            colorSchemeMedia.addListener((e) => {
+                handleAutoTheme(e, theme);
+            });
+        }
+    }, [theme]);
+
     const reloadPage = () => {
         window.location.reload();
     };
diff --git a/client/src/components/Header/Header.css b/client/src/components/Header/Header.css
index a5fe802ee2b..c5412f7aba5 100644
--- a/client/src/components/Header/Header.css
+++ b/client/src/components/Header/Header.css
@@ -47,7 +47,7 @@
     width: 250px;
     height: 100vh;
     transition: transform 0.3s ease;
-    background-color: #fff;
+    background-color: var(--header-bgcolor);
     overflow-y: auto;
 }
 
diff --git a/client/src/components/Logs/Cells/IconTooltip.css b/client/src/components/Logs/Cells/IconTooltip.css
index 245c14d9c3a..8f7eb45388b 100644
--- a/client/src/components/Logs/Cells/IconTooltip.css
+++ b/client/src/components/Logs/Cells/IconTooltip.css
@@ -4,7 +4,8 @@
     box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
     border-radius: 4px !important;
     pointer-events: auto !important;
-    background-color: var(--white);
+    background-color: var(--ctrl-bgcolor);
+    color: var(--scolor);
     z-index: 102;
     overflow-y: auto;
     max-height: 100%;
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 8df1d62b12e..358c2a6a7df 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -31,7 +31,7 @@
     overflow: hidden;
     font-size: 1rem;
     font-family: var(--font-family-sans-serif);
-    color: var(--gray-4d);
+    color: var(--logs__text-color);
     letter-spacing: 0;
     line-height: 1.5rem;
 }
@@ -48,7 +48,7 @@
 .detailed-info {
     font-size: 0.8rem;
     line-height: 1.4;
-    color: #888888;
+    color: var(--detailed-info-color);
 }
 
 .logs__text--link {
@@ -369,7 +369,7 @@
 
 /* QUERY_STATUS_COLORS */
 .logs__row--blue {
-    background-color: var(--blue);
+    background-color: var(--logs__row--blue-bgcolor);
 }
 
 .logs__row--green {
@@ -381,7 +381,7 @@
 }
 
 .logs__row--white {
-    background-color: var(--white);
+    background-color: var(--logs__row--white-bgcolor);
 }
 
 .logs__row--yellow {
@@ -389,8 +389,8 @@
 }
 
 .logs__no-data {
-    color: var(--gray-4d);
-    background-color: var(--white80);
+    color: var(--mcolor);
+    background-color: var(--logs__table-bgcolor);
     pointer-events: none;
     font-weight: 600;
     text-align: center;
@@ -403,7 +403,7 @@
 }
 
 .logs__table {
-    background-color: var(--white);
+    background-color: var(--logs__table-bgcolor);
     border: 0;
     border-radius: 8px;
     min-height: 43rem;
diff --git a/client/src/components/Settings/Settings.css b/client/src/components/Settings/Settings.css
index 3fd560f9f9f..ba6d2462aa5 100644
--- a/client/src/components/Settings/Settings.css
+++ b/client/src/components/Settings/Settings.css
@@ -77,7 +77,7 @@
 .form__desc {
     margin-top: 10px;
     font-size: 13px;
-    color: rgba(74, 74, 74, 0.7);
+    color: var(--scolor);
 }
 
 .form__desc--top {
diff --git a/client/src/components/ui/Checkbox.css b/client/src/components/ui/Checkbox.css
index bab88c796e4..2a556fb0faf 100644
--- a/client/src/components/ui/Checkbox.css
+++ b/client/src/components/ui/Checkbox.css
@@ -107,5 +107,5 @@
 .checkbox__label-subtitle {
     display: block;
     line-height: 1.5;
-    color: rgba(74, 74, 74, 0.7);
+    color: var(--scolor);
 }
diff --git a/client/src/components/ui/Footer.css b/client/src/components/ui/Footer.css
index 66fbe5e2095..fd0dca2b535 100644
--- a/client/src/components/ui/Footer.css
+++ b/client/src/components/ui/Footer.css
@@ -18,6 +18,11 @@
     align-items: center;
 }
 
+.footer__column--theme {
+    min-width: 220px;
+    margin-bottom: 0;
+}
+
 .footer__column--language {
     min-width: 220px;
     margin-bottom: 0;
@@ -49,6 +54,11 @@
     }
 
     .footer__column--language {
+        min-width: initial;
+        margin-left: 20px;
+    }
+
+    .footer__column--theme {
         min-width: initial;
         margin-left: auto;
     }
diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
index 393e16fe8cc..c1d1b40e5d1 100644
--- a/client/src/components/ui/Footer.js
+++ b/client/src/components/ui/Footer.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
 
-import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants';
+import { REPOSITORY, PRIVACY_POLICY_LINK, THEMES } from '../../helpers/constants';
 import { LANGUAGES } from '../../helpers/twosky';
 import i18n from '../../i18n';
 
@@ -10,6 +11,7 @@ import Version from './Version';
 import './Footer.css';
 import './Select.css';
 import { setHtmlLangAttr } from '../../helpers/helpers';
+import { changeTheme } from '../../actions';
 
 const linksData = [
     {
@@ -29,6 +31,11 @@ const linksData = [
 
 const Footer = () => {
     const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
+    const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
+    const isLoggedIn = profileName !== '';
 
     const getYear = () => {
         const today = new Date();
@@ -41,6 +48,11 @@ const Footer = () => {
         setHtmlLangAttr(value);
     };
 
+    const onThemeChanged = (event) => {
+        const { value } = event.target;
+        dispatch(changeTheme(value));
+    };
+
     const renderCopyright = () => <div className="footer__column">
         <div className="footer__copyright">
             {t('copyright')} &copy; {getYear()}{' '}
@@ -58,6 +70,25 @@ const Footer = () => {
             {t(name)}
         </a>);
 
+    const renderThemeSelect = (currentTheme, isLoggedIn) => {
+        if (!isLoggedIn) {
+            return '';
+        }
+
+        return <select
+            className="form-control select select--theme"
+            value={currentTheme}
+            onChange={onThemeChanged}
+        >
+            {Object.values(THEMES)
+                .map((theme) => (
+                    <option key={theme} value={theme}>
+                        {t(`theme_${theme}`)}
+                    </option>
+                ))}
+        </select>;
+    };
+
     return (
         <>
             <footer className="footer">
@@ -66,6 +97,9 @@ const Footer = () => {
                         <div className="footer__column footer__column--links">
                             {renderLinks(linksData)}
                         </div>
+                        <div className="footer__column footer__column--theme">
+                            {renderThemeSelect(currentTheme, isLoggedIn)}
+                        </div>
                         <div className="footer__column footer__column--language">
                             <select
                                 className="form-control select select--language"
diff --git a/client/src/components/ui/Modal.css b/client/src/components/ui/Modal.css
index dc48bd7880c..b22b97094c5 100644
--- a/client/src/components/ui/Modal.css
+++ b/client/src/components/ui/Modal.css
@@ -11,6 +11,7 @@
 .ReactModal__Overlay--after-open {
     opacity: 1;
     transition: opacity 150ms ease-out;
+    background-color: var(--modal-overlay-bgcolor) !important;
 }
 
 .ReactModal__Content {
diff --git a/client/src/components/ui/ReactTable.css b/client/src/components/ui/ReactTable.css
index e8b1f4cab20..820ba03f2b3 100644
--- a/client/src/components/ui/ReactTable.css
+++ b/client/src/components/ui/ReactTable.css
@@ -13,6 +13,26 @@
     overflow: visible;
 }
 
+.ReactTable .rt-noData {
+    color: var(--rt-nodata-color);
+    background-color: var(--rt-nodata-bgcolor);
+}
+
+.ReactTable .-loading {
+    color: var(--rt-nodata-color);
+    background-color: var(--rt-nodata-bgcolor);
+}
+
+.ReactTable .-pagination input, .ReactTable .-pagination select {
+    color: var(--rt-nodata-color);
+    background-color: var(--rt-nodata-bgcolor);
+}
+
+[data-theme=dark] .ReactTable .-pagination .-btn {
+    color: var(--scolor);
+    background-color: var(--ctrl-bgcolor);
+}
+
 .rt-tr-group.logs__row--red {
     background-color: rgba(223, 56, 18, 0.05);
 }
diff --git a/client/src/components/ui/Select.css b/client/src/components/ui/Select.css
index ca428ff1e2d..4150fb771da 100644
--- a/client/src/components/ui/Select.css
+++ b/client/src/components/ui/Select.css
@@ -1,8 +1,25 @@
+.select.select--theme {
+    height: 45px;
+    padding: 0 32px 2px 11px;
+    outline: 0;
+    border-color: var(--ctrl-select-bgcolor);
+    background-image: url("./svg/chevron-down.svg");
+    background-repeat: no-repeat;
+    background-position: right 9px center;
+    background-size: 17px 20px;
+    appearance: none;
+    cursor: pointer;
+}
+
+.select--theme::-ms-expand {
+    opacity: 0;
+}
+
 .select.select--language {
     height: 45px;
     padding: 0 32px 2px 33px;
     outline: 0;
-    border-color: rgba(69, 79, 94, 0.12);
+    border-color: var(--ctrl-select-bgcolor);
     background-image: url("./svg/globe.svg"), url("./svg/chevron-down.svg");
     background-repeat: no-repeat, no-repeat;
     background-position: left 11px center, right 9px center;
@@ -16,8 +33,9 @@
 }
 
 .basic-multi-select .select__control {
-    border: 1px solid rgba(0, 40, 100, 0.12);
+    border: 1px solid var(--card-border-color);;
     border-radius: 3px;
+    background-color: var(--ctrl-bgcolor);
 }
 
 .basic-multi-select .select__control:hover {
@@ -36,4 +54,16 @@
 
 .basic-multi-select .select__menu {
     z-index: 3;
+    background-color: var(--ctrl-bgcolor);
+}
+
+[data-theme=dark] .basic-multi-select .select__option:hover,
+[data-theme=dark] .basic-multi-select .select__option--is-focused,
+[data-theme=dark] .basic-multi-select .select__option--is-focused:hover {
+    background-color: var(--ctrl-select-bgcolor);
+    color: var(--ctrl-dropdown-color);
+}
+
+[data-theme=dark] .select__multi-value__remove svg {
+    filter: invert(1);
 }
diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css
index fac3d80adf1..6b6531ad2e2 100644
--- a/client/src/components/ui/Tabler.css
+++ b/client/src/components/ui/Tabler.css
@@ -85,9 +85,9 @@ body {
     font-size: 0.9375rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #495057;
+    color: var(--mcolor);
     text-align: left;
-    background-color: #f5f7fb;
+    background-color: var(--bgcolor);
 }
 
 [tabindex="-1"]:focus {
@@ -1943,10 +1943,10 @@ pre code {
     padding: 0.375rem 0.75rem;
     font-size: 0.9375rem;
     line-height: 1.6;
-    color: #495057;
-    background-color: #fff;
+    color: var(--mcolor);
+    background-color: var(--card-bgcolor);
     background-clip: padding-box;
-    border: 1px solid rgba(0, 40, 100, 0.12);
+    border: 1px solid var(--card-border-color);
     border-radius: 3px;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -1957,8 +1957,8 @@ pre code {
 }
 
 .form-control:focus {
-    color: #495057;
-    background-color: #fff;
+    color: var(--mcolor);
+    background-color: var(--ctrl-bgcolor);
     border-color: #1991eb;
     outline: 0;
     box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
@@ -1991,7 +1991,8 @@ pre code {
 
 .form-control:disabled,
 .form-control[readonly] {
-    background-color: #f8f9fa;
+    background-color: var(--form-disabled-bgcolor);
+    color: var(--form-disabled-color);
     opacity: 1;
 }
 
@@ -2580,7 +2581,7 @@ fieldset:disabled a.btn {
 
 .btn-success {
     color: #fff;
-    background-color: #5eba00;
+    background-color: var(--btn-success-bgcolor);
     border-color: #5eba00;
 }
 
@@ -3244,7 +3245,7 @@ tbody.collapse.show {
     color: #495057;
     text-align: left;
     list-style: none;
-    background-color: #fff;
+    background-color: var(--ctrl-bgcolor);
     background-clip: padding-box;
     border: 1px solid rgba(0, 40, 100, 0.12);
     border-radius: 3px;
@@ -3348,7 +3349,7 @@ tbody.collapse.show {
     padding: 0.25rem 1.5rem;
     clear: both;
     font-weight: 400;
-    color: #212529;
+    color: var(--ctrl-dropdown-color);
     text-align: inherit;
     white-space: nowrap;
     background-color: transparent;
@@ -3357,9 +3358,9 @@ tbody.collapse.show {
 
 .dropdown-item:hover,
 .dropdown-item:focus {
-    color: #16181b;
+    color: var(--ctrl-dropdown-color-focus);
     text-decoration: none;
-    background-color: #f8f9fa;
+    background-color: var(--ctrl-dropdown-bgcolor-focus);
 }
 
 .dropdown-item.active,
@@ -3794,11 +3795,11 @@ tbody.collapse.show {
     height: 2.375rem;
     padding: 0.5rem 1.75rem 0.5rem 0.75rem;
     line-height: 1.5;
-    color: #495057;
+    color: var(--mcolor);
     vertical-align: middle;
-    background: #fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
+    background: var(--card-bgcolor) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
     background-size: 8px 10px;
-    border: 1px solid rgba(0, 40, 100, 0.12);
+    border: 1px solid var(--card-border-color);
     border-radius: 3px;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -4469,9 +4470,9 @@ tbody.collapse.show {
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
-    background-color: #fff;
+    background-color: var(--card-bgcolor);
     background-clip: border-box;
-    border: 1px solid rgba(0, 40, 100, 0.12);
+    border: 1px solid var(--card-border-color);
     border-radius: 3px;
 }
 
@@ -5475,9 +5476,9 @@ button.close {
     flex-direction: column;
     width: 100%;
     pointer-events: auto;
-    background-color: #fff;
+    background-color: var(--card-bgcolor);
     background-clip: padding-box;
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--card-border-color);
     border-radius: 3px;
     outline: 0;
 }
@@ -10268,8 +10269,8 @@ body.fixed-header .page {
 .header {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
-    background: #fff;
-    border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+    background: var(--header-bgcolor);
+    border-bottom: 1px solid var(--border-color);
 }
 
 body.fixed-header .header {
@@ -10325,6 +10326,10 @@ body.fixed-header .header {
     width: auto;
 }
 
+[data-theme=dark] .header-brand-img {
+    filter:invert(1);
+}
+
 .header-avatar {
     width: 2rem;
     height: 2rem;
@@ -10382,8 +10387,8 @@ body.fixed-header .header {
 }
 
 .footer {
-    background: #fff;
-    border-top: 1px solid rgba(0, 40, 100, 0.12);
+    background: var(--card-bgcolor);
+    border-top: 1px solid var(--card-border-color);
     font-size: 0.875rem;
     padding: 1.25rem 0;
     color: #9aa0ac;
@@ -13686,13 +13691,17 @@ Card alert
     content: "";
 }
 
+[data-theme=dark] .dropdown-menu-arrow:before {
+    border-bottom-color: var(--ctrl-bgcolor);
+}
+
 .dropdown-menu-arrow:after {
     position: absolute;
     top: -5px;
     left: 12px;
     display: inline-block;
     border-right: 5px solid transparent;
-    border-bottom: 5px solid #fff;
+    border-bottom: 5px solid var(--ctrl-bgcolor);
     border-left: 5px solid transparent;
     content: "";
 }
diff --git a/client/src/components/ui/Tooltip.css b/client/src/components/ui/Tooltip.css
index 6712f9d15f6..fe41623b188 100644
--- a/client/src/components/ui/Tooltip.css
+++ b/client/src/components/ui/Tooltip.css
@@ -4,6 +4,11 @@
     box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
 }
 
+[data-theme=dark] .tooltip-container {
+    background-color: var(--ctrl-select-bgcolor);
+    color: var(--mcolor);
+}
+
 .tooltip-custom--narrow {
     max-width: 14rem;
 }
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index c13ab952423..4f6803cb075 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -227,6 +227,14 @@ export const BLOCKING_MODES = {
     custom_ip: 'custom_ip',
 };
 
+// Note that translation strings contain these modes (theme_CONSTANT)
+// i.e. theme_auto, theme_light.
+export const THEMES = {
+    auto: 'auto',
+    dark: 'dark',
+    light: 'light',
+};
+
 export const WHOIS_ICONS = {
     location: 'location',
     orgname: 'network',
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index af65589d969..bc56fd425c1 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -670,6 +670,15 @@ export const setHtmlLangAttr = (language) => {
     window.document.documentElement.lang = language;
 };
 
+/**
+ * Sets UI theme.
+ *
+ * @param theme
+ */
+export const setUITheme = (theme) => {
+    document.body.dataset.theme = theme;
+};
+
 /**
  * @param values {object}
  * @returns {object}
diff --git a/client/src/reducers/dashboard.js b/client/src/reducers/dashboard.js
index 3709f10a21f..f201b2e06d6 100644
--- a/client/src/reducers/dashboard.js
+++ b/client/src/reducers/dashboard.js
@@ -112,14 +112,6 @@ const dashboard = handleActions(
             return newState;
         },
 
-        [actions.getLanguageSuccess]: (state, { payload }) => {
-            const newState = {
-                ...state,
-                language: payload,
-            };
-            return newState;
-        },
-
         [actions.getClientsRequest]: (state) => ({
             ...state,
             processingClients: true,
@@ -148,8 +140,13 @@ const dashboard = handleActions(
         [actions.getProfileSuccess]: (state, { payload }) => ({
             ...state,
             name: payload.name,
+            theme: payload.theme,
             processingProfile: false,
         }),
+        [actions.changeThemeSuccess]: (state, { payload }) => ({
+            ...state,
+            theme: payload.theme,
+        }),
     },
     {
         processing: true,
@@ -168,6 +165,7 @@ const dashboard = handleActions(
         autoClients: [],
         supportedTags: [],
         name: '',
+        theme: 'auto',
         checkUpdateFlag: false,
     },
 );