Fsoc-level-easy/dark.css at main · FSOC-OSS/Fsoc-level-easy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/* Dark Theme Variables */
:root {
  --background-dark: #181a2a;
  --surface-dark: #23263a;
  --primary-dark: #764ba2;
  --secondary-dark: #667eea;
  --accent-dark: #f9a826;
  --text-dark: #f3f3f3;
  --shadow-dark: rgba(0,0,0,0.5);
}

/* Apply dark theme styles when .dark-theme is on body */
body.dark-theme {
  background: linear-gradient(120deg, #23263a 0%, #181a2a 100%);
  color: var(--text-dark);
}

header.dark-theme {
  background: linear-gradient(135deg, #23263a 0%, #764ba2 100%);
  color: var(--text-dark);
}


main.dark-theme,
section.dark-theme {
  background: linear-gradient(120deg, #23263a 0%, #181a2a 100%);
  color: var(--text-dark);
}

.card,
.typewriter-card,
.flip-card-front,
.flip-card-back,
.modalBox {
  background: var(--surface-dark);
  color: var(--text-dark);
  box-shadow: 0 2px 12px var(--shadow-dark);
}

.btn,
.theme-toggle-btn {
  background: var(--primary-dark);
  color: var(--text-dark);
  box-shadow: 0 2px 8px var(--shadow-dark);
}

.btn:hover,
.theme-toggle-btn:hover {
  background: var(--secondary-dark);
  color: var(--accent-dark);
}

footer {
  background: linear-gradient(120deg, #23263a 0%, #764ba2 100%);
  color: var(--text-dark);
}

.footerMiddle a,
.footerMiddle p,
.footerMiddle li {
  color: var(--text-dark);
}

.flip-card-front {
  background: linear-gradient(120deg, #23263a 0%, #764ba2 100%);
}
.flip-card-back {
  background: linear-gradient(120deg, #764ba2 0%, #23263a 100%);
}

/* Gallery items */
.gallery-item {
  background: var(--surface-dark);
  color: var(--text-dark);
}

/* Modal */
.modalBox {
  background: var(--surface-dark);
  color: var(--text-dark);
}

/* Responsive adjustments for dark theme */
@media (max-width: 600px) {
  main.dark-theme,
  section.dark-theme {
    background: var(--surface-dark);
  }
}