Start writing password reset

index.html

@@ -161,14 +161,18 @@
               <small>Check this to enable keyboard combinations to perform different helpful actions.</small>
             </label>
     
-            <label>Theme
-              <select id="settingsTheme">
+            <label>Default Theme <small>(the theme new dictionaries will use)</small>
+              <select id="settingsDefaultTheme">
                 <option value="default">Default</option>
                 <option value="dark">Dark</option>
                 <option value="light">Light</option>
                 <option value="blue">Blue</option>
                 <option value="green">Green</option>
+                <option value="yellow">Yellow</option>
+                <option value="red">Red</option>
                 <option value="royal">Royal</option>
+                <option value="mint">Mint</option>
+                <option value="grape">Grape</option>
               </select>
             </label>
             <div id="accountSettings"></div>
@@ -286,6 +290,20 @@
           <input type="checkbox" id="editSortByDefinition"><br>
           <small>Checking this box will sort the words in alphabetical order based on the Definition instead of the Word.</small>
         </label>
+        <label>Theme
+          <select id="editTheme">
+            <option value="default">Default</option>
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+            <option value="yellow">Yellow</option>
+            <option value="red">Red</option>
+            <option value="royal">Royal</option>
+            <option value="mint">Mint</option>
+            <option value="grape">Grape</option>
+          </select>
+        </label>
       </section>
 
       <section id="editActionsTab" style="display:none;">

src/constants.js

@@ -46,7 +46,7 @@ export const DEFAULT_DICTIONARY = {
     allowDuplicates: false,
     caseSensitive: false,
     sortByDefinition: false,
-    isComplete: false,
+    theme: 'default',
     isPublic: false,
   },
   lastUpdated: getTimestampInSeconds(),
@@ -57,7 +57,7 @@ export const DEFAULT_DICTIONARY = {
 export const DEFAULT_SETTINGS = {
   useIPAPronunciationField: true,
   useHotkeys: true,
-  theme: 'default',
+  defaultTheme: 'default',
 };
 
 export const DEFAULT_PAGE_SIZE = 50;

src/js/account/passwordReset.js

@@ -0,0 +1,59 @@
+import { setupInfoModal } from "../setupListeners";
+import { request } from "./helpers";
+
+export function renderForgotPasswordForm() {
+  const modal = document.createElement('section');
+  modal.classList.add('modal');
+  modal.innerHTML = `<div class="modal-background"></div>
+  <div class="modal-content">
+    <a class="close-button">&times;&#xFE0E;</a>
+    <section class="info-modal" id="forgotPasswordForm">
+      <h2>Forgot Password</h2>
+      <p>Enter the email address associated with your Lexiconga account to initiate a password reset.</p>
+      <label>Email<br>
+        <input type="email" id="forgotPasswordEmailField" style="max-width:250px;" maxlength="100">
+      </label>
+      <section id="forgotPasswordErrorMessages"></section>
+      <button class="button" id="forgotPasswordSubmit">Email Password Reset Key</button>
+    </section>
+  </div>`;
+
+  document.body.appendChild(modal);
+
+  setupStartResetForm();
+  setupInfoModal(modal);
+}
+
+function setupStartResetForm() {
+  document.getElementById('forgotPasswordSubmit').addEventListener('click', sendPasswordReset);
+}
+
+function sendPasswordReset() {
+  const email = document.getElementById('forgotPasswordEmailField').value.trim();
+  const errorMessageElement = document.getElementById('forgotPasswordErrorMessages');
+  let errorMessage = '';
+  
+  if (email === '') {
+    errorMessage += '<p class="red bold">Please enter an email address.</p>';
+  }
+
+  errorMessageElement.innerHTML = errorMessage;
+
+  if (errorMessage === '') {
+    request({
+      action: 'initiate-password-reset',
+      email,
+    }, success => {
+      console.log(success);
+    }, error => {
+      errorMessage += '<p class="red bold">' + error + '</p>';
+    }).then(() => {
+      errorMessageElement.innerHTML = errorMessage;
+      if (errorMessage === '') {
+        document.getElementById('forgotPasswordForm').innerHTML = `<h2>Password Reset Key Sent</h2>
+        <p>Go check your email for the password reset link.</p>
+        <p><em>Note that it may be sent to your spam/junk folder by mistake.</em></p>`;
+      }
+    });
+  }
+}

src/js/account/setupListeners.js

@@ -2,6 +2,7 @@ import { logIn, createAccount } from "./login";
 import { setCookie } from "../StackOverflow/cookie";
 import { changeDictionary, createNewDictionary } from "./dictionaryManagement";
 import { addMessage } from "../utilities";
+import { renderForgotPasswordForm } from "./passwordReset";
 
 export function setupLoginModal(modal) {
   const closeElements = modal.querySelectorAll('.modal-background, .close-button');
@@ -36,6 +37,7 @@ export function setupLoginModal(modal) {
   });
 
   document.getElementById('loginSubmit').addEventListener('click', logIn);
+  document.getElementById('forgotPasswordButton').addEventListener('click', renderForgotPasswordForm);
   document.getElementById('createAccountSubmit').addEventListener('click', createAccount);
 }
 

