Tema versus

README.md

@@ -18,7 +18,12 @@ npm install
 npm run dev
 ```
 
-3. Acesse no navegador:
+3. Em outro terminal, acompanhe o Sass e gere o CSS automaticamente:
+```bash
+npm run watch:styles
+```
+
+4. Acesse no navegador:
 ```
 http://localhost:1234
 ```

asset/javascript/ThemeController.js

@@ -0,0 +1,49 @@
+function ThemeController(reference) {
+    const body = reference;
+
+    const themeMenuButton = body.querySelector('.js-theme-menu-button');
+    const themeDropdown = body.querySelector('.js-theme-dropdown');
+
+    const defaultThemeButton = body.querySelector('.js-default-theme-button');
+    const versusThemeButton = body.querySelector('.js-versus-theme-button');
+
+    function init() {
+        bindButtons();
+    }
+
+    function bindButtons() {
+        themeMenuButton.addEventListener('click', toggleThemeMenu);
+        defaultThemeButton.addEventListener('click', setDefaultTheme);
+        versusThemeButton.addEventListener('click', setVersusTheme);
+    }
+
+    function toggleThemeMenu() {
+        themeDropdown.classList.toggle('hide');
+    }
+
+    function setDefaultTheme() {
+    body.classList.remove('versus-theme');
+    body.classList.remove('inverted');
+    closeThemeMenu();
+    }
+
+    function setVersusTheme() {
+    body.classList.add('versus-theme');
+    body.classList.remove('inverted');
+    closeThemeMenu();
+    }
+
+    function closeThemeMenu() {
+        themeDropdown.classList.add('hide');
+    }
+
+    init();
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    const reference = document.querySelector('.js-body');
+    const themeController = new ThemeController(reference);
+    window.themeController = themeController;
+});
+
+export default ThemeController;