Skip to content

Commit c5cf03a

Browse files
digininjadigininja
authored
Merge pull request #682 from eoto88/dark-theme
Dark theme and icon to toggle theme
2 parents 9796a71 + 7214976 commit c5cf03a

6 files changed

Lines changed: 95 additions & 4 deletions

File tree

‎dvwa/css/help.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,23 @@ span.spoiler {
2323
background-color: black;
2424
color: black;
2525
}
26+
27+
/* === Dark theme === */
28+
body.dark {
29+
background: #2f2f2f;
30+
color: #f8fafa;
31+
}
32+
33+
body.dark a {
34+
color: #99cc33;
35+
}
36+
37+
body.dark div#code {
38+
background-color: #2f2f2f;
39+
color: #f8fafa;
40+
}
41+
42+
body.dark table {
43+
background-color: #2f2f2f;
44+
border: none !important;
45+
}

‎dvwa/css/main.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ div#container {
132132
}
133133

134134
div#header {
135+
position: relative;
135136
padding: 10px;
136137
overflow: hidden;
137138
background: #2f2f2f;
@@ -296,3 +297,39 @@ span.failure {
296297
color:red;
297298
font-weight: bold;
298299
}
300+
301+
.theme-icon {
302+
position: absolute;
303+
right: 0;
304+
}
305+
306+
.theme-icon img {
307+
height: 32px;
308+
width: 32px;
309+
}
310+
311+
312+
/* === Dark theme === */
313+
body.home.dark {
314+
background: #2f2f2f;
315+
color: #f8fafa;
316+
}
317+
318+
body.home.dark #container,
319+
body.home.dark #main_menu,
320+
body.home.dark #main_body,
321+
body.home.dark #system_info {
322+
background: #2f2f2f;
323+
}
324+
325+
body.home.dark .vulnerable_code_area {
326+
background: #2f2f2f;
327+
}
328+
329+
body.home.dark .message {
330+
background-color: #2f2f2f;
331+
}
332+
333+
body.home.dark div#guestbook_comments {
334+
background-color: #2f2f2f;
335+
}

‎dvwa/css/source.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,21 @@ div#area {
2727
color: #a50a0a;
2828
}
2929

30+
/* === Dark theme === */
31+
body.dark {
32+
background: #2f2f2f;
33+
color: #f8fafa;
34+
}
35+
36+
body.dark a {
37+
color: #99cc33;
38+
}
39+
40+
body.dark div#code {
41+
background-color: #bdbdbd;
42+
}
43+
44+
body.dark table {
45+
background-color: #2f2f2f;
46+
border: none !important;
47+
}

‎dvwa/images/theme-light-dark.png‎

1 KB
Loading

‎dvwa/includes/dvwaPage.inc.php‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,14 @@ function &dvwaPageNewGrab() {
189189
}
190190

191191

192+
function dvwaThemeGet() {
193+
if (isset($_COOKIE['theme'])) {
194+
return $_COOKIE[ 'theme' ];
195+
}
196+
return 'light';
197+
}
198+
199+
192200
function dvwaSecurityLevelGet() {
193201
global $_DVWA;
194202

@@ -394,13 +402,15 @@ function dvwaHtmlEcho( $pPage ) {
394402
395403
</head>
396404
397-
<body class=\"home\">
405+
<body class=\"home " . dvwaThemeGet() . "\">
398406
<div id=\"container\">
399407
400408
<div id=\"header\">
401409
402410
<img src=\"" . DVWA_WEB_PAGE_TO_ROOT . "dvwa/images/logo.png\" alt=\"Damn Vulnerable Web Application\" />
403-
411+
<a href=\"#\" onclick=\"javascript:toggleTheme();\" class=\"theme-icon\" title=\"Toggle theme between light and dark.\">
412+
<img src=\"" . DVWA_WEB_PAGE_TO_ROOT . "dvwa/images/theme-light-dark.png\" alt=\"Damn Vulnerable Web Application\" />
413+
</a>
404414
</div>
405415
406416
<div id=\"main_menu\">
@@ -463,7 +473,7 @@ function dvwaHelpHtmlEcho( $pPage ) {
463473
464474
</head>
465475
466-
<body>
476+
<body class=\"" . dvwaThemeGet() . "\">
467477
468478
<div id=\"container\">
469479
@@ -499,7 +509,7 @@ function dvwaSourceHtmlEcho( $pPage ) {
499509
500510
</head>
501511
502-
<body>
512+
<body class=\"" . dvwaThemeGet() . "\">
503513
504514
<div id=\"container\">
505515

‎dvwa/js/dvwaPage.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,9 @@ with (thisform) {
3737
function confirmClearGuestbook() {
3838
return confirm("Are you sure you want to clear the guestbook?");
3939
}
40+
41+
function toggleTheme() {
42+
document.body.classList.toggle('dark');
43+
const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
44+
document.cookie = "theme=" + theme + "; path=/";
45+
}

0 commit comments

Comments
 (0)