diff --git a/images/icons/dark.svg b/images/icons/dark.svg
new file mode 100644
index 0000000..d4b0cb1
--- /dev/null
+++ b/images/icons/dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" fill="#102A83">
+  <path d="M264 480A232 232 0 0132 248c0-94 54-178.28 137.61-214.67a16 16 0 0121.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200 31.34 0 59.57-5.07 81.61-14.67a16 16 0 0121.06 21.06C442.28 426 358 480 264 480z"/>
+</svg>
\ No newline at end of file
diff --git a/images/icons/light.svg b/images/icons/light.svg
new file mode 100644
index 0000000..044ac14
--- /dev/null
+++ b/images/icons/light.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" fill="#102A83">
+  <path d="M256 118a22 22 0 01-22-22V48a22 22 0 0144 0v48a22 22 0 01-22 22zM256 486a22 22 0 01-22-22v-48a22 22 0 0144 0v48a22 22 0 01-22 22zM369.14 164.86a22 22 0 01-15.56-37.55l33.94-33.94a22 22 0 0131.11 31.11l-33.94 33.94a21.93 21.93 0 01-15.55 6.44zM108.92 425.08a22 22 0 01-15.55-37.56l33.94-33.94a22 22 0 1131.11 31.11l-33.94 33.94a21.94 21.94 0 01-15.56 6.45zM464 278h-48a22 22 0 010-44h48a22 22 0 010 44zM96 278H48a22 22 0 010-44h48a22 22 0 010 44zM403.08 425.08a21.94 21.94 0 01-15.56-6.45l-33.94-33.94a22 22 0 0131.11-31.11l33.94 33.94a22 22 0 01-15.55 37.56zM142.86 164.86a21.89 21.89 0 01-15.55-6.44l-33.94-33.94a22 22 0 0131.11-31.11l33.94 33.94a22 22 0 01-15.56 37.55zM256 358a102 102 0 11102-102 102.12 102.12 0 01-102 102z"/>
+</svg>
\ No newline at end of file
diff --git a/images/icons/modePicker.svg b/images/icons/modePicker.svg
new file mode 100644
index 0000000..ded3f92
--- /dev/null
+++ b/images/icons/modePicker.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" fill="#102A83">
+  <path d="M256 32A224 224 0 0097.61 414.39 224 224 0 10414.39 97.61 222.53 222.53 0 00256 32zM64 256c0-105.87 86.13-192 192-192v384c-105.87 0-192-86.13-192-192z"/>
+</svg>
\ No newline at end of file
diff --git a/includes/head.php b/includes/head.php
index 7c2326e..d9754b3 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -42,6 +42,8 @@ function rootPath()
 <!-- Styling -->
 <link rel="stylesheet" href="<?php echo rootPath(); ?>styles/main.css?v=2">
 <link id="style" rel="stylesheet" href="<?php echo rootPath(); ?>styles/orange_theme.css">
