diff --git a/fortune_generator/css/styles.css b/fortune_generator/css/styles.css index 00f5bdf..ab13334 100644 --- a/fortune_generator/css/styles.css +++ b/fortune_generator/css/styles.css @@ -1,6 +1,8 @@ :root { --button-color: #73a3eb; --button-hover-color: #459aef; + --toggle-theme-button-color: #000000; + --copy-result-button-color: #000000; --bg-color: #ffffff; --good-fortune-color: #e74c3c; --bad-fortune-color: #000000bf; @@ -11,20 +13,6 @@ --title-color: #000000cc; } -.dark-mode { - --button-color: #5d99f4; - --button-hover-color: #9ac6f1; - --bg-color: #1e1d24; - --good-fortune-color: #e74c3c; - --bad-fortune-color: #d4d4d4d9; - --middle-fortune-color: #57c857; - --desc-color: #838282; - --date-color: #0ed64aed; - --special-event-color: #6477f3; - --dark-mode-icon-color: #ffffff; - --title-color: #cdcdcd; -} - * { overflow: hidden; text-align: center; @@ -101,16 +89,39 @@ button:hover { z-index: 0; } -#dark-mode-icon { +#toggle-theme-button { margin-top: 15px; font-size: 2.4rem; - color: var(--dark-mode-icon-color); + color: var(--toggle-theme-button-color); cursor: pointer; opacity: 85%; } -#copy-result { +#copy-result-button { margin-top: 20px; font-size: 1.5rem; - color: var(--dark-mode-icon-color); + color: var(--copy-result-button-color); +} + +#themeModal { + .modal-content { + background-color: var(--bg-color) !important; + color: var(--title-color) !important; + } + + .modal-header, + .modal-footer { + background-color: var(--bg-color) !important; + color: var(--bg-color) !important; + } + + .modal-title, + .btn-close { + color: var(--title-color) !important; + } +} + +#themeItem { + background-color: var(--bg-color); + color: var(--title-color); } diff --git a/fortune_generator/index.html b/fortune_generator/index.html index 6f35bb6..ab6db38 100644 --- a/fortune_generator/index.html +++ b/fortune_generator/index.html @@ -8,17 +8,11 @@ - - - @@ -40,6 +34,7 @@ } +
@@ -116,21 +111,67 @@
- +
+ + + + + + + diff --git a/fortune_generator/js/fortune.js b/fortune_generator/js/fortune.js index 8a79751..58664cb 100644 --- a/fortune_generator/js/fortune.js +++ b/fortune_generator/js/fortune.js @@ -373,7 +373,7 @@ function Appear() { J_l_2_desc.html(l_2_desc); } } - $("#copy-result").removeClass("d-none"); + $("#copy-result-button").removeClass("d-none"); } function getLuck() { diff --git a/fortune_generator/js/scripts.js b/fortune_generator/js/scripts.js index c3ce266..55fa293 100644 --- a/fortune_generator/js/scripts.js +++ b/fortune_generator/js/scripts.js @@ -1,10 +1,3 @@ -let darkModeIcon = document.querySelector("#dark-mode-icon"); - -darkModeIcon.onclick = () => { - darkModeIcon.classList.toggle("bx-sun"); - document.body.classList.toggle("dark-mode"); -}; - function copyResultImageToClipboard() { try { const $title = $("#title").clone().wrap('
'); diff --git a/fortune_generator/js/theme.js b/fortune_generator/js/theme.js new file mode 100644 index 0000000..8b2b78d --- /dev/null +++ b/fortune_generator/js/theme.js @@ -0,0 +1,45 @@ +document.addEventListener("DOMContentLoaded", () => { + const themeListContainer = document.querySelector("#themeList"); + const root = document.documentElement; + + async function fetchThemes() { + try { + const response = await fetch("./json/themes.json"); + const themes = await response.json(); + populateThemeList(themes["themes"]); + } catch (error) { + console.error("Error fetching themes:", error); + } + } + + // Populate theme list in modal + function populateThemeList(themes) { + themeListContainer.innerHTML = ""; + themes.forEach((theme) => { + const themeItem = document.createElement("div"); + themeItem.className = + "theme-item list-group-item d-flex justify-content-between align-items-center"; + themeItem.style.cursor = "pointer"; + themeItem.id = "themeItem"; + + // Add theme name + const themeName = document.createElement("span"); + themeName.textContent = theme.name; + themeItem.appendChild(themeName); + + // Apply theme on click + themeItem.addEventListener("click", () => applyTheme(theme.properties)); + + themeListContainer.appendChild(themeItem); + }); + } + + // Apply theme by setting CSS variables + function applyTheme(properties) { + Object.entries(properties).forEach(([key, value]) => { + root.style.setProperty(`--${key}`, value); + }); + } + + fetchThemes(); +}); diff --git a/fortune_generator/json/themes.json b/fortune_generator/json/themes.json new file mode 100644 index 0000000..dcef731 --- /dev/null +++ b/fortune_generator/json/themes.json @@ -0,0 +1,38 @@ +{ + "themes": [ + { + "name": "light", + "properties": { + "bg-color": "#ffffff", + "good-fortune-color": "#e74c3c", + "bad-fortune-color": "#000000bf", + "desc-color": "#7f7f7f", + "button-color": "#73a3eb", + "button-hover-color": "#459aef", + "toggle-theme-button-color": "#000000", + "copy-result-button-color": "#000000", + "middle-fortune-color": "#5eb95e", + "date-color": "#096e1bc9", + "special-event-color": "#3e4fbb", + "title-color": "#000000cc" + } + }, + { + "name": "dark", + "properties": { + "bg-color": "#1e1d24", + "good-fortune-color": "#e74c3c", + "bad-fortune-color": "#d4d4d4d9", + "desc-color": "#838282", + "button-color": "#5d99f4", + "button-hover-color": "#9ac6f1", + "toggle-theme-button-color": "#ffffff", + "copy-result-button-color": "#ffffff", + "middle-fortune-color": "#57c857", + "date-color": "#0ed64aed", + "special-event-color": "#6477f3", + "title-color": "#cdcdcd" + } + } + ] +}