diff --git a/.gitignore b/.gitignore
index 65ca5ca2..d51c8f46 100644
--- a/.gitignore
+++ b/.gitignore
@@ -125,3 +125,7 @@ static/locales/*
 
 # No docker-compose.yml files
 docker-compose.yml
+
+static/css/themes/*
+!static/css/themes/default.css
+!static/css/themes/*.css.example
\ No newline at end of file
diff --git a/src/routes/ui.js b/src/routes/ui.js
index 32a498e3..b9c2d031 100644
--- a/src/routes/ui.js
+++ b/src/routes/ui.js
@@ -105,6 +105,9 @@ const handlePage = async (req, res) => {
     await updateAvailableForms(config.icons);
     data.available_icon_styles_json = JSON.stringify(config.icons);
 
+    const themes = await getAvailableThemes();
+    data.available_themes_json = JSON.stringify(themes);
+
     // Build available items list
     const availableItems = [-1, -2, -3, -4, -5, -6, -7, -8];
     //const keys = Object.keys(InventoryItemId);
@@ -115,11 +118,7 @@ const handlePage = async (req, res) => {
     data.available_items_json = JSON.stringify(availableItems);    
 
     // Build available areas list
-    const areas = [];
-    const areaKeys = Object.keys(config.areas).sort();
-    areaKeys.forEach(key => {
-        areas.push({ 'area': key });
-    });
+    const areas = Object.keys(config.areas).sort().map(x => { return { 'area': x }; });
     data.areas = areas;
 
     // Available raid boss filters
@@ -188,8 +187,8 @@ const handlePage = async (req, res) => {
     }
 
     if (city) {
-        for (let i = 0; i < areaKeys.length; i++) {
-            const key = areaKeys[i];
+        for (let i = 0; i < areas.length; i++) {
+            const key = areas[i];
             if (city.toLowerCase() === key.toLowerCase()) {
                 const area = config.areas[key];
                 lat = parseFloat(area.lat);
@@ -239,6 +238,24 @@ const getAvailableTileservers = () => {
     return tileservers;
 };
 
+const getAvailableThemes = async () => {
+    const themes = {};
+    const themesDir = path.resolve(__dirname, '../../static/css/themes');
+    const files = await fs.promises.readdir(themesDir);
+    if (files) {
+        files.forEach(file => {
+            const ext = path.extname(file);
+            if (ext !== '.css') {
+                return;
+            }
+            let name = path.basename(file, ext);
+            name = name.charAt(0).toUpperCase() + name.slice(1);
+            themes[name] = `/css/themes/${file}`;
+        });
+    }
+    return themes;
+};
+
 const updateAvailableForms = async (icons) => {
     for (const icon of Object.values(icons)) {
         if (icon.path.startsWith('/')) {
diff --git a/src/views/header.mustache b/src/views/header.mustache
index 555932fd..584587ff 100644
--- a/src/views/header.mustache
+++ b/src/views/header.mustache
@@ -19,6 +19,7 @@
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@v0.70.0/dist/L.Control.Locate.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/all.css" />
+    <link rel="stylesheet" type="text/css" href="/css/themes/default.css" class="theme-css" />
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
diff --git a/src/views/index.mustache b/src/views/index.mustache
index 98d44eb2..aff793d8 100644
--- a/src/views/index.mustache
+++ b/src/views/index.mustache
@@ -49,6 +49,7 @@
         const availableItems = {{{available_items_json}}};
         const availableTileservers = {{{available_tileservers_json}}};
         const availableIconStyles = {{{available_icon_styles_json}}};
+        const availableThemes = {{{available_themes_json}}};
         const availableRaidBosses = {{{available_raid_bosses_json}}};
         const availableQuestRewards = {{{available_quest_rewards_json}}};
         const availableNestPokemon = {{{available_nest_pokemon_json}}};
@@ -818,7 +819,7 @@
                 </div>
                 <div class="modal-footer">
                     <div class="mr-auto">
-                        <div class="btn-group">
+                        <div class="form-group">
                             <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#mapstyleModal">{{filter_mapstyle}}</button>
                             &nbsp;
                             <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#iconstyleModal">{{filter_iconstyle}}</button>
@@ -833,6 +834,10 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="form-group">
+                            Theme
+                            <select class="form-control" id="select-theme" required></select>
+                        </div>
                     </div>
                     <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">{{filter_cancel}}</button>
                     <button type="button" id="saveSettings" class="btn btn-sm btn-primary">{{filter_save}}</button>
@@ -909,4 +914,4 @@
         </div>
     </div>
 
-{{> footer}}
+{{> footer}}
\ No newline at end of file
diff --git a/src/views/navbar.mustache b/src/views/navbar.mustache
index 7916e24f..abf4c8e5 100644
--- a/src/views/navbar.mustache
+++ b/src/views/navbar.mustache
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+<nav class="navbar navbar-expand-lg fixed-top">
     <div class="navbar-header">
         <a class="navbar-brand" href="/"><img class="align-middle" src="/custom/{{favicon}}" border="0" height="32px"></a>
         <a class="navbar-brand" href="/">{{title}}</a>        
diff --git a/static/css/index.css b/static/css/index.css
index fb843bb5..87a587b0 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -130,11 +130,6 @@ fieldset[disabled] .btn-on.active {
     background-color: #C86464;
 }
 
-.btn-off:active,
-.btn-off.active,
-.open .dropdown-toggle.btn-off {
-}
-
 .btn-off.disabled,
 .btn-off[disabled],
 fieldset[disabled] .btn-off,
@@ -177,10 +172,6 @@ fieldset[disabled] .btn-off.active {
     background-color: #6464C8;
 }
 
-.btn-size:active,
-.btn-size.active,
-.open .dropdown-toggle.btn-size {
-}
 
 .btn-size.disabled,
 .btn-size[disabled],
@@ -638,6 +629,7 @@ img {
   pointer-events: none;
 }
 
+/*
 .theme-dark #settingsModal,
 .theme-dark #filtersModal,
 .theme-dark #searchModal,
@@ -665,6 +657,7 @@ img {
 .theme-dark div.DTS div.dataTables_scrollBody {
     background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
 }
+*/
 
 hr {
     border: solid rgb(31, 31, 31) 1px;
@@ -674,5 +667,4 @@ hr {
 .theme-dark hr {
     border: solid white 1px;
     border-radius: 30px;
-}
-
+}
\ No newline at end of file
diff --git a/static/css/themes/blue.css.example b/static/css/themes/blue.css.example
new file mode 100644
index 00000000..86285582
--- /dev/null
+++ b/static/css/themes/blue.css.example
@@ -0,0 +1,132 @@
+/* Popup marker content colors */
+.leaflet-popup-content-wrapper {
+    background-color: rgb(33, 37, 31);
+    color: lightgray;
+}
+
+/* Navbar colors */
+nav.navbar { 
+    background-color: dodgerblue;
+    color: black;
+}
+
+/* Navbar item colors */
+.nav-item > a { 
+    background-color: dodgerblue;
+    color: black;
+}
+
+/* Navbar title colors */
+a.navbar-brand {
+    background-color: dodgerblue;
+    color: white;
+}
+
+/* Filter/Configure button colors */
+.btn-sm.btn-primary,
+.btn-sm.btn-primary.disabled {
+    background-color: dodgerblue;
+}
+
+/* Cancel button colors */
+.btn-sm.btn-secondary {
+    background-color: gray;
+}
+
+/* Filter hide and off button colors */
+.btn-sm.btn-off,
+.btn-sm.btn-off .active {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons not selected colors */
+.btn-sm.btn-on {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons selected colors */
+.btn-sm.btn-on.active {
+    background-color: #00AF00;
+    color: white;
+}
+
+/* Filter sizing buttons (M/XL) - Selected */
+.btn-size.active.select-button {
+    background-color: #0000AF;
+}
+
+/* Filter sizing buttons (M/XL) - Not Selected */
+.btn-size.select-button {
+    background-color: gray;
+}
+
+/* Save/OK/Close button colors */
+.btn-danger {
+    background-color: #DC3545;
+}
+
+/* Modal header colors */
+.modal > .modal-dialog > .modal-content > .modal-header {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Modal table columns */
+th {
+    background-color: dodgerblue;
+}
+
+/* Modal body/content colors */
+.modal-body, .modal-content {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Modal footer colors */
+.modal-footer {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Odd numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgb(34, 34, 34);
+    color: white;
+}
+
+/* Even numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(even) {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Group header colors */
+table.dataTable tr.dtrg-group td {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Close button (x) colors */
+button.close {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Button control colors */
+.leaflet-control > a {
+    background-color: seashell;
+    color: black;
+}
+
+/* Button control hover colors */
+.leaflet-control > a:hover {
+    background-color: rgb(202, 202, 202);
+    color: black;
+}
+
+/* Empty space in filters */
+div.DTS div.dataTables_scrollBody {
+    background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
+}
\ No newline at end of file
diff --git a/static/css/themes/dark.css.example b/static/css/themes/dark.css.example
new file mode 100644
index 00000000..d32b4e37
--- /dev/null
+++ b/static/css/themes/dark.css.example
@@ -0,0 +1,132 @@
+/* Popup marker content colors */
+.leaflet-popup-content-wrapper {
+    background-color: rgb(33, 37, 31);
+    color: lightgray;
+}
+
+/* Navbar colors */
+nav.navbar { 
+    background-color: rgb(33, 37, 31);
+    color: gray;
+}
+
+/* Navbar item colors */
+.nav-item > a { 
+    background-color: rgb(33, 37, 31);
+    color: darkgray;
+}
+
+/* Navbar title colors */
+a.navbar-brand {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Filter/Configure button colors */
+.btn-sm.btn-primary,
+.btn-sm.btn-primary.disabled {
+    background-color: dodgerblue;
+}
+
+/* Cancel button colors */
+.btn-sm.btn-secondary {
+    background-color: gray;
+}
+
+/* Filter hide and off button colors */
+.btn-sm.btn-off,
+.btn-sm.btn-off .active {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons not selected colors */
+.btn-sm.btn-on {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons selected colors */
+.btn-sm.btn-on.active {
+    background-color: #00AF00;
+    color: white;
+}
+
+/* Filter sizing buttons (M/XL) - Selected */
+.btn-size.active.select-button {
+    background-color: #0000AF;
+}
+
+/* Filter sizing buttons (M/XL) - Not Selected */
+.btn-size.select-button {
+    background-color: gray;
+}
+
+/* Save/OK/Close button colors */
+.btn-danger {
+    background-color: #DC3545;
+}
+
+/* Modal header colors */
+.modal > .modal-dialog > .modal-content > .modal-header {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Modal table columns */
+th {
+    background-color: rgb(34, 32, 32);
+}
+
+/* Modal body/content colors */
+.modal-body, .modal-content {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Modal footer colors */
+.modal-footer {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Odd numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgb(34, 34, 34);
+    color: white;
+}
+
+/* Even numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(even) {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Group header colors */
+table.dataTable tr.dtrg-group td {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Close button (x) colors */
+button.close {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Button control colors */
+.leaflet-control > a {
+    background-color: seashell;
+    color: black;
+}
+
+/* Button control hover colors */
+.leaflet-control > a:hover {
+    background-color: rgb(202, 202, 202);
+    color: black;
+}
+
+/* Empty space in filters */
+div.DTS div.dataTables_scrollBody {
+    background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
+}
\ No newline at end of file
diff --git a/static/css/themes/default.css b/static/css/themes/default.css
new file mode 100644
index 00000000..2da9f9c8
--- /dev/null
+++ b/static/css/themes/default.css
@@ -0,0 +1,132 @@
+/* Popup marker content colors */
+.leaflet-popup-content-wrapper {
+    background-color: rgb(33, 37, 31);
+    color: lightgray;
+}
+
+/* Navbar colors */
+nav.navbar { 
+    background-color: #343A40;
+    color: gray;
+}
+
+/* Navbar item colors */
+.nav-item > a { 
+    background-color: #343A40;
+    color: darkgray;
+}
+
+/* Navbar title colors */
+a.navbar-brand {
+    background-color: #343A40;
+    color: white;
+}
+
+/* Filter/Configure button colors */
+.btn-sm.btn-primary,
+.btn-sm.btn-primary.disabled {
+    background-color: dodgerblue;
+}
+
+/* Cancel button colors */
+.btn-sm.btn-secondary {
+    background-color: gray;
+}
+
+/* Filter hide and off button colors */
+.btn-off,
+.btn-off .active {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons not selected colors */
+.btn-on {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons selected colors */
+.btn-on.active {
+    background-color: #00AF00;
+    color: white;
+}
+
+/* Filter sizing buttons (M/XL) - Selected */
+.btn-size.active.select-button {
+    background-color: #0000AF;
+}
+
+/* Filter sizing buttons (M/XL) - Not Selected */
+.btn-size.select-button {
+    background-color: gray;
+}
+
+/* Save/OK/Close button colors */
+.btn-danger {
+    background-color: #DC3545;
+}
+
+/* Modal header colors */
+.modal > .modal-dialog > .modal-content > .modal-header {
+    background-color: #21251F;
+    color: white;
+}
+
+/* Modal table columns */
+th {
+    background-color: rgb(32, 32, 32);
+}
+
+/* Modal body/content colors */
+.modal-body, .modal-content {
+    background-color: #21251F;
+    color: white;
+}
+
+/* Modal footer colors */
+.modal-footer {
+    background-color: #21251F;
+    color: white;
+}
+
+/* Odd numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgb(34, 34, 34);
+    color: white;
+}
+
+/* Even numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(even) {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Group header colors */
+table.dataTable tr.dtrg-group td {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Close button (x) colors */
+button.close {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Button control colors */
+.leaflet-control > a {
+    background-color: seashell;
+    color: black;
+}
+
+/* Button control hover colors */
+.leaflet-control > a:hover {
+    background-color: darkgray;
+    color: black;
+}
+
+/* Empty space in filters */
+div.DTS div.dataTables_scrollBody {
+    background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
+}
\ No newline at end of file
diff --git a/static/css/themes/green.css.example b/static/css/themes/green.css.example
new file mode 100644
index 00000000..5959871d
--- /dev/null
+++ b/static/css/themes/green.css.example
@@ -0,0 +1,132 @@
+/* Popup marker content colors */
+.leaflet-popup-content-wrapper {
+    background-color: rgb(33, 37, 31);
+    color: lightgray;
+}
+
+/* Navbar colors */
+nav.navbar { 
+    background-color: #02B875;
+    color: #9AE3C8;
+}
+
+/* Navbar item colors */
+.nav-item > a { 
+    background-color: #02B875;
+    color: #9AE3C8;
+}
+
+/* Navbar title colors */
+a.navbar-brand {
+    background-color: #02B875;
+    color: white;
+}
+
+/* Filter/Configure button colors */
+.btn-sm.btn-primary,
+.btn-sm.btn-primary.disabled {
+    background-color: dodgerblue;
+}
+
+/* Cancel button colors */
+.btn-sm.btn-secondary {
+    background-color: gray;
+}
+
+/* Filter hide and off button colors */
+.btn-sm.btn-off,
+.btn-sm.btn-off .active {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons not selected colors */
+.btn-sm.btn-on {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons selected colors */
+.btn-sm.btn-on.active {
+    background-color: #00AF00;
+    color: white;
+}
+
+/* Filter sizing buttons (M/XL) - Selected */
+.btn-size.active.select-button {
+    background-color: #0000AF;
+}
+
+/* Filter sizing buttons (M/XL) - Not Selected */
+.btn-size.select-button {
+    background-color: gray;
+}
+
+/* Save/OK/Close button colors */
+.btn-danger {
+    background-color: #DC3545;
+}
+
+/* Modal header colors */
+.modal > .modal-dialog > .modal-content > .modal-header {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Modal table columns */
+th {
+    background-color: #02B875;
+}
+
+/* Modal body/content colors */
+.modal-body, .modal-content {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Modal footer colors */
+.modal-footer {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Odd numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgb(34, 34, 34);
+    color: white;
+}
+
+/* Even numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(even) {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Group header colors */
+table.dataTable tr.dtrg-group td {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Close button (x) colors */
+button.close {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Button control colors */
+.leaflet-control > a {
+    background-color: seashell;
+    color: black;
+}
+
+/* Button control hover colors */
+.leaflet-control > a:hover {
+    background-color: rgb(202, 202, 202);
+    color: black;
+}
+
+/* Empty space in filters */
+div.DTS div.dataTables_scrollBody {
+    background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
+}
\ No newline at end of file
diff --git a/static/css/themes/light.css.example b/static/css/themes/light.css.example
new file mode 100644
index 00000000..f82cf5df
--- /dev/null
+++ b/static/css/themes/light.css.example
@@ -0,0 +1,132 @@
+/* Popup marker content colors */
+.leaflet-popup-content-wrapper {
+    background-color: lightgray;
+    color: black;
+}
+
+/* Navbar colors */
+nav.navbar { 
+    background-color: #777a7e;
+    color: gray;
+}
+
+/* Navbar item colors */
+.nav-item > a { 
+    background-color: #777a7e;
+    color: black;
+}
+
+/* Navbar title colors */
+a.navbar-brand {
+    background-color: #777a7e;
+    color: white;
+}
+
+/* Filter/Configure button colors */
+.btn-sm.btn-primary,
+.btn-sm.btn-primary.disabled {
+    background-color: dodgerblue;
+}
+
+/* Cancel button colors */
+.btn-sm.btn-secondary {
+    background-color: gray;
+}
+
+/* Filter hide and off button colors */
+.btn-off,
+.btn-off .active {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons not selected colors */
+.btn-on {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons selected colors */
+.btn-on.active {
+    background-color: #00AF00;
+    color: white;
+}
+
+/* Filter sizing buttons (M/XL) - Selected */
+.btn-size.active.select-button {
+    background-color: #0000AF;
+}
+
+/* Filter sizing buttons (M/XL) - Not Selected */
+.btn-size.select-button {
+    background-color: gray;
+}
+
+/* Save/OK/Close button colors */
+.btn-danger {
+    background-color: #DC3545;
+}
+
+/* Modal header colors */
+.modal > .modal-dialog > .modal-content > .modal-header {
+    background-color: lightgray;
+    color: black;
+}
+
+/* Modal table columns */
+th {
+    background-color: rgb(32, 32, 32);
+}
+
+/* Modal body/content colors */
+.modal-body, .modal-content {
+    background-color: lightgray;
+    color: black;
+}
+
+/* Modal footer colors */
+.modal-footer {
+    background-color: lightgray;
+    color: black;
+}
+
+/* Odd numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgb(34, 34, 34);
+    color: white;
+}
+
+/* Even numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(even) {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Group header colors */
+table.dataTable tr.dtrg-group td {
+    background-color: gray;
+    color: black;
+}
+
+/* Close button (x) colors */
+button.close {
+    background-color: lightgray;
+    color: black;
+}
+
+/* Button control colors */
+.leaflet-control > a {
+    background-color: seashell;
+    color: black;
+}
+
+/* Button control hover colors */
+.leaflet-control > a:hover {
+    background-color: darkgray;
+    color: black;
+}
+
+/* Empty space in filters */
+div.DTS div.dataTables_scrollBody {
+    background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
+}
\ No newline at end of file
diff --git a/static/css/themes/omg.css.example b/static/css/themes/omg.css.example
new file mode 100644
index 00000000..363070af
--- /dev/null
+++ b/static/css/themes/omg.css.example
@@ -0,0 +1,131 @@
+/* Popup marker content colors */
+.leaflet-popup-content-wrapper {
+    background-color: rgb(33, 37, 31);
+    color: lightgray;
+}
+
+/* Navbar colors */
+nav.navbar { 
+    background-color: #02B875;
+    color: gray;
+}
+
+/* Navbar item colors */
+.nav-item > a { 
+    background-color: #02B875;
+    color: #9AE3C8;
+}
+
+/* Navbar title colors */
+a.navbar-brand {
+    background-color: #02B875;
+    color: white;
+}
+
+/* Filter/Configure button colors */
+.btn-sm.btn-primary,
+.btn-sm.btn-primary.disabled {
+    background-color: pink;
+}
+
+/* Cancel button colors */
+.btn-sm.btn-secondary {
+    background-color: blue;
+}
+
+/* Filter hide and off button colors */
+.btn-sm.btn-off,
+.btn-sm.btn-off .active {
+    background-color: orange;
+    color: white;
+}
+
+/* Filter show and on buttons not selected colors */
+.btn-sm.btn-on {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons selected colors */
+.btn-sm.btn-on.active {
+    background-color: purple;
+    color: white;
+}
+
+/* Filter sizing buttons (M/XL) - Selected */
+.btn-size.active.select-button {
+    background-color: green;
+}
+
+/* Filter sizing buttons (M/XL) - Not Selected */
+.btn-size.select-button {
+    background-color: yellow;
+}
+
+/* Save/OK/Close button colors */
+.btn-danger {
+    background-color: white;
+}
+
+/* Modal header colors */
+.modal > .modal-dialog > .modal-content > .modal-header {
+    background-color: hotpink;
+    color: white;
+}
+
+/* Modal table columns */
+th {
+    background-color: red;
+}
+
+/* Modal body/content colors */
+.modal-body, .modal-content {
+    background-color: orange;
+    color: white;
+}
+
+/* Modal footer colors */
+.modal-footer {
+    background-color: black;
+    color: white;
+}
+
+/* Odd numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: aqua;
+    color: white;
+}
+
+/* Even numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(even) {
+    background-color: brown;
+    color: white;
+}
+
+/* Group header colors */
+table.dataTable tr.dtrg-group td {
+    background-color: red;
+    color: white;
+}
+
+/* Close button (x) colors */
+button.close {
+    background-color: darkblue;
+    color: white;
+}
+
+/* Button control colors */
+.leaflet-control > a {
+    background-color: red;
+    color: black;
+}
+
+.leaflet-control > a:hover {
+    background-color: darkcyan;
+    color: black;
+}
+
+/* Empty space in filters */
+div.DTS div.dataTables_scrollBody {
+    background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
+}
\ No newline at end of file
diff --git a/static/js/index.js b/static/js/index.js
index 40a618dc..832367b1 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -91,6 +91,7 @@ let showSubmissionCells;
 let availableForms = [];
 let selectedTileserver = 'Default';
 let selectedIconStyle = 'Default';
+let selectedTheme = 'Default';
 
 let pokemonFilterLoaded = false;
 let questFilterLoaded = false;
@@ -256,6 +257,24 @@ $(function () {
             }));
         }
     }
+    
+    const availableThemeKeys = Object.keys(availableThemes);
+    availableThemeKeys.sort();
+    $('#select-theme').append($('<option>', {
+        value: '/css/themes/default.css',
+        text: 'Default',
+        selected: selectedIconStyle === 'Default'
+    }));
+    for (let i = 0; i < availableThemeKeys.length; i++) {
+        const key = availableThemeKeys[i];
+        if (key !== 'Default') {
+            $('#select-theme').append($('<option>', {
+                value: availableThemes[key],
+                text: key,
+                selected: key === selectedTheme
+            }));
+        }
+    }
 
     deviceOnlineIcon = L.icon({
         iconUrl: '/img/device/0.png',
@@ -402,6 +421,19 @@ $(function () {
         // TODO: Redraw markers/update icons for markers, invalidate map
     });
 
+    $('#select-theme').on('change', function () {
+        selectedTheme = this.value;
+        $('.theme-css').attr('href', selectedTheme);
+        store('theme', selectedTheme);
+    });
+
+    const oldThemeValue = retrieve('theme');
+    if (oldThemeValue !== null) {
+        selectedTheme = oldThemeValue;
+        $('#select-theme').val(selectedTheme);
+        $('#select-theme').change();
+    }
+
     $('#exportFilters').on('click', function () {
         let settings = {
             show_gyms: showGyms,