+<!-- dark mode! coming soon...I hope -->
+<!-- <script type="module" src="<?php echo rootPath(); ?>js/color-modes.js"></script> -->
 <!-- metadata for googlebot -->
 <script type="application/ld+json">
   {
diff --git a/includes/nav.php b/includes/nav.php
index 289d8dc..93cbf5f 100644
--- a/includes/nav.php
+++ b/includes/nav.php
@@ -1,3 +1,9 @@
+<!-- stop nasty flash when dark mode loads -->
+<!-- <script>
+  const theme = localStorage.getItem('theme') || 'light';
+  document.documentElement.dataset.appliedMode = theme;
+</script> -->
+
 <!-- BEGIN nav -->
 <div id="pageTop">
   <header id="conf_id" class="headerImg">
@@ -26,6 +32,7 @@
       </div>
     </div>
   </header>
+
   <nav id="mainNavRow" class="navbar navbar-expand-md">
     <div class="container">
       <button class="navbar-toggler mt-1 collapsed nofocus" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -44,7 +51,7 @@
             <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
               Technical Program
             </a>
-            <div class="dropdown-menu mx-md-3 mx-lg-5">
+            <div class="dropdown-menu mx-md-3 mx-lg-4 mx-xl-5">
               <!-- <a class="dropdown-item" href="<?php echo rootPath() . 'program.php' ?>">
                 Main program
               </a> -->
@@ -76,26 +83,26 @@
             <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
               Attend
             </a>
-            <div class="dropdown-menu mx-md-3 mx-lg-5">
-              <a class="dropdown-item" href="<?php echo rootPath() . 'registration.php' ?>">
-                    Registration
-                  </a>
-              <a class="dropdown-item" href="<?php echo rootPath() . 'travel.php' ?>">
+            <div class="dropdown-menu mx-md-3 mx-lg-4 mx-xl-5"> -->
+          <!-- <a class="dropdown-item" href="<?php echo rootPath() . 'registration.php' ?>">
+                Registration
+              </a> -->
+          <!-- <a class="dropdown-item" href="<?php echo rootPath() . 'travel.php' ?>">
                 Venue & travel
-              </a>
-              <a class="dropdown-item" href="<?php echo rootPath() . 'accommodations.php' ?>">
+              </a> -->
+          <!-- <a class="dropdown-item" href="<?php echo rootPath() . 'accommodations.php' ?>">
                 Accommodations
               </a>
               <a class="dropdown-item" href="<?php echo rootPath() . 'tourism.php' ?>">
                 Tourism
-              </a>
-              <a class="dropdown-item" href="<?php echo rootPath() . 'support.php' ?>">
+              </a> -->
+          <!-- <a class="dropdown-item" href="<?php echo rootPath() . 'support.php' ?>">
                 Financial support
               </a>
               <a class="dropdown-item" href="<?php echo rootPath() . 'visas.php' ?>">
                 Visas
-              </a>
-              <a class="dropdown-item" href="<?php echo rootPath() . 'virtual.php' ?>">
+              </a> -->
+          <!-- <a class="dropdown-item" href="<?php echo rootPath() . 'virtual.php' ?>">
                 Remote attendance
               </a>
               <a class="dropdown-item" href="<?php echo rootPath() . 'swag.php' ?>">
@@ -103,8 +110,8 @@
               </a>
               <a class="dropdown-item" href="<?php echo rootPath() . 'conduct.php' ?>">
                 Code of conduct
-              </a>
-            </div>
+              </a> -->
+          <!-- </div>
           </li> -->
           <li class="nav-item">
             <a class="nav-link" href="<?php echo rootPath() . 'sponsors.php' ?>">
@@ -116,12 +123,55 @@
               Contact
             </a>
           </li>
+          <!-- <li class="nav-item dropdown color-modes">
+            <a class="nav-link" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
+              <svg class="bi my-1 theme-icon-active">
+                <use href="#circle-half"></use>
+              </svg>
+              <span id="bd-theme-text"></span>
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
+                  <svg class="bi me-2 opacity-50 theme-icon">
+                    <use href="#sun-fill"></use>
+                  </svg>
+                  Light
+                  <svg class="bi ms-auto d-none">
+                    <use href="#check2"></use>
+                  </svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
+                  <svg class="bi me-2 opacity-50 theme-icon">
+                    <use href="#moon-stars-fill"></use>
+                  </svg>
+                  Dark
+                  <svg class="bi ms-auto d-none">
+                    <use href="#check2"></use>
+                  </svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
+                  <svg class="bi me-2 opacity-50 theme-icon">
+                    <use href="#circle-half"></use>
+                  </svg>
+                  Auto
+                  <svg class="bi ms-auto d-none">
+                    <use href="#check2"></use>
+                  </svg>
+                </button>
+              </li>
+            </ul>
+          </li> -->
         </ul>
       </div>
     </div>
   </nav>
 </div>
-<!-- END OF pagetop (contains header and nav) -->
+<!-- END OF nav -->
 
 <noscript>
   <div class="container">
diff --git a/index.php b/index.php
index 13eb455..a4f08dc 100755
--- a/index.php
+++ b/index.php
@@ -12,11 +12,56 @@
     <?php echo $META['shortName']; ?>
   </title>
 
+  <style>
+    .bi {
+      width: 1em;
+      height: 1em;
+      fill: currentcolor;
+    }
+
+    .color-modes .dropdown-menu {
+      padding: 0.25rem;
+    }
+
+    .color-modes .dropdown-menu li+li {
+      margin-top: 0.125rem;
+    }
+
+    .color-modes .dropdown-item {
+      border-radius: 0.25rem;
+    }
+
+    .color-modes .active {
+      font-weight: 600;
+    }
+
+    .color-modes .active .bi {
+      display: block !important;
+    }
+  </style>
+
 </head>
 
 <body class="home">
   <?php require "includes/nav.php"; ?>
+  <!-- for dark mode -->
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="check2" viewBox="0 0 16 16">
+      <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
+    </symbol>
+    <symbol id="circle-half" viewBox="0 0 16 16">
+      <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
+    </symbol>
+    <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+      <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+      <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
+    </symbol>
+    <symbol id="sun-fill" viewBox="0 0 16 16">
+      <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+    </symbol>
+  </svg>
 
+  <!-- regular content continues below -->
   <main class="container">
 
     <!-- NOTE: below is placeholder content. please replace contents with
diff --git a/js/color-modes.js b/js/color-modes.js
new file mode 100644
index 0000000..9f22daa
--- /dev/null
+++ b/js/color-modes.js
@@ -0,0 +1,80 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()
diff --git a/styles/main.css b/styles/main.css
index 8dffaf1..93c5e6f 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,4 +1,17 @@
 /* Original color scheme by Kay McKelly, available at http://www.colourlovers.com/palette/4331737/Cryptography_Brights */
+/* rough table of contents
+- general styling (high level stuff like body bg color, fonts, etc)
+- dark/light modes
+- nav
+- header
+- main content general styling (combine with general?)
+- page specific: index (can remove??)
+- page specific: multiple pages (move to main general?)
+- page specific: accepted papers (if not used elsewhere move to specific page)
+- page specific: program (if not used elsewhere move to specific page)
+- page specific: registration (if not used elsewhere move to specific page)
+- page-specific: sponsors (if not used elsewhere move to specific page)
+ */
 
 
 /***** General styling *****/
@@ -44,6 +57,20 @@ a:hover {
 
 
 
+/***** Dark & light modes *****/
+@media (prefers-color-scheme: dark) {
+  .element {
+    color: var(--bs-primary-text-emphasis);
+    background-color: var(--bs-primary-bg-subtle);
+  }
+}
+
+/* main {
+  background-color: #100243;
+} */
+
+
+
 /***** Nav (in /includes/nav.php) *****/
 #mainNavRow {
   background-color: #102A83;
@@ -80,17 +107,20 @@ a.dropdown-item {
  * https://stackoverflow.com/questions/51413782/dropdown-on-hover-in-bootstrap-4-1
  */
 @media only screen and (min-width: 768px) {
-  #navbarNav li:not(:last-child):hover>.dropdown-menu {
+  /* pre-modes this was li:not(:last-child):hover... */
+  #navbarNav li:hover>.dropdown-menu {
     display: block;
   }
+  
   #navbarNav .dropdown > .dropdown-toggle:active {
     /*Without this, clicking will make it sticky*/
     pointer-events: none;
   }
+
   /* Fix for dropdown hover. Without this there is a .125rem gap
      that causes hover to stop working. */
   #navbarNav div.dropdown-menu {
-    margin-top: 0px;
+    margin-top: 0;
     padding-top: .625rem;
   }
 }
