valitovgaziz/tp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new file: valitovgaziz/html/darkTheme.css

Browse Source 
new file:   valitovgaziz/html/darkThemeToggle.js
	modified:   valitovgaziz/html/index.html
	modified:   valitovgaziz/html/scripts.js
	modified:   valitovgaziz/html/style.css
Add the dark theme into valitovgaziz site
This commit is contained in:
Газиз Валитов
2025-07-17 16:29:34 +05:00
parent a5f7810d0c
commit 1812b2a8af
5 changed files with 99 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
valitovgaziz/html/darkTheme.css
+56
View File
@@ -0,0 +1,56 @@
/* Переменные для темной темы */
:root {
--dark-bg: #1a252f;
--dark-text: #ecf0f1;
--dark-card: #2c3e50;
--dark-border: #34495e;
}
/* Кнопка переключения темы */
header {
position: relative;
}
.theme-toggle {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 12px;
background: var(--secondary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
/* Стили для темной темы */
body.dark-mode {
background-color: var(--dark-bg);
color: var(--dark-text);
}
body.dark-mode header {
background-color: var(--dark-bg);
color: var(--dark-text);
}
body.dark-mode .section {
background: var(--dark-card);
color: var(--dark-text);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
border: 1px solid var(--dark-border);
}
body.dark-mode .contact-info a {
color: var(--secondary);
}
body.dark-mode .skill-tag {
background-color: var(--dark-border);
color: var(--dark-text);
}
body.dark-mode footer {
color: var(--dark-text);
}
valitovgaziz/html/darkThemeToggle.js
+5
View File
@@ -0,0 +1,5 @@
function toggleTheme() {
document.body.classList.toggle('dark-mode');
const btn = document.querySelector('.theme-toggle');
btn.textContent = document.body.classList.contains('dark-mode') ? '☀️ Светлая тема' : '🌙 Темная тема';
}
valitovgaziz/html/index.html
+5 -1
View File
@@ -5,7 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script> <script src="scripts.js"></script>
<title>Валитов Газиз - Fullstack разработчик</title> <script src="darkThemeToggle.js"></script>
<title>ValitovGaziz</title>
</head> </head>
<body> <body>
<!-- Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
@@ -65,6 +66,9 @@
<button id="saveContactBtn" onclick="saveContact()"> <button id="saveContactBtn" onclick="saveContact()">
Скачать контакты Скачать контакты
</button> </button>
<button class="theme-toggle" onclick="toggleTheme()">
🌙 Темная тема
</button>
</header> </header>
<div class="section"> <div class="section">
valitovgaziz/html/scripts.js
+1 -1
View File
@@ -31,4 +31,4 @@ END:VCARD`;
// Освобождаем память // Освобождаем память
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
} }
valitovgaziz/html/style.css
+32
View File
@@ -1,4 +1,5 @@
@import url("saveContactsButtonStyle.css"); @import url("saveContactsButtonStyle.css");
@import url("darkTheme.css");
:root { :root {
--primary: #2c3e50; --primary: #2c3e50;
@@ -112,10 +113,41 @@ footer {
color: var(--dark); color: var(--dark);
font-size: 0.9rem; font-size: 0.9rem;
} }
/* Адаптация для мелких экранов */
@media (max-width: 768px) { @media (max-width: 768px) {
header {
padding: 1rem 0;
font-size: 1.2rem;
}
.contact-info { .contact-info {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
font-size: 0.9rem;
}
.section {
padding: 1.5rem;
}
.timeline {
padding-left: 20px; /* Уменьшаем отступ для линии времени */
}
.timeline:before {
left: 8px; /* Сдвигаем линию ближе к краю */
}
.timeline-item:before {
left: -20px; /* Сдвигаем маркер времени */
}
.skill-tag {
font-size: 0.8rem;
}
footer {
font-size: 0.8rem;
} }
} }