src/js/account/sync.js

@@ -100,7 +100,7 @@ export function uploadWholeDictionary(asNew = false) {
       dictionary,
     }, remoteId => {
       window.currentDictionary.externalID = remoteId;
-      dictionary.getElementById('publicLink').value = document.domain + window.location.pathname + remoteId.toString();
+      document.getElementById('publicLink').value = document.domain + window.location.pathname + remoteId.toString();
       saveDictionary(false);
       addMessage('Dictionary Uploaded Successfully');
       renderChangeDictionaryOptions();

src/js/dictionaryManagement.js

@@ -1,4 +1,4 @@
-import { renderDictionaryDetails, renderPartsOfSpeech, renderAll, renderWords } from "./render";
+import { renderDictionaryDetails, renderPartsOfSpeech, renderAll, renderTheme } from "./render";
 import { removeTags, cloneObject, getTimestampInSeconds, download, slugify } from "../helpers";
 import { LOCAL_STORAGE_KEY, DEFAULT_DICTIONARY, MIGRATE_VERSION } from "../constants";
 import { addMessage, getNextId, hasToken } from "./utilities";
@@ -13,7 +13,7 @@ export function openEditModal() {
   const { name, specification, description, partsOfSpeech } = window.currentDictionary;
   const { consonants, vowels, blends, phonotactics } = window.currentDictionary.details.phonology;
   const { orthography, grammar } = window.currentDictionary.details;
-  const { allowDuplicates, caseSensitive, sortByDefinition, isPublic } = window.currentDictionary.settings;
+  const { allowDuplicates, caseSensitive, sortByDefinition, theme, isPublic } = window.currentDictionary.settings;
   
   document.getElementById('editName').value = name;
   document.getElementById('editSpecification').value = specification;
@@ -35,6 +35,7 @@ export function openEditModal() {
   document.getElementById('editCaseSensitive').checked = caseSensitive;
   if (allowDuplicates) document.getElementById('editCaseSensitive').disabled = true;
   document.getElementById('editSortByDefinition').checked = sortByDefinition;
+  document.getElementById('editTheme').value = theme;
   if (hasToken()) {
     document.getElementById('editIsPublic').checked = isPublic;
   }
@@ -63,6 +64,7 @@ export function saveEditModal() {
   window.currentDictionary.settings.caseSensitive = document.getElementById('editCaseSensitive').checked;
   const needsReSort = window.currentDictionary.settings.sortByDefinition !== document.getElementById('editSortByDefinition').checked;
   window.currentDictionary.settings.sortByDefinition = document.getElementById('editSortByDefinition').checked;
+  window.currentDictionary.settings.theme = document.getElementById('editTheme').value;
 
   let needsWordRender = false;
   if (hasToken()) {
@@ -74,6 +76,7 @@ export function saveEditModal() {
 
   addMessage('Saved ' + window.currentDictionary.specification + ' Successfully');
   saveDictionary();
+  renderTheme();
   renderDictionaryDetails();
   renderPartsOfSpeech();
   
@@ -113,6 +116,7 @@ export function loadDictionary() {
 
 export function clearDictionary() {
   window.currentDictionary = cloneObject(DEFAULT_DICTIONARY);
+  window.currentDictionary.settings.theme = window.settings.defaultTheme;
 }
 
 export function deleteDictionary() {

src/js/render.js

@@ -18,11 +18,17 @@ import { getPaginationData } from './pagination';
 import { getOpenEditForms, parseReferences } from './wordManagement';
 
 export function renderAll() {
+  renderTheme();
   renderDictionaryDetails();
   renderPartsOfSpeech();
   renderWords();
 }
 
+export function renderTheme() {
+  const { theme } = window.currentDictionary.settings;
+  document.body.id = theme + 'Theme';
+}
+
 export function renderDictionaryDetails() {
   renderName();
 

src/js/settings.js

@@ -8,7 +8,6 @@ import { enableHotKeys, disableHotKeys } from "./hotkeys";
 export function loadSettings() {
   const storedSettings = window.localStorage.getItem(SETTINGS_KEY);
   window.settings = storedSettings ? JSON.parse(storedSettings) : cloneObject(DEFAULT_SETTINGS);
-  updateTheme();
   toggleIPAPronunciationFields();
 }
 
@@ -17,17 +16,12 @@ export function saveSettings() {
   addMessage('Settings Saved!');
 }
 
-export function updateTheme() {
-  const { theme } = window.settings;
-  document.body.id = theme + 'Theme';
-}
-
 export function openSettingsModal() {
-  const { useIPAPronunciationField, useHotkeys, theme } = window.settings;
+  const { useIPAPronunciationField, useHotkeys, defaultTheme } = window.settings;
 
   document.getElementById('settingsUseIPA').checked = useIPAPronunciationField;
   document.getElementById('settingsUseHotkeys').checked = useHotkeys;
-  document.getElementById('settingsTheme').value = theme;
+  document.getElementById('settingsDefaultTheme').value = defaultTheme;
 
   document.getElementById('settingsModal').style.display = '';
 }
@@ -35,7 +29,7 @@ export function openSettingsModal() {
 export function saveSettingsModal() {
   window.settings.useIPAPronunciationField = document.getElementById('settingsUseIPA').checked;
   window.settings.useHotkeys = document.getElementById('settingsUseHotkeys').checked;
-  window.settings.theme = document.getElementById('settingsTheme').value;
+  window.settings.defaultTheme = document.getElementById('settingsDefaultTheme').value;
 
   if (hasToken()) {
     import('./account/index.js').then(account => {
@@ -57,7 +51,6 @@ export function saveSettingsModal() {
   }
 
   saveSettings();
-  updateTheme();
   toggleHotkeysEnabled();
   toggleIPAPronunciationFields();
 }

src/js/view/render.js

@@ -5,8 +5,10 @@ import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearc
 import { showSection } from '../displayToggles';
 import { setupSearchFilters, setupInfoModal } from './setupListeners';
 import { parseReferences } from '../wordManagement';
+import { renderTheme } from '../render';
 
 export function renderAll() {
+  renderTheme();
   renderDictionaryDetails();
   renderPartsOfSpeech();
   renderWords();

src/main.scss

@@ -10,6 +10,15 @@
 @import 'scss/mobile/elements';
 
 @import 'scss/themes/default';
+@import 'scss/themes/dark';
+@import 'scss/themes/light';
+@import 'scss/themes/blue';
+@import 'scss/themes/green';
+@import 'scss/themes/royal';
+@import 'scss/themes/yellow';
+@import 'scss/themes/red';
+@import 'scss/themes/mint';
+@import 'scss/themes/grape';
 
 html, body {
   font-family: $font;

src/php/api/Dictionary.php

@@ -127,7 +127,7 @@ VALUES ($new_id, ?, ?, ?, ?)";
             'allowDuplicates' => $result['allow_duplicates'] === '1' ? true : false,
             'caseSensitive' => $result['case_sensitive'] === '1' ? true : false,
             'sortByDefinition' => $result['sort_by_definition'] === '1' ? true : false,
-            'isComplete' => false,
+            'theme' => $result['theme'],
             'isPublic' => $result['is_public'] === '1' ? true : false,
           ),
           'lastUpdated' => is_null($result['last_updated']) ? $result['created_on'] : $result['last_updated'],
@@ -278,7 +278,7 @@ VALUES ($new_id, ?, ?, ?, ?)";
           'allowDuplicates' => $result['allow_duplicates'] === '1' ? true : false,
           'caseSensitive' => $result['case_sensitive'] === '1' ? true : false,
           'sortByDefinition' => $result['sort_by_definition'] === '1' ? true : false,
-          'isComplete' => false,
+          'theme' => $result['theme'],
           'isPublic' => $result['is_public'] === '1' ? true : false,
         ),
         'lastUpdated' => is_null($result['last_updated']) ? $result['created_on'] : $result['last_updated'],
@@ -296,7 +296,7 @@ SET name=:name,
   allow_duplicates=:allow_duplicates,
   case_sensitive=:case_sensitive,
   sort_by_definition=:sort_by_definition,
-  is_complete=:is_complete,
+  theme=:theme,
   is_public=:is_public,
   last_updated=:last_updated,
   created_on=:created_on
@@ -310,7 +310,7 @@ WHERE user=$user AND id=$dictionary";
       ':allow_duplicates' => $dictionary_object['settings']['allowDuplicates'] ? 1 : 0,
       ':case_sensitive' => $dictionary_object['settings']['caseSensitive'] ? 1 : 0,
       ':sort_by_definition' => $dictionary_object['settings']['sortByDefinition'] ? 1 : 0,
-      ':is_complete' => 0,
+      ':theme' => $dictionary_object['settings']['theme'],
       ':is_public' => $dictionary_object['settings']['isPublic'] ? 1 : 0,
       ':last_updated' => $dictionary_object['lastUpdated'],
       ':created_on' => $dictionary_object['createdOn'],

src/php/api/User.php

@@ -267,6 +267,74 @@ VALUES (?, ?, ?, ?, ?)';
     return false;
   }
 
+  public function setPasswordReset($email) {
+    $date = date("Y-m-d H:i:s");
+    $reset_code = random_int(0, 999999999);
+    $reset_code_hash = $this->token->hash($reset_code);
+    $query = "UPDATE `users` SET `password_reset_code`=?, `password_reset_date`=? WHERE `email`=?;";
+    $reset = $this->db->execute($query, array(
+      $reset_code,
+      $date,
+      $email,
+    ));
+    
+    if ($reset) {
+      $user_data = $this->getUserDataByEmailForPasswordReset($email);
+      if ($user_data) {
+        $to = $email;
+        $subject = "Here's your Lexiconga password reset link";
+        $message = "Hello " . $user_data['public_name'] . "\r\n\r\nSomeone has requested a password reset link for your Lexiconga account. If it was you, you can reset your password by going to the link below and entering a new password for yourself:\r\n";
+        $message .= "http://lexicon.ga/passwordreset?account=" . $user_data['id'] . "&code=" . $reset_code_hash . "\r\n\r\n";
+        $message .= "If it wasn't you who requested the link, you can ignore this email since it was only sent to you, but you might want to consider changing your password when you have a chance.\r\n\r\n";
+        $message .= "The password link will only be valid for today until you use it.\r\n\r\n";
+        $message .= "Thanks!\r\nThe Lexiconga Admins";
+        $header = "From: Lexiconga Password Reset <donotreply@lexicon.ga>\r\n"
+          . "Reply-To: help@lexicon.ga\r\n"
+          . "X-Mailer: PHP/" . phpversion();
+        if (mail($to, $subject, $message, $header)) {
+          return true;
+        } else {
+          return array(
+            'error' => 'Could not send email to ' . $email,
+          );
+        }
+      }
+    } else {
+      return array(
+        'error' => $this->db->last_error_info,
+      );
+    }
+
+    return false;
+  }
+
+  public function checkPasswordReset($id, $code) {
+    $date = date("Y-m-d");
+    $daterange = "'" . $date . " 00:00:00' AND '" . $date . " 23:59:59'";
+    $unhashed_code = $this->token->unhash($code);
+    $query = "SELECT * FROM `users` WHERE `id`=? AND `password_reset_code`=? AND `password_reset_date` BETWEEN " . $daterange . ";";
+    $stmt = $this->db->query($query, array(
+      $id,
+      $unhashed_code,
+    ));
+    $results = $stmt->fetchAll();
+    
+    if ($stmt && $results) {
+        return count($results) === 1;
+    } else {
+        return false;
+    }
+  }
+
+  public function resetPassword($password, $email) {
+    $password_hash = password_hash($password, PASSWORD_DEFAULT);
+    $query = "UPDATE `users` SET `password`=?, `password_reset_date`='0000-00-00 00:00:00' WHERE `email`=?;";
+    return $this->db->execute($query, array(
+      $password_hash,
+      $email,
+    ));
+  }
+
   private function generateUserToken ($user_id, $dictionary_id) {
     $user_data = array(
       'id' => intval($user_id),
@@ -287,4 +355,17 @@ VALUES (?, ?, ?, ?, ?)';
     $stmt = $this->db->query($update_query, array($new_password));
     return $stmt->rowCount() === 1;
   }
+
+  private function getUserDataByEmailForPasswordReset($email) {
+    $query = 'SELECT id, public_name FROM users WHERE email=?';
+    $stmt = $this->db->query($query, array($email));
+    $result = $stmt->fetch();
+    if ($stmt && $result) {
+      return array(
+        'id' => $result['id'],
+        'public_name' => $result['public_name'] ? $result['public_name'] : 'Lexiconger',
+      );
+    }
+    return false;
+  }
 }

src/php/api/index.php

@@ -418,6 +418,32 @@ switch ($action) {
       'error' => true,
     ), 400);
   }
+  case 'initiate-password-reset': {
+    if (isset($request['email'])) {
+      $user = new User();
+      $password_reset = $user->setPasswordReset($request['email']);
+      if ($password_reset === true) {
+        return Response::json(array(
+          'data' => $password_reset,
+          'error' => false,
+        ), 200);
+      }
+      if (isset($password_reset['error'])) {
+        return Response::json(array(
+          'data' => $password_reset['error'],
+          'error' => true,
+        ), 500);
+      }
+      return Response::json(array(
+        'data' => 'Could not send password reset key: email not found',
+        'error' => true,
+      ), 401);
+    }
+    return Response::json(array(
+      'data' => 'Could not send password reset key: required data missing',
+      'error' => true,
+    ), 400);
+  }
 
   default: {
     return Response::html('Hi!');

src/scss/_elements.scss

@@ -115,6 +115,8 @@ span .tag {
   line-height: 30px;
   cursor: pointer;
   user-select: none;
+  text-decoration: none;
+  font-weight: bold;
 
   &.small {
     font-size: 80%;
@@ -157,6 +159,7 @@ span .tag {
       font-size: 200%;
       cursor: pointer;
       user-select: none;
+      text-decoration: none;
     }
   }
 }

src/scss/_structure.scss

@@ -344,6 +344,7 @@ $nav-font-height: 16px;
       font-size: 25px;
       line-height: 10px;
       cursor: pointer;
+      text-decoration: none;
 
       &:before {
         content: '';

src/scss/themes/_blue.scss

@@ -0,0 +1,256 @@
+#blueTheme {
+  $dark: #757575;
+  $mid: #a0a0a0;
+  $light: #cecece;
+  $white: #ffffff;
+  $red: #de0000;
+
+  $header-color: #3333ee;
+  $background-color: #4444ff;
+  $footer-color: #2222cc;
+  $link-color: #3333aa;
+  $button-color: #6868dd;
+  $message-color: #7777dd;
+  $word-form-color: #3232bb;
+  $dictionary-color: #3535cc;
+  $entry-color: #5252dd;
+  $input-color: #4444ff;
+  $details-color: #7777ee;
+  $modal-color: #4444dd;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: $white;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: $white;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: $white;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    color: $white;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: $white;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: #000000;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px #000000;
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px #000000;
+
+    a {
+      color: $white;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $light;
+  }
+}
+}

src/scss/themes/_dark.scss

@@ -0,0 +1,256 @@
+#darkTheme {
+  $dark: #757575;
+  $mid: #a0a0a0;
+  $light: #cecece;
+  $white: #ffffff;
+  $red: #de0000;
+
+  $header-color: #111111;
+  $background-color: #222222;
+  $footer-color: #000000;
+  $link-color: #bababa;
+  $button-color: #464646;
+  $message-color: #555555;
+  $word-form-color: #101010;
+  $dictionary-color: #111111;
+  $entry-color: #303030;
+  $input-color: #222222;
+  $details-color: #555555;
+  $modal-color: #222222;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: $light;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: $light;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: $light;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    color: $light;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: $light;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: $light;
+
+    &.red {
+      background-color: $red;
+      color: $light;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: $dark;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px $dark;
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px $dark;
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px $dark;
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px $dark;
+
+    a {
+      color: $light;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $light;
+  }
+}
+}

src/scss/themes/_default.scss

@@ -21,6 +21,7 @@
   $border: 1px solid $dark;
   
   background-color: $background-color;
+  color: #000000;
   
   a {
     color: $link-color;
@@ -50,6 +51,7 @@
 
   input, textarea, select, option {
     background-color: $input-color;
+    border: 1px solid $dark;
   }
 
   .tag {
@@ -75,8 +77,6 @@
     border: 1px solid darken($button-color, 2);
     background-color: $button-color;
     color: #000000;
-    text-decoration: none;
-    font-weight: bold;
 
     &.red {
       background-color: $red;

src/scss/themes/_grape.scss

@@ -0,0 +1,255 @@
+#grapeTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #de0000;
+
+  $header-color: #cc9dea;
+  $background-color: #cfaae6;
+  $footer-color: #6318cb;
+  $link-color: #1000a0;
+  $button-color: #b078dc;
+  $message-color: #c088c0;
+  $word-form-color: #5536ba;
+  $dictionary-color: #7251bd;
+  $entry-color: #ad7dd7;
+  $input-color: #dfc0ef;
+  $details-color: #d5b2f2;
+  $modal-color: #d5b2f2;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: #000000;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: #000000;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: #000000;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.75);
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px rgba(50, 50, 50, 0.75);
+
+    a {
+      color: #000000;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $white;
+  }
+}
+}

src/scss/themes/_green.scss

@@ -0,0 +1,256 @@
+#greenTheme {
+  $dark: #757575;
+  $mid: #a0a0a0;
+  $light: #cecece;
+  $white: #ffffff;
+  $red: #b42032;
+
+  $header-color: #55aa33;
+  $background-color: #70b044;
+  $footer-color: #559900;
+  $link-color: #007700;
+  $button-color: #acee79;
+  $message-color: #eeee77;
+  $word-form-color: #54aa32;
+  $dictionary-color: #57ad23;
+  $entry-color: #96cf52;
+  $input-color: #aaee88;
+  $details-color: #99dd77;
+  $modal-color: #80cc54;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: #000000;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    color: #000000;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: #000000;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: #000000;
+
+    &.red {
+      background-color: $red;
+      color: #000000;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: #000000;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px #000000;
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px #000000;
+
+    a {
+      color: #000000;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $light;
+  }
+}
+}

src/scss/themes/_light.scss

@@ -0,0 +1,255 @@
+#lightTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #c94557;
+
+  $header-color: $mid;
+  $background-color: $white;
+  $footer-color: $dark;
+  $link-color: #0055ff;
+  $button-color: $light;
+  $message-color: $mid;
+  $word-form-color: $mid;
+  $dictionary-color: $mid;
+  $entry-color: $light;
+  $input-color: $white;
+  $details-color: $white;
+  $modal-color: $light;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: #000000;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: #000000;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: #000000;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.75);
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px rgba(50, 50, 50, 0.75);
+
+    a {
+      color: #000000;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $white;
+  }
+}
+}

src/scss/themes/_mint.scss

@@ -0,0 +1,255 @@
+#mintTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+
+  $header-color: #9deacc;
+  $background-color: #aae6cf;
+  $footer-color: #18cb63;
+  $link-color: #00a010;
+  $button-color: #78dcb0;
+  $message-color: #88c0c0;
+  $word-form-color: #36ba55;
+  $dictionary-color: #51bd72;
+  $entry-color: #7dd7ad;
+  $input-color: #c0efdf;
+  $details-color: #b2f2d5;
+  $modal-color: #b2f2d5;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: #000000;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: #000000;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: #000000;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.75);
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px rgba(50, 50, 50, 0.75);
+
+    a {
+      color: #000000;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $white;
+  }
+}
+}

src/scss/themes/_red.scss

@@ -0,0 +1,256 @@
+#redTheme {
+  $dark: #757575;
+  $mid: #a0a0a0;
+  $light: #cecece;
+  $white: #ffffff;
+  $red: #ffffff;
+
+  $header-color: #ee3333;
+  $background-color: #ff4444;
+  $footer-color: #cc2222;
+  $link-color: #aa0000;
+  $button-color: #dd6868;
+  $message-color: #dd7777;
+  $word-form-color: #bb3232;
+  $dictionary-color: #cc3535;
+  $entry-color: #dd5252;
+  $input-color: #ff4444;
+  $details-color: #ee7777;
+  $modal-color: #dd4444;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: #000000;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    color: #000000;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: #000000;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: #000000;
+
+    &.red {
+      background-color: $red;
+      color: #000000;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: #000000;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px #000000;
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px #000000;
+
+    a {
+      color: #000000;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $light;
+  }
+}
+}

src/scss/themes/_royal.scss

@@ -0,0 +1,256 @@
+#royalTheme {
+  $dark: #757575;
+  $mid: #a0a0a0;
+  $light: #cecece;
+  $white: #ffffff;
+  $red: #de0000;
+
+  $header-color: #aa33ee;
+  $background-color: #bb44ff;
+  $footer-color: #8822cc;
+  $link-color: #ffaaff;
+  $button-color: #9968dd;
+  $message-color: #9977dd;
+  $word-form-color: #7732bb;
+  $dictionary-color: #8835cc;
+  $entry-color: #9952dd;
+  $input-color: #bb44ff;
+  $details-color: #aa77ee;
+  $modal-color: #9944dd;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: $white;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: $white;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: $white;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    color: $white;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: $white;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: #000000;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px #000000;
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px #000000;
+
+    a {
+      color: $white;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $light;
+  }
+}
+}

src/scss/themes/_yellow.scss

@@ -0,0 +1,256 @@
+#yellowTheme {
+  $dark: #757575;
+  $mid: #a0a0a0;
+  $light: #cecece;
+  $white: #ffffff;
+  $red: #de0000;
+
+  $header-color: #eeaa33;
+  $background-color: #ffbb44;
+  $footer-color: #cc8822;
+  $link-color: #ffff77;
+  $button-color: #dd9968;
+  $message-color: #dd9977;
+  $word-form-color: #bb7732;
+  $dictionary-color: #cc8835;
+  $entry-color: #dd9952;
+  $input-color: #ffbb44;
+  $details-color: #eeaa77;
+  $modal-color: #dd9944;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  color: #000000;
+  
+  a {
+    color: $link-color;
+  }
+  
+  p, span {
+    &.red {
+      color: $red;
+    }
+  }
+
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+    color: #000000;
+    border: 1px solid $dark;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
+    &.red {
+      background-color: $red;
+      color: #000000;
+    }
+  }
+
+  span .tag {
+    border: $border;
+    background-color: $button-color;
+    &+.tag {
+      background-color: lighten($button-color, 25);
+      border-left: none;
+    }
+  }
+
+  .button {
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: #000000;
+
+    &.red {
+      background-color: $red;
+      color: #000000;
+    }
+  }
+
+  .modal {
+    .modal-background {
+      background-color: #000000;
+    }
+    .modal-content {
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
+    }
+  }
+
+  .tabs {
+    ul {
+      border-bottom: $border;
+    }
+    li {
+      border-top: $border;
+      border-left: $border;
+      border-right: $border;
+      background-color: $button-color;
+
+      &.active {
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
+      }
+    }
+  }
+
+  header {
+    border-bottom: 1px solid $mid;
+  }
+
+  main {
+    article {
+      border: $border;
+    }
+  }
+
+  footer {
+    border-top: 1px solid $mid;
+  }
+
+  #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px #000000;
+
+    #title {
+      display: inline-block;
+      margin: 3px $general-padding 3px 0;
+    }
+
+    #openSearchModal {
+      cursor: pointer;
+    }
+
+    #searchModal {
+      .modal-content {
+        section+footer {
+          background-color: $modal-color;
+        }
+      }
+    }
+  }
+
+  #wordForm {
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
+  #detailsSection {
+    nav ul {
+      li {
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
+
+        &.active {
+          background-color: lighten($button-color, 15);
+        }
+      }
+    }
+
+    #detailsPanel {
+      background-color: $details-color;
+    }
+  }
+
+  .entry {
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
+    header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
+      .word-option-list {
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
+        
+        .word-option {
+          &:hover {
+            background-color: lighten($entry-color, 5);
+          }
+        }
+      }
+    }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
+  }
+
+  #messagingSection {
+    .message {
+      background-color: $message-color;
+      border: $border;
+
+      &.error {
+        background-color: lighten($red, 0.75);
+      }
+
+      .close-button {
+        &:before {
+          background-color: #455455;
+        }
+      }
+    }
+  }
+
+  #bottom {
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px #000000;
+
+    a {
+      color: #000000;
+    }
+  }
+
+}
+
+@media (max-width: 750px) {
+#defaultTheme {
+  $dark: #bababa;
+  $mid: #dedede;
+  $light: #efefef;
+  $white: #ffffff;
+  $red: #b42032;
+  $border: 1px solid $dark;
+  
+  #mobileWordFormShow {
+    background-color: #00de00;
+    border: $border;
+    color: $light;
+  }
+}
+}

src/structure.sql

@@ -16,7 +16,7 @@ CREATE TABLE IF NOT EXISTS `dictionaries` (
   `allow_duplicates` tinyint(1) NOT NULL DEFAULT 0,
   `case_sensitive` tinyint(1) NOT NULL DEFAULT 0,
   `sort_by_definition` tinyint(1) NOT NULL DEFAULT 0,
-  `is_complete` tinyint(1) NOT NULL DEFAULT 0,
+  `theme` varchar(20) COLLATE utf8_unicode_ci NOT NULL DEFAULT 'default',
   `is_public` tinyint(1) NOT NULL DEFAULT 0,
   `last_updated` int(11) DEFAULT NULL,
   `created_on` int(11) NOT NULL,

view.html

@@ -13,7 +13,7 @@
   <script>window.currentDictionary = JSON.parse('{{dict_json}}');</script>
   <script src="src/js/view/index.js"></script>
 </head>
-<body>
+<body id="defaultTheme">
   <header id="top">
     <h1 id="title">Lexiconga</h1>