@@ -146,6 +176,21 @@ a.dropdown-item {
 }
 /* END hamburger transform to x */
 
+.navbarIcon {
+  width: 1.3em;
+  height: 1.3em;
+  /* was aiming for #FEFDFB but this is close enough */
+  filter: invert(100%) sepia(17%) saturate(36%) hue-rotate(8deg) brightness(131%) contrast(99%);
+}
+
+a.dropdown-item:hover .navbarIcon {
+  filter: invert(20%) sepia(11%) saturate(3385%) hue-rotate(199deg) brightness(92%) contrast(112%);
+}
+
+a.dropdown-item .navbarIcon {
+  margin-right: 0.75rem;
+}
+
 
 
 /***** Header (in /includes/nav.php) *****/
@@ -450,8 +495,8 @@ div.sessionList {
 
 /* tabbed sessions use this */
 div.trackMenu a.nav-link {
-    border-top-right-radius: 0px !important;
-    border-bottom-right-radius: 0px !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
     border-top-left-radius: 10px !important;
     border-bottom-left-radius: 10px !important;
     font-weight: 600;
@@ -460,10 +505,10 @@ div.trackMenu a.nav-link {
     background-color: #F0F0F0;
     padding-left: 2rem;
     padding-right: 2rem;
-    border-color: #E9ECEF #E9ECEF #DE2E6;
-    border-top-left-radius: .6rem;
+    border-color: #E9ECEF #E9ECEF;
+    /* border-top-left-radius: .6rem;
     border-top-right-radius: .6rem;
-    font-weight: 600;
+    font-weight: 600; */
 }
 
 @media (min-width: 768px) {
@@ -491,7 +536,7 @@ div.trackMenu a.nav-link.active {
 @media (max-width: 767px) {
     div.trackMenu a.nav-link {
         border-top-right-radius: 10px !important;
-        border-bottom-left-radius: 0px !important;
+        border-bottom-left-radius: 0 !important;
         margin-bottom: 0;
         margin-right: .6rem;
         padding-left: 1.5rem;
diff --git a/styles/orange_theme.css b/styles/orange_theme.css
index b7ecdaf..562d343 100644
--- a/styles/orange_theme.css
+++ b/styles/orange_theme.css
@@ -9,13 +9,6 @@ body {
 
 
 
-/***** Nav (in /includes/nav.php) *****/
-#mainNavRow {
-  background-color: #FEFDFB;
-}
-
-
-
 /***** Header (in /includes/nav.php) *****/
 .headerImg {
   background-image: url("../images/banners/circuit.jpg");