feat: Updated public portal header design (#8089)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2025-10-29 10:12:34 +00:00 · 2023-11-09 07:26:59 +05:30
parent 7b09b02737
commit 78398ee800
19 changed files with 909 additions and 39 deletions
--- a/app/controllers/public/api/v1/portals/base_controller.rb
+++ b/app/controllers/public/api/v1/portals/base_controller.rb
@@ -14,7 +14,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
    @theme = if %w[dark light].include?(params[:theme])
               params[:theme]
             else
-               ''
+               'system'
             end
  end

--- a/app/helpers/portal_helper.rb
+++ b/app/helpers/portal_helper.rb
@@ -8,4 +8,29 @@ module PortalHelper
    bg_image = theme == 'dark' ? 'grid_dark.svg' : 'grid.svg'
    "background: url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
  end
+
+  def language_name(locale)
+    language_map = YAML.load_file(Rails.root.join('config/languages/language_map.yml'))
+    language_map[locale] || locale
+  end
+
+  def get_theme_names(theme)
+    if theme == 'light'
+      I18n.t('public_portal.header.appearance.light')
+    elsif theme == 'dark'
+      I18n.t('public_portal.header.appearance.dark')
+    else
+      I18n.t('public_portal.header.appearance.system')
+    end
+  end
+
+  def get_theme_icon(theme)
+    if theme == 'light'
+      'icons/sun'
+    elsif theme == 'dark'
+      'icons/moon'
+    else
+      'icons/monitor'
+    end
+  end
 end
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -4,7 +4,7 @@ import Vue from 'vue';
 import PublicArticleSearch from './components/PublicArticleSearch.vue';
 import TableOfContents from './components/TableOfContents.vue';

-export const getHeadingsFromTheArticle = () => {
+export const getHeadingsfromTheArticle = () => {
  const rows = [];
  const articleElement = document.getElementById('cw-article-content');
  articleElement.querySelectorAll('h1, h2, h3').forEach(element => {
@@ -68,6 +68,37 @@ export const updateThemeStyles = theme => {
  setPortalClass(theme);
 };

+export const toggleAppearanceDropdown = () => {
+  const dropdown = document.getElementById('appearance-dropdown');
+  if (!dropdown) return;
+  dropdown.style.display =
+    dropdown.style.display === 'none' || !dropdown.style.display
+      ? 'flex'
+      : 'none';
+};
+
+export const updateURLParameter = (param, paramVal) => {
+  const urlObj = new URL(window.location);
+  urlObj.searchParams.set(param, paramVal);
+  return urlObj.toString();
+};
+
+export const removeURLParameter = parameter => {
+  const urlObj = new URL(window.location);
+  urlObj.searchParams.delete(parameter);
+  return urlObj.toString();
+};
+
+export const switchTheme = theme => {
+  updateThemeStyles(theme);
+  const newUrl =
+    theme !== 'system'
+      ? updateURLParameter('theme', theme)
+      : removeURLParameter('theme');
+  window.location.href = newUrl;
+  toggleAppearanceDropdown();
+};
+
 export const InitializationHelpers = {
  navigateToLocalePage: () => {
    const allLocaleSwitcher = document.querySelector('.locale-switcher');
@@ -98,7 +129,7 @@ export const InitializationHelpers = {
    if (isOnArticlePage) {
      new Vue({
        components: { TableOfContents },
-        data: { rows: getHeadingsFromTheArticle() },
+        data: { rows: getHeadingsfromTheArticle() },
        template: '<table-of-contents :rows="rows" />',
      }).$mount('#cw-hc-toc');
    }
@@ -131,6 +162,26 @@ export const InitializationHelpers = {
    }
  },

+  initializeToggleButton: () => {
+    const toggleButton = document.getElementById('toggle-appearance');
+    if (toggleButton) {
+      toggleButton.addEventListener('click', toggleAppearanceDropdown);
+    }
+  },
+
+  initializeThemeSwitchButtons: () => {
+    const appearanceDropdown = document.getElementById('appearance-dropdown');
+    if (!appearanceDropdown) return;
+    appearanceDropdown.addEventListener('click', event => {
+      const target = event.target.closest('button[data-theme]');
+
+      if (target) {
+        const theme = target.getAttribute('data-theme');
+        switchTheme(theme);
+      }
+    });
+  },
+
  initialize: () => {
    if (window.portalConfig.isPlainLayoutEnabled === 'true') {
      InitializationHelpers.appendPlainParamToURLs();
@@ -138,7 +189,9 @@ export const InitializationHelpers = {
      InitializationHelpers.navigateToLocalePage();
      InitializationHelpers.initializeSearch();
      InitializationHelpers.initializeTableOfContents();
-      // InitializationHelpers.initializeTheme();
+      InitializationHelpers.initializeTheme();
+      InitializationHelpers.initializeToggleButton();
+      InitializationHelpers.initializeThemeSwitchButtons();
    }
  },

--- a/app/javascript/portal/specs/portal.spec.js
+++ b/app/javascript/portal/specs/portal.spec.js
@@ -6,6 +6,9 @@ import {
  setPortalStyles,
  setPortalClass,
  updateThemeStyles,
+  toggleAppearanceDropdown,
+  updateURLParameter,
+  removeURLParameter,
 } from '../portalHelpers';

 describe('#navigateToLocalePage', () => {
@@ -126,12 +129,78 @@ describe('Theme Functions', () => {
      document.body.innerHTML = '';
    });

-    it('sets portal class based on theme', () => {
+    it('sets portal class to "dark" based on theme', () => {
      setPortalClass('dark');
-
      expect(mockPortalDiv.classList.contains('dark')).toBe(true);
      expect(mockPortalDiv.classList.contains('light')).toBe(false);
    });
+
+    it('sets portal class to "light" based on theme', () => {
+      setPortalClass('light');
+      expect(mockPortalDiv.classList.contains('light')).toBe(true);
+      expect(mockPortalDiv.classList.contains('dark')).toBe(false);
+    });
+  });
+
+  describe('toggleAppearanceDropdown', () => {
+    it('sets dropdown display to flex if initially none', () => {
+      document.body.innerHTML = `<div id="appearance-dropdown" style="display: none;"></div>`;
+      toggleAppearanceDropdown();
+      const dropdown = document.getElementById('appearance-dropdown');
+      expect(dropdown.style.display).toBe('flex');
+    });
+
+    it('sets dropdown display to none if initially flex', () => {
+      document.body.innerHTML = `<div id="appearance-dropdown" style="display: flex;"></div>`;
+      toggleAppearanceDropdown();
+      const dropdown = document.getElementById('appearance-dropdown');
+      expect(dropdown.style.display).toBe('none');
+    });
+
+    it('does nothing if dropdown element does not exist', () => {
+      document.body.innerHTML = ``;
+      expect(() => toggleAppearanceDropdown()).not.toThrow();
+    });
+  });
+
+  describe('updateURLParameter', () => {
+    it('updates a given parameter with a new value', () => {
+      const originalUrl = 'http://example.com?param=oldValue';
+      delete window.location;
+      window.location = new URL(originalUrl);
+
+      const updatedUrl = updateURLParameter('param', 'newValue');
+      expect(updatedUrl).toContain('param=newValue');
+    });
+
+    it('adds a new parameter if it does not exist', () => {
+      const originalUrl = 'http://example.com';
+      delete window.location;
+      window.location = new URL(originalUrl);
+
+      const updatedUrl = updateURLParameter('newParam', 'value');
+      expect(updatedUrl).toContain('newParam=value');
+    });
+  });
+
+  describe('removeURLParameter', () => {
+    it('removes an existing parameter', () => {
+      const originalUrl = 'http://example.com?param=value';
+      delete window.location;
+      window.location = new URL(originalUrl);
+
+      const updatedUrl = removeURLParameter('param');
+      expect(updatedUrl).not.toContain('param=value');
+    });
+
+    it('does nothing if the parameter does not exist', () => {
+      const originalUrl = 'http://example.com/';
+      delete window.location;
+      window.location = new URL(originalUrl);
+
+      const updatedUrl = removeURLParameter('param');
+      expect(updatedUrl).toBe(originalUrl);
+    });
  });

  describe('#updateThemeStyles', () => {
@@ -223,4 +292,43 @@ describe('Theme Functions', () => {
      expect(mockPortalDiv.classList.contains('light')).toBe(false);
    });
  });
+
+  describe('initializeToggleButton', () => {
+    it('adds a click listener to the toggle button', () => {
+      document.body.innerHTML = `<button id="toggle-appearance"></button>`;
+      InitializationHelpers.initializeToggleButton();
+      const toggleButton = document.getElementById('toggle-appearance');
+      expect(toggleButton.onclick).toBeDefined();
+    });
+
+    it('does nothing if the toggle button is not present', () => {
+      document.body.innerHTML = ``;
+      expect(() =>
+        InitializationHelpers.initializeToggleButton()
+      ).not.toThrow();
+    });
+  });
+
+  describe('initializeThemeSwitchButtons', () => {
+    it('adds click listeners to theme switch buttons', () => {
+      document.body.innerHTML = `<div id="appearance-dropdown"><button data-theme="dark"></button><button data-theme="light"></button></div>`;
+      InitializationHelpers.initializeThemeSwitchButtons();
+      const buttons = document.querySelectorAll('button[data-theme]');
+      buttons.forEach(button => expect(button.onclick).toBeDefined());
+    });
+
+    it('does nothing if theme switch buttons are not present', () => {
+      document.body.innerHTML = ``;
+      expect(() =>
+        InitializationHelpers.initializeThemeSwitchButtons()
+      ).not.toThrow();
+    });
+
+    it('does nothing if appearance-dropdown is not present', () => {
+      document.body.innerHTML = ``;
+      expect(() =>
+        InitializationHelpers.initializeThemeSwitchButtons()
+      ).not.toThrow();
+    });
+  });
 });
--- a/app/views/icons/_check-mark.html.erb
+++ b/app/views/icons/_check-mark.html.erb
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.2121 5L5.87879 11.3333L3 8.45455" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/app/views/icons/_chevron-down.html.erb
+++ b/app/views/icons/_chevron-down.html.erb
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 4.5L6 7.5L9 4.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/app/views/icons/_chevron-right.html.erb
+++ b/app/views/icons/_chevron-right.html.erb
@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L5 5L1 1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/app/views/icons/_globe.html.erb
+++ b/app/views/icons/_globe.html.erb
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00062 13.5557C11.0689 13.5557 13.5562 11.0684 13.5562 8.00014C13.5562 4.93189 11.0689 2.44458 8.00062 2.44458C4.93237 2.44458 2.44507 4.93189 2.44507 8.00014C2.44507 11.0684 4.93237 13.5557 8.00062 13.5557Z" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.44507 8H13.5562" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00054 2.44458C9.39014 3.96589 10.1798 5.94015 10.2228 8.00014C10.1798 10.0601 9.39014 12.0344 8.00054 13.5557C6.61094 12.0344 5.82124 10.0601 5.77832 8.00014C5.82124 5.94015 6.61094 3.96589 8.00054 2.44458Z" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/app/views/icons/_monitor.html.erb
+++ b/app/views/icons/_monitor.html.erb
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4H4C3.44772 4 3 4.44773 3 5.00002V10.0001C3 10.5524 3.44772 11.0002 4 11.0002H12C12.5523 11.0002 13 10.5524 13 10.0001V5.00002C13 4.44773 12.5523 4 12 4Z" stroke-width="1.00001" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 13H10" stroke-width="1.00001" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 11V13" stroke-width="1.00001" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/app/views/icons/_moon.html.erb
+++ b/app/views/icons/_moon.html.erb
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 3C7.33696 3.66304 6.96447 4.56232 6.96447 5.5C6.96447 6.43768 7.33696 7.33696 8 8C8.66304 8.66304 9.56232 9.03553 10.5 9.03553C11.4377 9.03553 12.337 8.66304 13 8C13 8.9889 12.7068 9.9556 12.1573 10.7778C11.6079 11.6001 10.827 12.241 9.91342 12.6194C8.99979 12.9978 7.99446 13.0969 7.02455 12.9039C6.05465 12.711 5.16373 12.2348 4.46447 11.5355C3.76521 10.8363 3.289 9.94535 3.09608 8.97545C2.90315 8.00555 3.00217 7.00021 3.3806 6.08658C3.75904 5.17295 4.39991 4.39206 5.22215 3.84265C6.0444 3.29324 7.01109 3 8 3Z" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/app/views/icons/_palette.html.erb
+++ b/app/views/icons/_palette.html.erb
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.90217 5.00111C9.06792 5.00111 9.20229 4.86675 9.20229 4.701C9.20229 4.53525 9.06792 4.40088 8.90217 4.40088C8.73642 4.40088 8.60205 4.53525 8.60205 4.701C8.60205 4.86675 8.73642 5.00111 8.90217 5.00111Z" stroke-width="1.20047" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.3035 7.40199C11.4693 7.40199 11.6037 7.26763 11.6037 7.10188C11.6037 6.93612 11.4693 6.80176 11.3035 6.80176C11.1378 6.80176 11.0034 6.93612 11.0034 7.10188C11.0034 7.26763 11.1378 7.40199 11.3035 7.40199Z" stroke-width="1.20047" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.90119 5.60121C6.06694 5.60121 6.20131 5.46684 6.20131 5.30109C6.20131 5.13534 6.06694 5.00098 5.90119 5.00098C5.73544 5.00098 5.60107 5.13534 5.60107 5.30109C5.60107 5.46684 5.73544 5.60121 5.90119 5.60121Z" stroke-width="1.20047" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.701 8.60268C4.86675 8.60268 5.00111 8.46831 5.00111 8.30256C5.00111 8.13681 4.86675 8.00244 4.701 8.00244C4.53525 8.00244 4.40088 8.13681 4.40088 8.30256C4.40088 8.46831 4.53525 8.60268 4.701 8.60268Z" stroke-width="1.20047" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00235 2C4.70106 2 2 4.70106 2 8.00234C2 11.3036 4.70106 14.0047 8.00235 14.0047C8.55816 14.0047 8.99153 13.5569 8.99153 12.9915C8.99153 12.7292 8.88349 12.4903 8.72923 12.3162C8.55516 12.1428 8.46633 11.9249 8.46633 11.641C8.46405 11.5089 8.48839 11.3776 8.5379 11.2552C8.58741 11.1327 8.66107 11.0214 8.7545 10.9279C8.84793 10.8345 8.9592 10.7609 9.0817 10.7114C9.2042 10.6618 9.33541 10.6375 9.46752 10.6398H10.6656C12.4969 10.6398 13.9999 9.13739 13.9999 7.30607C13.9837 4.40814 11.2802 2 8.00235 2Z" stroke-width="1.20047" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/app/views/icons/_redirect.html.erb
+++ b/app/views/icons/_redirect.html.erb
@@ -0,0 +1,5 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 3H3.5C2.94772 3 2.5 3.44772 2.5 4V12C2.5 12.5523 2.94772 13 3.5 13H11.5C12.0523 13 12.5 12.5523 12.5 12V9" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M9.5 3H12.3C12.4105 3 12.5 3.08954 12.5 3.2V6" stroke-linecap="round"/>
+<path d="M12 3.5L6 9.5" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
--- a/app/views/icons/_sun.html.erb
+++ b/app/views/icons/_sun.html.erb
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.0001 10.3998C9.32559 10.3998 10.4001 9.32529 10.4001 7.99982C10.4001 6.67436 9.32559 5.59985 8.0001 5.59985C6.67462 5.59985 5.6001 6.67436 5.6001 7.99982C5.6001 9.32529 6.67462 10.3998 8.0001 10.3998Z" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V3.19998" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 12.8V14" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75806 3.75781L4.60406 4.6038" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.396 11.3958L12.242 12.2417" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 7.99976H3.2" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8 7.99976H14.0001" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.60406 11.3958L3.75806 12.2417" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.242 3.75781L11.396 4.6038" stroke-width="1.19999" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/app/views/layouts/portal.html.erb
+++ b/app/views/layouts/portal.html.erb
@@ -28,7 +28,7 @@ By default, it renders:
    <% end %>
  </head>
  <body>
-    <div class="antialiased <%= @theme %>">
+    <div id="portal" class="antialiased <%= @theme unless @theme == 'system' %>">
      <main class="main-content min-h-screen flex flex-col bg-white dark:bg-slate-900" role="main">
        <% if !@is_plain_layout_enabled %>
          <%= render "public/api/v1/portals/header", portal: @portal %>
@@ -42,7 +42,7 @@ By default, it renders:
  </body>
  <style>
  :root {
-    color-scheme: '<%= @theme %>';
+    color-scheme: <% if @theme == 'system' %>light dark<% else %><%= @theme %><% end %>;
  }
  </style>
  <script>
--- a/app/views/public/api/v1/portals/_header.html.erb
+++ b/app/views/public/api/v1/portals/_header.html.erb
@@ -1,41 +1,85 @@
-
 <header class="bg-white dark:bg-slate-900 w-full shadow-sm sticky top-0 z-50">
-  <nav class=" flex mx-auto max-w-6xl px-8" aria-label="Top">
+  <nav class=" flex mx-auto max-w-5xl px-8" aria-label="Top">
    <div class="w-full py-5 flex items-center">
-      <a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/<%= @theme.present? ? '?theme='+@theme : ''  %>" class="h-10 text-lg flex items-center text-slate-900 dark:text-white font-semibold">
+      <a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/<%= @theme.present? && @theme != 'system' ? '?theme='+@theme : ''  %>" class="h-10 text-lg flex items-center text-slate-900 dark:text-white font-semibold">
        <% if @portal.logo.present? %>
          <img src="<%= url_for(@portal.logo) %>" class="h-10 w-auto mr-2" />
        <% end %>
        <%= @portal.name %>
      </a>
+    </div>
+
+    <%# Go to homepage link section %>
+    <div class="flex items-center justify-between gap-5">
      <% if @portal.homepage_link %>
-      <div class="ml-8 border-l-1 border-slate-50 dark:border-slate-800 hidden md:block">
-        <div class="flex-grow flex-shrink-0">
-          <a target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center text-sm font-medium text-slate-700 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-300  hover:underline"> <%= I18n.t('public_portal.header.go_to_homepage') %>
-            <span class="ml-2">
-              <svg class="w-4 h-4 fill-current text-slate-600 dark:text-slate-200" width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" /></svg>
-            </span>
-          </a>
+        <div class="ml-8 border-l-1 border-slate-50 dark:border-slate-800 hidden md:block cursor-pointer px-1 py-2">
+          <div class="flex-grow flex-shrink-0">
+            <a target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center gap-1 text-sm font-medium text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500 stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500">
+              <%= render partial: 'icons/redirect' %>
+              <%= I18n.t('public_portal.header.go_to_homepage') %>
+            </a>
+          </div>
+        </div>
+      <% end %>
+
+      <%# Appearance toggle section %>
+      <div class="flex-grow flex-shrink-0 relative cursor-pointer px-1 py-2">
+        <button id="toggle-appearance" class="toggle-appearance flex flex-row items-center stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500 gap-1" type="button">
+          <%= render partial: get_theme_icon(@theme) %>
+          <span class="text-sm font-medium"><%= get_theme_names(@theme) %></span>
+          <div class="pointer-events-none flex items-center px-1">
+            <%= render partial: 'icons/chevron-down' %>
+          </div>
+        </button>
+        <%# Appearance dropdown section %>
+        <div id="appearance-dropdown" class="hidden absolute flex-col h-auto w-32 bg-white dark:bg-slate-900 border border-solid rounded top-9 border-slate-100 dark:border-slate-800" aria-hidden="true" data-dropdown="appearance-dropdown">
+          <button data-theme="system" class="flex flex-row items-center justify-between px-2 py-2 border-b border-solid border-slate-100 dark:border-slate-800 gap-1 stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500">
+            <div class="flex flex-row items-center gap-1">
+              <%= render partial: 'icons/monitor' %>
+              <span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.system') %></span>
+            </div>
+            <% if @theme.present? && @theme == 'system' %>
+              <%= render partial: 'icons/check-mark' %>
+            <% end %>
+          </button>
+          <button data-theme="light" class="flex flex-row items-center justify-between px-2 py-2 border-b border-solid border-slate-100 dark:border-slate-800 gap-1 stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500">
+            <div class="flex flex-row items-center gap-1">
+              <%= render partial: 'icons/sun' %>
+              <span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.light') %></span>
+            </div>
+            <% if @theme.present? && @theme == 'light' %>
+              <%= render partial: 'icons/check-mark' %>
+            <% end %>
+          </button>
+          <button data-theme="dark" class="flex flex-row items-center justify-between px-2 py-2 gap-1 stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500">
+            <div class="flex flex-row items-center gap-1">
+              <%= render partial: 'icons/moon' %>
+              <span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.dark') %></span>
+            </div>
+            <% if @theme.present? && @theme == 'dark' %>
+              <%= render partial: 'icons/check-mark' %>
+            <% end %>
+          </button>
        </div>
      </div>
+
+      <%# Locale switcher section %>
+      <% if @portal.config["allowed_locales"].length > 1 %>
+        <div class="flex items-center stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500">
+          <div class="flex items-center gap-1 px-1 py-2 cursor-pointer">
+            <%= render partial: 'icons/globe' %>
+            <select
+              data-portal-slug="<%= @portal.slug %>"
+              class="bg-white dark:bg-slate-900 appearance-none w-24 overflow-hidden text-ellipsis whitespace-nowrap leading-tight font-medium focus:outline-none text-sm focus:shadow-outline locale-switcher cursor-pointer"
+            >
+              <% @portal.config["allowed_locales"].each do |locale| %>
+                <option <%= locale == params[:locale] ? 'selected': '' %> value="<%= locale %>"><%= "#{language_name(locale)} (#{locale})" %></option>
+              <% end %>
+            </select>
+            <%= render partial: 'icons/chevron-down' %>
+          </div>
+        </div>
      <% end %>
    </div>
-    <% if @portal.config["allowed_locales"].length > 1 %>
-    <div class="flex items-center">
-      <div class="inline-flex relative w-24">
-        <select
-          data-portal-slug="<%= @portal.slug %>"
-          class="appearance-none w-full bg-white dark:bg-slate-900 dark:text-slate-100 px-3 py-2 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline locale-switcher hover:bg-slate-75 dark:hover:bg-slate-800 cursor-pointer"
-        >
-          <% @portal.config["allowed_locales"].each do |locale| %>
-            <option <%= locale == params[:locale] ? 'selected': '' %> value="<%= locale %>"><%= locale %></option>
-          <% end %>
-        </select>
-        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-700 dark:text-slate-200">
-          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
-        </div>
-      </div>
-    </div>
-    <% end %>
  </nav>
-</header>
+</header>
--- a/app/views/public/api/v1/portals/_hero.html.erb
+++ b/app/views/public/api/v1/portals/_hero.html.erb
@@ -1,5 +1,5 @@
-<% if !@is_plain_layout_enabled %>
-<section class="pt-8 pb-16 md:py-20 w-full bg-woot-50 dark:bg-woot-900 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme) %>">
+<% if !@is_plain_layout_enabled %> 
+<section id="portal-bg" class="pt-8 pb-16 md:py-20 w-full bg-woot-50 dark:bg-woot-900 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme) %>">
  <div class="mx-auto max-w-6xl px-8 flex flex-col items-center sm:items-start">
    <h1 class="text-2xl md:text-4xl text-slate-900 dark:text-white font-semibold leading-normal">
      <%= portal.header_text %>
--- a/config/languages/language_map.yml
+++ b/config/languages/language_map.yml
@@ -0,0 +1,563 @@
+  af: 'Afrikaans'
+  af_NA: 'Afrikaans (Namibia)'
+  af_ZA: 'Afrikaans (South Africa)'
+  ak: 'Akan'
+  ak_GH: 'Akan (Ghana)'
+  sq: 'Albanian'
+  sq_AL: 'Albanian (Albania)'
+  sq_XK: 'Albanian (Kosovo)'
+  sq_MK: 'Albanian (Macedonia)'
+  am: 'Amharic'
+  am_ET: 'Amharic (Ethiopia)'
+  ar: 'Arabic'
+  ar_DZ: 'Arabic (Algeria)'
+  ar_BH: 'Arabic (Bahrain)'
+  ar_TD: 'Arabic (Chad)'
+  ar_KM: 'Arabic (Comoros)'
+  ar_DJ: 'Arabic (Djibouti)'
+  ar_EG: 'Arabic (Egypt)'
+  ar_ER: 'Arabic (Eritrea)'
+  ar_IQ: 'Arabic (Iraq)'
+  ar_IL: 'Arabic (Israel)'
+  ar_JO: 'Arabic (Jordan)'
+  ar_KW: 'Arabic (Kuwait)'
+  ar_LB: 'Arabic (Lebanon)'
+  ar_LY: 'Arabic (Libya)'
+  ar_MR: 'Arabic (Mauritania)'
+  ar_MA: 'Arabic (Morocco)'
+  ar_OM: 'Arabic (Oman)'
+  ar_PS: 'Arabic (Palestinian Territories)'
+  ar_QA: 'Arabic (Qatar)'
+  ar_SA: 'Arabic (Saudi Arabia)'
+  ar_SO: 'Arabic (Somalia)'
+  ar_SS: 'Arabic (South Sudan)'
+  ar_SD: 'Arabic (Sudan)'
+  ar_SY: 'Arabic (Syria)'
+  ar_TN: 'Arabic (Tunisia)'
+  ar_AE: 'Arabic (United Arab Emirates)'
+  ar_EH: 'Arabic (Western Sahara)'
+  ar_YE: 'Arabic (Yemen)'
+  hy: 'Armenian'
+  hy_AM: 'Armenian (Armenia)'
+  as: 'Assamese'
+  as_IN: 'Assamese (India)'
+  az: 'Azerbaijani'
+  az_AZ: 'Azerbaijani (Azerbaijan)'
+  az_Cyrl_AZ: 'Azerbaijani (Cyrillic, Azerbaijan)'
+  az_Cyrl: 'Azerbaijani (Cyrillic)'
+  az_Latn_AZ: 'Azerbaijani (Latin, Azerbaijan)'
+  az_Latn: 'Azerbaijani (Latin)'
+  bm: 'Bambara'
+  bm_Latn_ML: 'Bambara (Latin, Mali)'
+  bm_Latn: 'Bambara (Latin)'
+  eu: 'Basque'
+  eu_ES: 'Basque (Spain)'
+  be: 'Belarusian'
+  be_BY: 'Belarusian (Belarus)'
+  bn: 'Bengali'
+  bn_BD: 'Bengali (Bangladesh)'
+  bn_IN: 'Bengali (India)'
+  bs: 'Bosnian'
+  bs_BA: 'Bosnian (Bosnia & Herzegovina)'
+  bs_Cyrl_BA: 'Bosnian (Cyrillic, Bosnia & Herzegovina)'
+  bs_Cyrl: 'Bosnian (Cyrillic)'
+  bs_Latn_BA: 'Bosnian (Latin, Bosnia & Herzegovina)'
+  bs_Latn: 'Bosnian (Latin)'
+  br: 'Breton'
+  br_FR: 'Breton (France)'
+  bg: 'Bulgarian'
+  bg_BG: 'Bulgarian (Bulgaria)'
+  my: 'Burmese'
+  my_MM: 'Burmese (Myanmar (Burma))'
+  ca: 'Catalan'
+  ca_AD: 'Catalan (Andorra)'
+  ca_FR: 'Catalan (France)'
+  ca_IT: 'Catalan (Italy)'
+  ca_ES: 'Catalan (Spain)'
+  zh: 'Chinese'
+  zh_CN: 'Chinese (China)'
+  zh_HK: 'Chinese (Hong Kong SAR China)'
+  zh_MO: 'Chinese (Macau SAR China)'
+  zh_Hans_CN: 'Chinese (Simplified, China)'
+  zh_Hans_HK: 'Chinese (Simplified, Hong Kong SAR China)'
+  zh_Hans_MO: 'Chinese (Simplified, Macau SAR China)'
+  zh_Hans_SG: 'Chinese (Simplified, Singapore)'
+  zh_Hans: 'Chinese (Simplified)'
+  zh_SG: 'Chinese (Singapore)'
+  zh_TW: 'Chinese (Taiwan)'
+  zh_Hant_HK: 'Chinese (Traditional, Hong Kong SAR China)'
+  zh_Hant_MO: 'Chinese (Traditional, Macau SAR China)'
+  zh_Hant_TW: 'Chinese (Traditional, Taiwan)'
+  zh_Hant: 'Chinese (Traditional)'
+  kw: 'Cornish'
+  kw_GB: 'Cornish (United Kingdom)'
+  hr: 'Croatian'
+  hr_BA: 'Croatian (Bosnia & Herzegovina)'
+  hr_HR: 'Croatian (Croatia)'
+  cs: 'Czech'
+  cs_CZ: 'Czech (Czech Republic)'
+  da: 'Danish'
+  da_DK: 'Danish (Denmark)'
+  da_GL: 'Danish (Greenland)'
+  nl: 'Dutch'
+  nl_AW: 'Dutch (Aruba)'
+  nl_BE: 'Dutch (Belgium)'
+  nl_BQ: 'Dutch (Caribbean Netherlands)'
+  nl_CW: 'Dutch (Curaçao)'
+  nl_NL: 'Dutch (Netherlands)'
+  nl_SX: 'Dutch (Sint Maarten)'
+  nl_SR: 'Dutch (Suriname)'
+  dz: 'Dzongkha'
+  dz_BT: 'Dzongkha (Bhutan)'
+  en: 'English'
+  en_AS: 'English (American Samoa)'
+  en_AI: 'English (Anguilla)'
+  en_AG: 'English (Antigua & Barbuda)'
+  en_AU: 'English (Australia)'
+  en_BS: 'English (Bahamas)'
+  en_BB: 'English (Barbados)'
+  en_BE: 'English (Belgium)'
+  en_BZ: 'English (Belize)'
+  en_BM: 'English (Bermuda)'
+  en_BW: 'English (Botswana)'
+  en_IO: 'English (British Indian Ocean Territory)'
+  en_VG: 'English (British Virgin Islands)'
+  en_CM: 'English (Cameroon)'
+  en_CA: 'English (Canada)'
+  en_KY: 'English (Cayman Islands)'
+  en_CX: 'English (Christmas Island)'
+  en_CC: 'English (Cocos (Keeling) Islands)'
+  en_CK: 'English (Cook Islands)'
+  en_DG: 'English (Diego Garcia)'
+  en_DM: 'English (Dominica)'
+  en_ER: 'English (Eritrea)'
+  en_FK: 'English (Falkland Islands)'
+  en_FJ: 'English (Fiji)'
+  en_GM: 'English (Gambia)'
+  en_GH: 'English (Ghana)'
+  en_GI: 'English (Gibraltar)'
+  en_GD: 'English (Grenada)'
+  en_GU: 'English (Guam)'
+  en_GG: 'English (Guernsey)'
+  en_GY: 'English (Guyana)'
+  en_HK: 'English (Hong Kong SAR China)'
+  en_IN: 'English (India)'
+  en_IE: 'English (Ireland)'
+  en_IM: 'English (Isle of Man)'
+  en_JM: 'English (Jamaica)'
+  en_JE: 'English (Jersey)'
+  en_KE: 'English (Kenya)'
+  en_KI: 'English (Kiribati)'
+  en_LS: 'English (Lesotho)'
+  en_LR: 'English (Liberia)'
+  en_MO: 'English (Macau SAR China)'
+  en_MG: 'English (Madagascar)'
+  en_MW: 'English (Malawi)'
+  en_MY: 'English (Malaysia)'
+  en_MT: 'English (Malta)'
+  en_MH: 'English (Marshall Islands)'
+  en_MU: 'English (Mauritius)'
+  en_FM: 'English (Micronesia)'
+  en_MS: 'English (Montserrat)'
+  en_NA: 'English (Namibia)'
+  en_NR: 'English (Nauru)'
+  en_NZ: 'English (New Zealand)'
+  en_NG: 'English (Nigeria)'
+  en_NU: 'English (Niue)'
+  en_NF: 'English (Norfolk Island)'
+  en_MP: 'English (Northern Mariana Islands)'
+  en_PK: 'English (Pakistan)'
+  en_PW: 'English (Palau)'
+  en_PG: 'English (Papua New Guinea)'
+  en_PH: 'English (Philippines)'
+  en_PN: 'English (Pitcairn Islands)'
+  en_PR: 'English (Puerto Rico)'
+  en_RW: 'English (Rwanda)'
+  en_WS: 'English (Samoa)'
+  en_SC: 'English (Seychelles)'
+  en_SL: 'English (Sierra Leone)'
+  en_SG: 'English (Singapore)'
+  en_SX: 'English (Sint Maarten)'
+  en_SB: 'English (Solomon Islands)'
+  en_ZA: 'English (South Africa)'
+  en_SS: 'English (South Sudan)'
+  en_SH: 'English (St. Helena)'
+  en_KN: 'English (St. Kitts & Nevis)'
+  en_LC: 'English (St. Lucia)'
+  en_VC: 'English (St. Vincent & Grenadines)'
+  en_SD: 'English (Sudan)'
+  en_SZ: 'English (Swaziland)'
+  en_TZ: 'English (Tanzania)'
+  en_TK: 'English (Tokelau)'
+  en_TO: 'English (Tonga)'
+  en_TT: 'English (Trinidad & Tobago)'
+  en_TC: 'English (Turks & Caicos Islands)'
+  en_TV: 'English (Tuvalu)'
+  en_UM: 'English (U.S. Outlying Islands)'
+  en_VI: 'English (U.S. Virgin Islands)'
+  en_UG: 'English (Uganda)'
+  en_GB: 'English (United Kingdom)'
+  en_US: 'English (United States)'
+  en_VU: 'English (Vanuatu)'
+  en_ZM: 'English (Zambia)'
+  en_ZW: 'English (Zimbabwe)'
+  eo: 'Esperanto'
+  et: 'Estonian'
+  et_EE: 'Estonian (Estonia)'
+  ee: 'Ewe'
+  ee_GH: 'Ewe (Ghana)'
+  ee_TG: 'Ewe (Togo)'
+  fo: 'Faroese'
+  fo_FO: 'Faroese (Faroe Islands)'
+  fi: 'Finnish'
+  fi_FI: 'Finnish (Finland)'
+  fr: 'French'
+  fr_DZ: 'French (Algeria)'
+  fr_BE: 'French (Belgium)'
+  fr_BJ: 'French (Benin)'
+  fr_BF: 'French (Burkina Faso)'
+  fr_BI: 'French (Burundi)'
+  fr_CM: 'French (Cameroon)'
+  fr_CA: 'French (Canada)'
+  fr_CF: 'French (Central African Republic)'
+  fr_TD: 'French (Chad)'
+  fr_KM: 'French (Comoros)'
+  fr_CG: 'French (Congo - Brazzaville)'
+  fr_CD: 'French (Congo - Kinshasa)'
+  fr_CI: 'French (Côte d’Ivoire)'
+  fr_DJ: 'French (Djibouti)'
+  fr_GQ: 'French (Equatorial Guinea)'
+  fr_FR: 'French (France)'
+  fr_GF: 'French (French Guiana)'
+  fr_PF: 'French (French Polynesia)'
+  fr_GA: 'French (Gabon)'
+  fr_GP: 'French (Guadeloupe)'
+  fr_GN: 'French (Guinea)'
+  fr_HT: 'French (Haiti)'
+  fr_LU: 'French (Luxembourg)'
+  fr_MG: 'French (Madagascar)'
+  fr_ML: 'French (Mali)'
+  fr_MQ: 'French (Martinique)'
+  fr_MR: 'French (Mauritania)'
+  fr_MU: 'French (Mauritius)'
+  fr_YT: 'French (Mayotte)'
+  fr_MC: 'French (Monaco)'
+  fr_MA: 'French (Morocco)'
+  fr_NC: 'French (New Caledonia)'
+  fr_NE: 'French (Niger)'
+  fr_RE: 'French (Réunion)'
+  fr_RW: 'French (Rwanda)'
+  fr_SN: 'French (Senegal)'
+  fr_SC: 'French (Seychelles)'
+  fr_BL: 'French (St. Barthélemy)'
+  fr_MF: 'French (St. Martin)'
+  fr_PM: 'French (St. Pierre & Miquelon)'
+  fr_CH: 'French (Switzerland)'
+  fr_SY: 'French (Syria)'
+  fr_TG: 'French (Togo)'
+  fr_TN: 'French (Tunisia)'
+  fr_VU: 'French (Vanuatu)'
+  fr_WF: 'French (Wallis & Futuna)'
+  ff: 'Fulah'
+  ff_CM: 'Fulah (Cameroon)'
+  ff_GN: 'Fulah (Guinea)'
+  ff_MR: 'Fulah (Mauritania)'
+  ff_SN: 'Fulah (Senegal)'
+  gl: 'Galician'
+  gl_ES: 'Galician (Spain)'
+  lg: 'Ganda'
+  lg_UG: 'Ganda (Uganda)'
+  ka: 'Georgian'
+  ka_GE: 'Georgian (Georgia)'
+  de: 'German'
+  de_AT: 'German (Austria)'
+  de_BE: 'German (Belgium)'
+  de_DE: 'German (Germany)'
+  de_LI: 'German (Liechtenstein)'
+  de_LU: 'German (Luxembourg)'
+  de_CH: 'German (Switzerland)'
+  el: 'Greek'
+  el_CY: 'Greek (Cyprus)'
+  el_GR: 'Greek (Greece)'
+  gu: 'Gujarati'
+  gu_IN: 'Gujarati (India)'
+  ha: 'Hausa'
+  ha_GH: 'Hausa (Ghana)'
+  ha_Latn_GH: 'Hausa (Latin, Ghana)'
+  ha_Latn_NE: 'Hausa (Latin, Niger)'
+  ha_Latn_NG: 'Hausa (Latin, Nigeria)'
+  ha_Latn: 'Hausa (Latin)'
+  ha_NE: 'Hausa (Niger)'
+  ha_NG: 'Hausa (Nigeria)'
+  he: 'Hebrew'
+  he_IL: 'Hebrew (Israel)'
+  hi: 'Hindi'
+  hi_IN: 'Hindi (India)'
+  hu: 'Hungarian'
+  hu_HU: 'Hungarian (Hungary)'
+  is: 'Icelandic'
+  is_IS: 'Icelandic (Iceland)'
+  ig: 'Igbo'
+  ig_NG: 'Igbo (Nigeria)'
+  id: 'Indonesian'
+  id_ID: 'Indonesian (Indonesia)'
+  ga: 'Irish'
+  ga_IE: 'Irish (Ireland)'
+  it: 'Italian'
+  it_IT: 'Italian (Italy)'
+  it_SM: 'Italian (San Marino)'
+  it_CH: 'Italian (Switzerland)'
+  ja: 'Japanese'
+  ja_JP: 'Japanese (Japan)'
+  kl: 'Kalaallisut'
+  kl_GL: 'Kalaallisut (Greenland)'
+  kn: 'Kannada'
+  kn_IN: 'Kannada (India)'
+  ks: 'Kashmiri'
+  ks_Arab_IN: 'Kashmiri (Arabic, India)'
+  ks_Arab: 'Kashmiri (Arabic)'
+  ks_IN: 'Kashmiri (India)'
+  kk: 'Kazakh'
+  kk_Cyrl_KZ: 'Kazakh (Cyrillic, Kazakhstan)'
+  kk_Cyrl: 'Kazakh (Cyrillic)'
+  kk_KZ: 'Kazakh (Kazakhstan)'
+  km: 'Khmer'
+  km_KH: 'Khmer (Cambodia)'
+  ki: 'Kikuyu'
+  ki_KE: 'Kikuyu (Kenya)'
+  rw: 'Kinyarwanda'
+  rw_RW: 'Kinyarwanda (Rwanda)'
+  ko: 'Korean'
+  ko_KP: 'Korean (North Korea)'
+  ko_KR: 'Korean (South Korea)'
+  ky: 'Kyrgyz'
+  ky_Cyrl_KG: 'Kyrgyz (Cyrillic, Kyrgyzstan)'
+  ky_Cyrl: 'Kyrgyz (Cyrillic)'
+  ky_KG: 'Kyrgyz (Kyrgyzstan)'
+  lo: 'Lao'
+  lo_LA: 'Lao (Laos)'
+  lv: 'Latvian'
+  lv_LV: 'Latvian (Latvia)'
+  ln: 'Lingala'
+  ln_AO: 'Lingala (Angola)'
+  ln_CF: 'Lingala (Central African Republic)'
+  ln_CG: 'Lingala (Congo - Brazzaville)'
+  ln_CD: 'Lingala (Congo - Kinshasa)'
+  lt: 'Lithuanian'
+  lt_LT: 'Lithuanian (Lithuania)'
+  lu: 'Luba-Katanga'
+  lu_CD: 'Luba-Katanga (Congo - Kinshasa)'
+  lb: 'Luxembourgish'
+  lb_LU: 'Luxembourgish (Luxembourg)'
+  mk: 'Macedonian'
+  mk_MK: 'Macedonian (Macedonia)'
+  mg: 'Malagasy'
+  mg_MG: 'Malagasy (Madagascar)'
+  ms: 'Malay'
+  ms_BN: 'Malay (Brunei)'
+  ms_Latn_BN: 'Malay (Latin, Brunei)'
+  ms_Latn_MY: 'Malay (Latin, Malaysia)'
+  ms_Latn_SG: 'Malay (Latin, Singapore)'
+  ms_Latn: 'Malay (Latin)'
+  ms_MY: 'Malay (Malaysia)'
+  ms_SG: 'Malay (Singapore)'
+  ml: 'Malayalam'
+  ml_IN: 'Malayalam (India)'
+  mt: 'Maltese'
+  mt_MT: 'Maltese (Malta)'
+  gv: 'Manx'
+  gv_IM: 'Manx (Isle of Man)'
+  mr: 'Marathi'
+  mr_IN: 'Marathi (India)'
+  mn: 'Mongolian'
+  mn_Cyrl_MN: 'Mongolian (Cyrillic, Mongolia)'
+  mn_Cyrl: 'Mongolian (Cyrillic)'
+  mn_MN: 'Mongolian (Mongolia)'
+  ne: 'Nepali'
+  ne_IN: 'Nepali (India)'
+  ne_NP: 'Nepali (Nepal)'
+  nd: 'North Ndebele'
+  nd_ZW: 'North Ndebele (Zimbabwe)'
+  se: 'Northern Sami'
+  se_FI: 'Northern Sami (Finland)'
+  se_NO: 'Northern Sami (Norway)'
+  se_SE: 'Northern Sami (Sweden)'
+  no: 'Norwegian'
+  no_NO: 'Norwegian (Norway)'
+  nb: 'Norwegian Bokmål'
+  nb_NO: 'Norwegian Bokmål (Norway)'
+  nb_SJ: 'Norwegian Bokmål (Svalbard & Jan Mayen)'
+  nn: 'Norwegian Nynorsk'
+  nn_NO: 'Norwegian Nynorsk (Norway)'
+  or: 'Oriya'
+  or_IN: 'Oriya (India)'
+  om: 'Oromo'
+  om_ET: 'Oromo (Ethiopia)'
+  om_KE: 'Oromo (Kenya)'
+  os: 'Ossetic'
+  os_GE: 'Ossetic (Georgia)'
+  os_RU: 'Ossetic (Russia)'
+  ps: 'Pashto'
+  ps_AF: 'Pashto (Afghanistan)'
+  fa: 'Persian'
+  fa_AF: 'Persian (Afghanistan)'
+  fa_IR: 'Persian (Iran)'
+  pl: 'Polish'
+  pl_PL: 'Polish (Poland)'
+  pt: 'Portuguese'
+  pt_AO: 'Portuguese (Angola)'
+  pt_BR: 'Portuguese (Brazil)'
+  pt_CV: 'Portuguese (Cape Verde)'
+  pt_GW: 'Portuguese (Guinea-Bissau)'
+  pt_MO: 'Portuguese (Macau SAR China)'
+  pt_MZ: 'Portuguese (Mozambique)'
+  pt_PT: 'Portuguese (Portugal)'
+  pt_ST: 'Portuguese (São Tomé & Príncipe)'
+  pt_TL: 'Portuguese (Timor-Leste)'
+  pa: 'Punjabi'
+  pa_Arab_PK: 'Punjabi (Arabic, Pakistan)'
+  pa_Arab: 'Punjabi (Arabic)'
+  pa_Guru_IN: 'Punjabi (Gurmukhi, India)'
+  pa_Guru: 'Punjabi (Gurmukhi)'
+  pa_IN: 'Punjabi (India)'
+  pa_PK: 'Punjabi (Pakistan)'
+  qu: 'Quechua'
+  qu_BO: 'Quechua (Bolivia)'
+  qu_EC: 'Quechua (Ecuador)'
+  qu_PE: 'Quechua (Peru)'
+  ro: 'Romanian'
+  ro_MD: 'Romanian (Moldova)'
+  ro_RO: 'Romanian (Romania)'
+  rm: 'Romansh'
+  rm_CH: 'Romansh (Switzerland)'
+  rn: 'Rundi'
+  rn_BI: 'Rundi (Burundi)'
+  ru: 'Russian'
+  ru_BY: 'Russian (Belarus)'
+  ru_KZ: 'Russian (Kazakhstan)'
+  ru_KG: 'Russian (Kyrgyzstan)'
+  ru_MD: 'Russian (Moldova)'
+  ru_RU: 'Russian (Russia)'
+  ru_UA: 'Russian (Ukraine)'
+  sg: 'Sango'
+  sg_CF: 'Sango (Central African Republic)'
+  gd: 'Scottish Gaelic'
+  gd_GB: 'Scottish Gaelic (United Kingdom)'
+  sr: 'Serbian'
+  sr_BA: 'Serbian (Bosnia & Herzegovina)'
+  sr_Cyrl_BA: 'Serbian (Cyrillic, Bosnia & Herzegovina)'
+  sr_Cyrl_XK: 'Serbian (Cyrillic, Kosovo)'
+  sr_Cyrl_ME: 'Serbian (Cyrillic, Montenegro)'
+  sr_Cyrl_RS: 'Serbian (Cyrillic, Serbia)'
+  sr_Cyrl: 'Serbian (Cyrillic)'
+  sr_XK: 'Serbian (Kosovo)'
+  sr_Latn_BA: 'Serbian (Latin, Bosnia & Herzegovina)'
+  sr_Latn_XK: 'Serbian (Latin, Kosovo)'
+  sr_Latn_ME: 'Serbian (Latin, Montenegro)'
+  sr_Latn_RS: 'Serbian (Latin, Serbia)'
+  sr_Latn: 'Serbian (Latin)'
+  sr_ME: 'Serbian (Montenegro)'
+  sr_RS: 'Serbian (Serbia)'
+  sh: 'Serbo-Croatian'
+  sh_BA: 'Serbo-Croatian (Bosnia & Herzegovina)'
+  sn: 'Shona'
+  sn_ZW: 'Shona (Zimbabwe)'
+  ii: 'Sichuan Yi'
+  ii_CN: 'Sichuan Yi (China)'
+  si: 'Sinhala'
+  si_LK: 'Sinhala (Sri Lanka)'
+  sk: 'Slovak'
+  sk_SK: 'Slovak (Slovakia)'
+  sl: 'Slovenian'
+  sl_SI: 'Slovenian (Slovenia)'
+  so: 'Somali'
+  so_DJ: 'Somali (Djibouti)'
+  so_ET: 'Somali (Ethiopia)'
+  so_KE: 'Somali (Kenya)'
+  so_SO: 'Somali (Somalia)'
+  es: 'Spanish'
+  es_AR: 'Spanish (Argentina)'
+  es_BO: 'Spanish (Bolivia)'
+  es_IC: 'Spanish (Canary Islands)'
+  es_EA: 'Spanish (Ceuta & Melilla)'
+  es_CL: 'Spanish (Chile)'
+  es_CO: 'Spanish (Colombia)'
+  es_CR: 'Spanish (Costa Rica)'
+  es_CU: 'Spanish (Cuba)'
+  es_DO: 'Spanish (Dominican Republic)'
+  es_EC: 'Spanish (Ecuador)'
+  es_SV: 'Spanish (El Salvador)'
+  es_GQ: 'Spanish (Equatorial Guinea)'
+  es_GT: 'Spanish (Guatemala)'
+  es_HN: 'Spanish (Honduras)'
+  es_MX: 'Spanish (Mexico)'
+  es_NI: 'Spanish (Nicaragua)'
+  es_PA: 'Spanish (Panama)'
+  es_PY: 'Spanish (Paraguay)'
+  es_PE: 'Spanish (Peru)'
+  es_PH: 'Spanish (Philippines)'
+  es_PR: 'Spanish (Puerto Rico)'
+  es_ES: 'Spanish (Spain)'
+  es_US: 'Spanish (United States)'
+  es_UY: 'Spanish (Uruguay)'
+  es_VE: 'Spanish (Venezuela)'
+  sw: 'Swahili'
+  sw_KE: 'Swahili (Kenya)'
+  sw_TZ: 'Swahili (Tanzania)'
+  sw_UG: 'Swahili (Uganda)'
+  sv: 'Swedish'
+  sv_AX: 'Swedish (Åland Islands)'
+  sv_FI: 'Swedish (Finland)'
+  sv_SE: 'Swedish (Sweden)'
+  tl: 'Tagalog'
+  tl_PH: 'Tagalog (Philippines)'
+  ta: 'Tamil'
+  ta_IN: 'Tamil (India)'
+  ta_MY: 'Tamil (Malaysia)'
+  ta_SG: 'Tamil (Singapore)'
+  ta_LK: 'Tamil (Sri Lanka)'
+  te: 'Telugu'
+  te_IN: 'Telugu (India)'
+  th: 'Thai'
+  th_TH: 'Thai (Thailand)'
+  bo: 'Tibetan'
+  bo_CN: 'Tibetan (China)'
+  bo_IN: 'Tibetan (India)'
+  ti: 'Tigrinya'
+  ti_ER: 'Tigrinya (Eritrea)'
+  ti_ET: 'Tigrinya (Ethiopia)'
+  to: 'Tongan'
+  to_TO: 'Tongan (Tonga)'
+  tr: 'Turkish'
+  tr_CY: 'Turkish (Cyprus)'
+  tr_TR: 'Turkish (Turkey)'
+  uk: 'Ukrainian'
+  uk_UA: 'Ukrainian (Ukraine)'
+  ur: 'Urdu'
+  ur_IN: 'Urdu (India)'
+  ur_PK: 'Urdu (Pakistan)'
+  ug: 'Uyghur'
+  ug_Arab_CN: 'Uyghur (Arabic, China)'
+  ug_Arab: 'Uyghur (Arabic)'
+  ug_CN: 'Uyghur (China)'
+  uz: 'Uzbek'
+  uz_AF: 'Uzbek (Afghanistan)'
+  uz_Arab_AF: 'Uzbek (Arabic, Afghanistan)'
+  uz_Arab: 'Uzbek (Arabic)'
+  uz_Cyrl_UZ: 'Uzbek (Cyrillic, Uzbekistan)'
+  uz_Cyrl: 'Uzbek (Cyrillic)'
+  uz_Latn_UZ: 'Uzbek (Latin, Uzbekistan)'
+  uz_Latn: 'Uzbek (Latin)'
+  uz_UZ: 'Uzbek (Uzbekistan)'
+  vi: 'Vietnamese'
+  vi_VN: 'Vietnamese (Vietnam)'
+  cy: 'Welsh'
+  cy_GB: 'Welsh (United Kingdom)'
+  fy: 'Western Frisian'
+  fy_NL: 'Western Frisian (Netherlands)'
+  yi: 'Yiddish'
+  yo: 'Yoruba'
+  yo_BJ: 'Yoruba (Benin)'
+  yo_NG: 'Yoruba (Nigeria)'
+  zu: 'Zulu'
+  zu_ZA: 'Zulu (South Africa)'
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -219,7 +219,11 @@ en:
    footer:
      made_with: Made with
    header:
-      go_to_homepage: Go to the main site
+      go_to_homepage: Website
+      appearance:
+        system: System
+        light: Light
+        dark: Dark
    404:
      title: Page not found
      description: We couldn't find the page you were looking for.
--- a/spec/helpers/portal_helper_spec.rb
+++ b/spec/helpers/portal_helper_spec.rb
@@ -57,4 +57,32 @@ describe PortalHelper do
      end
    end
  end
+
+  describe '#get_theme_names' do
+    it 'returns the light theme name' do
+      expect(helper.get_theme_names('light')).to eq(I18n.t('public_portal.header.appearance.light'))
+    end
+
+    it 'returns the dark theme name' do
+      expect(helper.get_theme_names('dark')).to eq(I18n.t('public_portal.header.appearance.dark'))
+    end
+
+    it 'returns the system theme name for any other value' do
+      expect(helper.get_theme_names('any_other_value')).to eq(I18n.t('public_portal.header.appearance.system'))
+    end
+  end
+
+  describe '#get_theme_icon' do
+    it 'returns the light theme icon' do
+      expect(helper.get_theme_icon('light')).to eq('icons/sun')
+    end
+
+    it 'returns the dark theme icon' do
+      expect(helper.get_theme_icon('dark')).to eq('icons/moon')
+    end
+
+    it 'returns the system theme icon for any other value' do
+      expect(helper.get_theme_icon('any_other_value')).to eq('icons/monitor')
+    end
+  end
 end