Added functionality for changing the theme

2025-02-18 21:04:25 +03:00
parent 2caec1fc0a
commit f7e4a8ac56
3 changed files with 41 additions and 5 deletions
@@ -13,7 +13,10 @@
 <!-- Разработчик: Илья) -->
 <body>
    <h1>Генератор QR-кодов</h1>
-    <textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea>
+    <div class="inputs">
+        <textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea>
+        <input title="Изменить тему" id="isLightTheme" type="checkbox" >
+    </div>
    <br>
    <button id="generate-btn">Сгенерировать QR-код</button>
    <button id="download-qr-btn">Скачать QR-код</button>
@@ -7,6 +7,8 @@ const textError = document.getElementById('error');
 const zoomInBtn = document.getElementById('zoom-in-btn');
 const zoomOutBtn = document.getElementById('zoom-out-btn');
 let scale = 1; // Начальный масштаб
+const checkbox = document.getElementById('isLightTheme');
+const html = document.getElementsByTagName('html')[0];

 // Установление значения поля ввода из local storage
 window.onload = () => {
@@ -19,6 +21,25 @@ window.onload = () => {
    }
 }

+function changeButtonsColor(color) {
+    const buttons = document.getElementsByTagName('button');
+    for (let index = 0; index < buttons.length; index++) {
+        const btn = buttons[index];
+        btn.style.color = color;
+    }
+}
+
+checkbox.addEventListener('change', () => {
+    if (checkbox.checked) {
+        html.style.backgroundColor = '#fff';
+        changeButtonsColor('#1e1e1e')
+    } else {
+        html.style.backgroundColor = '#1e1e1e';
+        changeButtonsColor('#fff')
+    }
+})
+
+
 // Вывести сообщение пользователю
 function logMessage(message, color = 'red') {
    textError.innerText = message;
@@ -3,11 +3,13 @@
    color: white;
 }

+html {
+    background-color: #1e1e1e;
+}
+
 body {
    font-family: Arial, sans-serif;
-    margin: 20px;
-    padding: 0;
-    background-color: #1e1e1e;
+    margin: 0;
    text-align: center;
 }

@@ -15,17 +17,23 @@ h1 {
    color: orangered;
 }

+.inputs {
+    display: flex;
+    justify-content: center;
+}
+
 textarea,
 button {
    padding: 10px;
    margin: 10px;
-    border: 1px solid #333;
+    border: none;
    border-radius: 5px;
    font-size: 16px;
 }

 textarea {
    color: orangered;
+    border: 1px solid #000;
 }

 textarea::selection {
@@ -55,3 +63,7 @@ button:active {
    max-width: 100%;
    height: auto;
 }
+
+canvas {
+    border: 1px solid #000;
+}