Alan Walker Theme

By lolpowerluke Version 1.3.7.1 Updated 02/24/2026 37.9K downloads

dark theme with Alan Walker's logo as background, is compatible with bd's transparency settings

dark customizable transparent black

Live preview

Full Discord interface with this theme applied — powered by ThemePreview.

Screenshot

alanWalker.theme.css

GitHub

Open source

https://raw.githubusercontent.com/lolpowerluke/bd-themes/42fec860bb0945a60b12b4bdb3c97a03a8853bc6/AlanWalkerTheme/alanWalker.theme.css

1/**

2 * @name Alan Walker Theme

 * @description  dark theme with Alan Walker's logo as background, credit to DevilBro#4401 for settingsicons, credit to Nyria#3863 for userbuttons in the serverbar and spotifyControls

4 * @author lolpowerluke

5 * @version 1.3.7.1

6 * @source https://github.com/lolpowerluke/bd-themes/blob/main/AlanWalkerTheme/alanWalker.theme.css

7 * @website https://github.com/lolpowerluke

8*/

10@import url('https://lolpowerluke.github.io/bd-themes/AlanWalkerTheme/main.css');

11/*all variables here*/

12:root {

13 /*Theme Dependent Stuff*/

14 --title-bar-content: ";DISCORD (Alan Walker Theme)";;

15 --title-bar-lead-display: flex; /* default: flex, use none if you want to remove them */

16 --main-background: url('https://i.imgur.com/tt9snCk.png?1') center right no-repeat;

17 --back-selected-dm-pic: url('https://i.imgur.com/tmY77W1.png') center left no-repeat;

18 --home-button-background: url('https://i.imgur.com/PrJ5xwf.png');

19 --back-pos-dm: 0px;

20 --home-button-background-size: 50px;

22 /*Other Stuff*/

23 --crash-screen-image: url('https://i.imgur.com/z6YF9bI.png');

25 /*USRBG*/

  --USRBG-popout-background: url('https://i.imgur.com/tt9snCk.png?1'); /*fallback background for if the user has no usrbg set*/

28 /*settings*/

29 --settings-max-width: 1650px; /*";unset"; for full screen width, ";1650px"; for default*/

  --settings-myaccount-max-width: 740px; /*";unset"; for full screen width, ";740px"; for default (740px is still full screen width for 1080p monitors or lower)*/

32 /*other stuff*/

33 --user-buttons-spacing: 8px;

34 --standard-account-height: 52px;

35 --avatar-radius: 5px;

36 --role-circle: 5px;

37 --guild-margin-bottom: 135px; /* default: 135px, change to 180px if you have the gameactivitytoggle plugin*/

39 /*Border Radius*/

40 --border-radius-0: 0;

41 --border-radius-xs: 2px;

42 --border-radius-s: 4px;

43 --border-radius-m: 8px;

44 --border-radius-l: 12px;

45 --border-radius-xl: 16px;

46 --border-radius-xxl: 32px;

48 /*Transparent Chat Header*/

49 --margin-chat-top: 48px; /*On: 48px, off: 0px*/

51 /*Member list*/

52 --memberlist-no-hover-width: 60px;

53 --memberlist-hover-width: 240px;

55 /*Embeds*/

56 --embed-width: 500px;

58 /*Settings*/

59 --bd-addon-cards-opacity: 1;

61 /*Streamer mode*/

62 --stream-mode-hover-duration: .2s;

63 --stream-mode-hover-delay: 1s;

65 /*Call overlay minimum values*/

66 --call-min-width: 600px;

67 --call-min-height: 450px;

69 /*Spacing*/

70 --space-4: 4px;

71 --space-6: 6px;

72 --space-8: 8px;

74 /*emoji & gif*/

75 --popup-emoji-size: 180px;

77 /*smallDMchannelList*/

  --sidebar-no-hover-width: 60px; /*60px for just the channelIcon, 80px for the 1st 2/3 letters of the channel names, 240px to have it like default*/

79 --channel-name-no-hover-margin: 15px; /*15px for hidding the name, 0px for showing the name*/

80 --channel-name-no-hover-opacity: 0; /*0 for hiding the name, 1 for showing the name*/

81 --sidebar-no-hover-call-buttons-width: 0px; /*0px for hiding the buttons, 100% for showing them*/

82 --sidebar-no-hover-call-buttons-height: 0px; /*0px for hiding the buttons, 32px for showing them*/

84 /*Animations*/ /*set all to 0 to disable transitions*/

85 --animation-duration-1: 0.1s;

86 --animation-duration-2: 0.25s;

87 --animation-duration-3: 0.5s;

88 --animation-duration-4: 0.75s;

89 --animation-duration-5: 1s;

91 /*Version*/

92 --version-1-3-7-1: none;

94 /*Window width 700px or smaller*/

95 --guild-bar-width-700: 56px;

96}

97:root .bd-transparency {

98 /*Put any variable here you want to apply only if bd's transpareny settings is enabled*/

99 --bd-addon-cards-opacity: 0.8;

100}

101.theme-midnight,

102.theme-dark,

103#app-mount .theme-midnight,

104#app-mount .theme-dark,

105:root.theme-midnight,

106:root.theme-dark {

107 /*title bar*/

108 --title-bar-color: rgb(116, 116, 116);

109

110 /*Theme Dependent Stuff*/

111 --back-home-button: rgb(145, 145, 151);

112

113 /*borders*/

114 --border-color-1: 139, 139, 139;

115 --border-opacity-1: 0.5;

116 --border-color-hover: 76, 76, 76;

117 --border-opacity-hover: 1;

118

119 /*boxes*/

120 --back-color-boxes: rgba(73, 73, 73, 0.2);

121 --back-color-boxes-hover: rgba(90, 90, 90, 0.4);

122 --back-color-danger-boxes: rgba(255, 0, 0, 0.5);

123 --back-color-danger-boxes-hover: rgba(255, 0, 0, 0.7);

124

125 /*buttons*/

126 --back-color-danger-button: red;

127 --back-color-button: #008549fa;

128 --home-button-bg-color: black;

129 --message-buttons-bg: rgba(0, 0, 0, 0.8);

130

131 /*switches*/

132 --switch-off: rgba(255, 255, 255, 0.5);

133 --switch-on: rgba(65, 65, 65, 0.829);

134

135 /*badges*/

136 --back-color-number-badges: rgb(177, 179, 199);

137

138 /*playing card border color*/

139 --playing-card-border: rgb(88, 88, 88);

140 --spotify-color: rgb(0, 255, 0);

141 --separator: 77, 77, 77;

142

143 --back-user-buttons: rgba(255, 255, 255, 0.116);

144

145 /*unread pill*/

146 --unread-pill: rgb(145, 145, 151);

147 --unread-pill-shadow: rgb(255, 255, 255);

148

149 /*plugin colors*/

150 --permission-header: rgb(0, 0, 0);

151 --permission-role-side: rgba(0, 0, 0, 0.575);

152 --permission-perm-side: rgba(0, 0, 0, 0.678);

153 --image-utils-back: black;

154 --image-utils-border: rgb(59, 59, 59);

155 --back-channel-tabs: rgb(22, 22, 22);

156 --back-channel-tabs-selected: rgb(46, 46, 46);

157

158 /*discords integrated colors*/

159 --interactive-normal: white;

160 --interactive-active: white;

161 --interactive-hover: white;

162 --channels-default: white;

163 --background-primary: rgba(0, 0, 0, 0.5);

164 --background-secondary: rgba(35, 35, 39, 0.25);

165 --background-secondary-alt: var(--back-color-boxes);

166 --background-tertiary: rgb(0, 0, 0);

167 --background-floating: rgb(7, 7, 7);

168 --background-mentioned: rgba(255, 0, 0, 0.3);

169 --background-modifier-hover: rgba(90, 90, 90, 0.2);

170 --background-modifier-selected: rgba(45, 45, 45, 0.2);

171 --background-modifier-selected-hover: rgb(135, 135, 135, 0.2);

172 --info-warning-foreground: red;

173

174 /*Text colors*/

175 --text-normal: rgb(240, 240, 240);

176 --text-link: #00ff15;

177 --text-link-back: black;

178 --text-focus: white;

179 --dm-color: rgb(182, 182, 182);

180 --dm-unread-color: rgb(255, 255, 255);

181 --dm-muted-color: rgb(59, 59, 59);

182 --dm-selected-color: rgb(189, 189, 189);

183 --chat-header-name-color: rgb(182, 182, 182);

184

185 /*servers*/

186 --back-expanded-server-folder-icon: rgba(73, 73, 73, 0.548);

187 --back-expanded-server-folder: rgba(73, 73, 73, 0.582);

188 --back-server-no-img: rgba(66, 66, 66, 0.5);

189 --back-server-no-img-hover: rgba(92, 92, 92, 0.5);

190 --back-server-no-img-in-folder: rgba(94, 94, 94, 0.5);

191 --back-server-no-img-hover-in-folder: rgba(116, 116, 116, 0.5);

192

193 /*other stuff*/

194 --channeltextarea-background: rgba(77, 77, 77, 0.425);

195 --back-user-area: rgba(0, 0, 0, 0);

196 --back-user-area-hover: rgba(77, 77, 77, 0.425);

197 --chatbar-placeholder-color: rgb(112, 112, 112);

198 --back-color: rgb(0, 0, 0);

199 --gr-dm-headers: linear-gradient(to right, transparent, rgb(83, 83, 83));

200 --back-selected-dm: black;

201 --back-account: black;

202 --create-server: rgba(0, 0, 0, 0.911);

203 --create-server-text-color: rgb(255, 255, 255);

204 --create-server-choices: black;

205 --create-server-choices-border: rgb(255, 0, 0);

206 --create-server-footer-button: black;

207 --create-server-footer-button-hover: rgba(255, 255, 255, 0.123);

208 --back-color-search-bar: rgba(83, 83, 83, 0.349);

209 --screen-share-main: rgba(0, 0, 0, 0);

210 --message-hover: rgba(95, 95, 95, 0.267);

211 --typing-border: rgb(122, 122, 122);

212 --border-zoom: rgb(121, 121, 121);

213 --back-activity-panels: rgb(39, 39, 39);

214 --back-gradient-opacity: 1;

215 --back-gradient-top: 0, 0, 0;

216 --back-gradient-bottom: 40, 40, 40;

217 --profile-gradient-button-color: black;

218 --back-upload-button: rgb(var(--border-color-1));

219 --fill-upload-button: black;

220 --mentioned-badge: rgba(255, 0, 0, 0.5);

221 --back-call-buttons: rgba(255, 255, 255, 0.25);

222 --call-button-green: rgba(0, 128, 0, 0.5);

223 --call-button-red: rgba(255, 0, 0, 0.5);

224 --jump-to-present-bar: rgba(0, 0, 0, 0.6);

225 --jump-to-present-bar-hover: rgba(0, 0, 0, 0.8);

226 --channels-roles-options-bg: rgba(0, 0, 0, 0.4);

227

228 /*popouts*/

229 --popout-header: black;

230 --popout-body: rgba(0, 0, 0);

231 --popout-footer: black;

232 --popout-scroller: rgb(41, 41, 41);

233

234 /*settings*/

235 --back-bd-addon-cards: black;

236

237 /*menu*/

238 --menu-item-hover-color: rgb(170, 170, 170);

239 --back-color-search-popup: rgba(0, 0, 0, 0.8);

240

241 /*Memberlist*/

242 --back-memberlist: 0, 0, 0;

243 --back-memberlist-opacity: 0.4;

244

245 /*Frienlist*/

246 --back-friendlist-friends: rgba(0, 0, 0, 0.4);

247 --back-friendlist-friends-hover: rgba(44, 44, 44, 0.4);

248

249 /*forums*/

250 --back-color-forum-posts: rgba(7, 7, 7, 0.726);

251 --back-color-forum-posts-hover: rgba(34, 34, 34, 0.575);

252

253 /*user popouts*/

254 --user-popout: black;

255 --user-popout-alt: rgba(0, 0, 255, 0.24);

256 --back-small-user-popout-badges: rgba(0, 0, 0, 0.75);

257 --user-popout-gradient-color-mix-addition: rgba(0, 0, 0, 0.3);

258

259 /*plugin popups*/

260 --back-color-tooltips: black;

261 --back-channel-dms: black;

262 --back-server-themes-choice-button: black;

263 --back-friend-notifications: black;

264 --back-better-message-links: black;

265 --back-powercord-notices: black;

266 --channelTabs-favs-popup-bg: rgba(0, 0, 0, 0.8);

267

268 /*scroller (I think)*/

269 --back-color-menu: rgb(0, 0, 0, .8);

270 --back-role-scroller: black;

271

272 /*message separator*/

273 --message-separator-line: rgba(17, 0, 255, 0.5);

274 --unread-message: rgb(255, 0, 0);

275 --unread-message-line: rgb(255, 0, 0);

276

277 /*emoji & gif*/

278 --back-emoji-etc-picker: black;

279

280 /*other stuff I tried to make work*/

281 --scrollbar-auto-scrollbar-color-thumb: red;

282 --scrollbar-auto-scrollbar-color-track: blue;

283

284 /*Link Preview*/

285 --linkpreview-background: rgb(0, 0, 0, .5);

286

287 /*smallDMchannelList*/

288 --back-sidebar: rgba(0, 0, 0, 0.8);

289

290 /*Window width 700px or smaller*/

291 --back-user-buttons-700: rgb(0,0,0,0.4);

292 --back-user-buttons-hover-700: rgba(255, 255, 255, 0.2);

293

294 /* Update banner*/

295 --update-banner-background: rgba(255, 0, 0, 0.4);

296}

297.theme-midnight .bd-transparency,

298.theme-dark .bd-transparency,

299.bd-transparency #app-mount .theme-midnight,

300.bd-transparency #app-mount .theme-dark,

301:root.theme-midnight .bd-transparency,

302:root.theme-dark .bd-transparency {

303 /*Put any variable here you want to apply only if bd's transpareny settings is enabled*/

304 /*boxes*/

305 --back-color-boxes: rgba(0, 0, 0, 0.4);

306

307 /*background gradient*/

308 --back-gradient-opacity: 0.8;

309 --back-gradient-top: 0, 0, 0;

310 --back-gradient-bottom: 0, 0, 0;

311

312 /*emoji & gif*/

313 --back-emoji-etc-picker: rgba(0, 0, 0, 0.5);

314

315 /*popouts*/

316 --popout-header: rgba(0, 0, 0, 0.5);

317 --popout-body: rgba(0, 0, 0, 0.5);

318 --popout-footer: rgba(0, 0, 0, 0.5);

319 --popout-scroller: rgb(0, 0, 0);

320

321 /*other*/

322 --backdrop-opacity: 0.4;

323

324 /*idk*/

325 --back-user-buttons: transparent;

326

327 /* Update banner*/

328 --update-banner-background: rgba(255, 0, 0, 0.2);

329}

330#app-mount .theme-light,

331.theme-light,

332:root.theme-light {

333 /*title bar*/

334 --title-bar-color: rgb(116, 116, 116);

335

336 /*Theme Dependent Stuff*/

337 --back-home-button: rgb(70, 70, 70);

338

339 /*borders*/

340 --border-color-1: 116, 116, 116;

341 --border-opacity-1: 0.5;

342 --border-color-hover: 150, 150, 150;

343 --border-opacity-hover: 1;

344

345 /*boxes*/

346 --back-color-boxes: rgba(182, 182, 182, 0.2);

347 --back-color-boxes-hover: rgba(141, 141, 141, 0.4);

348 --back-color-danger-boxes: rgba(255, 0, 0, 0.5);

349 --back-color-danger-boxes-hover: rgba(255, 0, 0, 0.7);

350

351 /*buttons*/

352 --back-color-danger-button: red;

353 --back-color-button: #008549fa;

354 --home-button-bg-color: white;

355

356 /*switches*/

357 --switch-off: rgba(255, 255, 255, 0.5);

358 --switch-on: rgba(65, 65, 65, 0.829);

359

360 /*badges*/

361 --back-color-number-badges: rgb(177, 179, 199);

362

363 /*playing card border color*/

364 --playing-card-border: rgb(88, 88, 88);

365 --spotify-color: rgb(0, 255, 0);

366 --separator: 77, 77, 77;

367

368 --back-user-buttons: rgba(255, 255, 255, 0.116);

369

370 /*unread pill*/

371 --unread-pill: rgb(110, 110, 110);

372 --unread-pill-shadow: rgb(0, 0, 0);

373

374 /*plugin colors*/

375 --permission-header: rgb(255, 255, 255);

376 --permission-role-side: rgba(255, 255, 255, 0.575);

377 --permission-perm-side: rgba(255, 255, 255, 0.678);

378 --image-utils-back: white;

379 --image-utils-border: rgb(196, 196, 196);

380 --back-channel-tabs: rgb(233, 233, 233);

381 --back-channel-tabs-selected: rgb(209, 209, 209);

382

383 /*discords integrated colors*/

384 --interactive-normal: black;

385 --interactive-active: black;

386 --interactive-hover: black;

387 --channels-default: black;

388 --background-primary: rgba(255, 255, 255, 0.5);

389 --background-secondary: rgba(220, 220, 220, 0.25);

390 --background-secondary-alt: var(--back-color-boxes);

391 --background-tertiary: rgb(255, 255, 255);

392 --background-floating: rgb(248, 248, 248);

393 --background-mentioned: rgba(255, 0, 0, 0.1);

394 --background-modifier-hover: rgba(90, 90, 90, 0.2);

395 --background-modifier-selected: rgba(45, 45, 45, 0.2);

396 --background-modifier-selected-hover: rgb(110, 110, 110, 0.2);

397 --info-warning-foreground: red;

398

399 /*Text colors*/

400 --text-normal: rgb(15, 15, 15);

401 --text-link: #007a0a;

402 --text-link-back: white;

403 --text-focus: black;

404 --dm-color: rgb(32, 32, 32);

405 --dm-unread-color: black;

406 --dm-muted-color: rgb(151, 151, 151);

407 --dm-selected-color: rgb(65, 65, 65);

408 --chat-header-name-color: rgb(32, 32, 32);

409

410 /*server folders*/

411 --back-expanded-server-folder-icon: rgba(133, 133, 133, 0.55);

412 --back-expanded-server-folder: rgba(150, 150, 150, 0.6);

413 --back-server-no-img: rgba(196, 196, 196, 0.5);

414 --back-server-no-img-hover: rgba(151, 151, 151, 0.5);

415 --back-server-no-img-in-folder: rgba(158, 158, 158, 0.5);

416 --back-server-no-img-hover-in-folder: rgba(114, 114, 114, 0.5);

417

418 /*other stuff*/

419 --channeltextarea-background: rgba(143, 143, 143, 0.5);

420 --back-user-area: rgba(0, 0, 0, 0);

421 --back-user-area-hover: rgba(143, 143, 143, 0.5);

422 --chatbar-placeholder-color: rgb(92, 92, 92);

423 --back-color: white;

424 --gr-dm-headers: linear-gradient(to right, transparent, rgb(83, 83, 83));

425 --back-selected-dm: white;

426 --back-account: white;

427 --create-server: rgba(255, 255, 255, 0.9);

428 --create-server-text-color: black;

429 --create-server-choices: white;

430 --create-server-choices-border: rgb(255, 0, 0);

431 --create-server-footer-button: white;

432 --create-server-footer-button-hover: rgba(0, 0, 0, 0.123);

433 --back-color-search-bar: rgba(172, 172, 172, 0.35);

434 --screen-share-main: rgba(255, 255, 255, 0);

435 --message-hover: rgba(131, 131, 131, 0.25);

436 --typing-border: rgb(123, 123, 123);

437 --border-zoom: rgb(124, 124, 124);

438 --back-activity-panels: rgb(216, 216, 216);

439 --back-gradient-opacity: 1;

440 --back-gradient-top: 255, 255, 255;

441 --back-gradient-bottom: 175, 175, 175;

442 --profile-gradient-button-color: white;

443 --back-upload-button: rgb(116, 116, 116);

444 --fill-upload-button: var(--background-primary);

445 --mentioned-badge: rgb(255, 0, 0, 0.5);

446 --call-button-green: rgba(0, 128, 0, 0.5);

447 --call-button-red: rgba(255, 0, 0, 0.5);

448 --jump-to-present-bar: rgba(255, 255, 255, 0.6);

449 --jump-to-present-bar-hover: rgba(255, 255, 255, 0.8);

450 --channels-roles-options-bg: rgba(255, 255, 255, 0.4);

451

452 /*popouts*/

453 --popout-header: black;

454 --popout-body: rgba(0, 0, 0);

455 --popout-footer: black;

456 --popout-scroller: rgb(41, 41, 41);

457

458 /*settings*/

459 --back-bd-addon-cards: white;

460

461 /*menu*/

462 --menu-item-hover-color: rgb(170, 170, 170);

463 --back-color-search-popup: rgba(255, 255, 255, 0.8);

464

465 /*Memberlist*/

466 --back-memberlist: 0, 0, 0;

467 --back-memberlist-opacity: 0.4;

468

469 /*Frienlist*/

470 --back-friendlist-friends: rgba(255, 255, 255, 0.4);

471 --back-friendlist-friends-hover: rgba(211, 211, 211, 0.4);

472

473 /*forums*/

474 --back-color-forum-posts: rgba(7, 7, 7, 0.726);

475 --back-color-forum-posts-hover: rgba(34, 34, 34, 0.575);

476

477 /*user popouts*/

478 --user-popout: white;

479 --user-popout-alt: rgba(0, 0, 255, 0.24);

480 --back-small-user-popout-badges: rgba(255, 255, 255, 0.75);

481 --user-popout-gradient-color-mix-addition: rgba(255, 255, 255, 0.3);

482

483 /*plugin popups*/

484 --back-color-tooltips: white;

485 --back-channel-dms: white;

486 --back-server-themes-choice-button: white;

487 --back-friend-notifications: white;

488 --back-better-message-links: white;

489 --back-powercord-notices: white;

490 --channelTabs-favs-popup-bg: rgba(255, 255, 255, 0.8);

491

492 /*scroller (I think)*/

493 --back-color-menu: rgb(255, 255, 255, .8);

494 --back-role-scroller: black;

495

496 /*message separator*/

497 --message-separator-line: rgba(17, 0, 255, 0.5);

498 --unread-message: rgb(255, 0, 0);

499 --unread-message-line: rgb(255, 0, 0);

500

501 /*emoji & gif*/

502 --back-emoji-etc-picker: black;

503

504 /*other stuff I tried to make work*/

505 --scrollbar-auto-scrollbar-color-thumb: red;

506 --scrollbar-auto-scrollbar-color-track: blue;

507

508 /*Link Preview*/

509 --linkpreview-background: transparent;

510

511 /*smallDMchannelList*/

512 --back-sidebar: rgb(0, 0, 0);

513

514 /*Window width 700px or smaller*/

515 --back-user-buttons-700: rgb(0,0,0,0.2);

516 --back-user-buttons-hover-700: rgba(255, 255, 255, 0.2);

517

518 /* Update banner*/

519 --update-banner-background: rgba(255, 0, 0, 0.4);

520}

521.theme-light .bd-transparency,

522:root.theme-light .bd-transparency,

523.bd-transparency #app-mount .theme-light {

524 /*Put any variable here you want to apply only if bd's transpareny settings is enabled*/

525 /*boxes*/

526 --back-color-boxes: rgba(255, 255, 255, 0.4);

527

528 /*background gradient*/

529 --back-gradient-opacity: 0.6;

530 --back-gradient-top: 255, 255, 255;

531 --back-gradient-bottom: 255, 255, 255;

532

533 /*emoji & gif*/

534 --back-emoji-etc-picker: rgba(255, 255, 255, 0.5);

535

536 /*popouts*/

537 --popout-header: rgba(255, 255, 255, 0.5);

538 --popout-body: rgba(255, 255, 255, 0.5);

539 --popout-footer: rgba(255, 255, 255, 0.5);

540 --popout-scroller: rgb(255, 255, 255);

541

542 /*other*/

543 --backdrop-opacity: 0.4;

544

545 /*idk*/

546 --back-user-buttons: transparent;

547

548 /* Update banner*/

549 --update-banner-background: rgba(255, 0, 0, 0.2);

550}

/**
 * @name         Alan Walker Theme
 * @description  dark theme with Alan Walker's logo as background, credit to DevilBro#4401 for settingsicons, credit to Nyria#3863 for userbuttons in the serverbar and spotifyControls
 * @author       lolpowerluke
 * @version      1.3.7.1
 * @source       https://github.com/lolpowerluke/bd-themes/blob/main/AlanWalkerTheme/alanWalker.theme.css
 * @website      https://github.com/lolpowerluke
*/

@import url('https://lolpowerluke.github.io/bd-themes/AlanWalkerTheme/main.css');
/*all variables here*/
:root {
  /*Theme Dependent Stuff*/
  --title-bar-content: "DISCORD (Alan Walker Theme)";
  --title-bar-lead-display: flex; /* default: flex, use none if you want to remove them */
  --main-background: url('https://i.imgur.com/tt9snCk.png?1') center right no-repeat;
  --back-selected-dm-pic: url('https://i.imgur.com/tmY77W1.png') center left no-repeat;
  --home-button-background: url('https://i.imgur.com/PrJ5xwf.png');
  --back-pos-dm: 0px;
  --home-button-background-size: 50px;

  /*Other Stuff*/
  --crash-screen-image: url('https://i.imgur.com/z6YF9bI.png');

  /*USRBG*/
  --USRBG-popout-background: url('https://i.imgur.com/tt9snCk.png?1'); /*fallback background for if the user has no usrbg set*/

  /*settings*/
  --settings-max-width: 1650px; /*"unset" for full screen width, "1650px" for default*/
  --settings-myaccount-max-width: 740px; /*"unset" for full screen width, "740px" for default (740px is still full screen width for 1080p monitors or lower)*/

  /*other stuff*/
  --user-buttons-spacing: 8px;
  --standard-account-height: 52px;
  --avatar-radius: 5px;
  --role-circle: 5px;
  --guild-margin-bottom: 135px; /* default: 135px, change to 180px if you have the gameactivitytoggle plugin*/

  /*Border Radius*/
  --border-radius-0: 0;
  --border-radius-xs: 2px;
  --border-radius-s: 4px;
  --border-radius-m: 8px;
  --border-radius-l: 12px;
  --border-radius-xl: 16px;
  --border-radius-xxl: 32px;
  
  /*Transparent Chat Header*/
  --margin-chat-top: 48px; /*On: 48px, off: 0px*/

  /*Member list*/
  --memberlist-no-hover-width: 60px;
  --memberlist-hover-width: 240px;
    
  /*Embeds*/
  --embed-width: 500px;

  /*Settings*/
  --bd-addon-cards-opacity: 1;
  
  /*Streamer mode*/
  --stream-mode-hover-duration: .2s;
  --stream-mode-hover-delay: 1s;

  /*Call overlay minimum values*/
  --call-min-width: 600px;
  --call-min-height: 450px;

  /*Spacing*/
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;

  /*emoji & gif*/
  --popup-emoji-size: 180px;

  /*smallDMchannelList*/
  --sidebar-no-hover-width: 60px; /*60px for just the channelIcon, 80px for the 1st 2/3 letters of the channel names, 240px to have it like default*/
  --channel-name-no-hover-margin: 15px; /*15px for hidding the name, 0px for showing the name*/
  --channel-name-no-hover-opacity: 0; /*0 for hiding the name, 1 for showing the name*/
  --sidebar-no-hover-call-buttons-width: 0px; /*0px for hiding the buttons, 100% for showing them*/
  --sidebar-no-hover-call-buttons-height: 0px; /*0px for hiding the buttons, 32px for showing them*/

  /*Animations*/ /*set all to 0 to disable transitions*/
  --animation-duration-1: 0.1s;
  --animation-duration-2: 0.25s;
  --animation-duration-3: 0.5s;
  --animation-duration-4: 0.75s;
  --animation-duration-5: 1s;

  /*Version*/
  --version-1-3-7-1: none;

  /*Window width 700px or smaller*/
  --guild-bar-width-700: 56px;
}
:root .bd-transparency {
  /*Put any variable here you want to apply only if bd's transpareny settings is enabled*/
  --bd-addon-cards-opacity: 0.8;
}
.theme-midnight,
.theme-dark,
#app-mount .theme-midnight,
#app-mount .theme-dark,
:root.theme-midnight,
:root.theme-dark {
  /*title bar*/
  --title-bar-color: rgb(116, 116, 116);

  /*Theme Dependent Stuff*/
  --back-home-button: rgb(145, 145, 151);

  /*borders*/
  --border-color-1: 139, 139, 139;
  --border-opacity-1: 0.5;
  --border-color-hover: 76, 76, 76;
  --border-opacity-hover: 1;

  /*boxes*/
  --back-color-boxes: rgba(73, 73, 73, 0.2);
  --back-color-boxes-hover: rgba(90, 90, 90, 0.4);
  --back-color-danger-boxes: rgba(255, 0, 0, 0.5);
  --back-color-danger-boxes-hover: rgba(255, 0, 0, 0.7);

  /*buttons*/
  --back-color-danger-button: red;
  --back-color-button: #008549fa;
  --home-button-bg-color: black;
  --message-buttons-bg: rgba(0, 0, 0, 0.8);
  
  /*switches*/
  --switch-off: rgba(255, 255, 255, 0.5);
  --switch-on: rgba(65, 65, 65, 0.829);

  /*badges*/
  --back-color-number-badges: rgb(177, 179, 199);

  /*playing card border color*/
  --playing-card-border: rgb(88, 88, 88);
  --spotify-color: rgb(0, 255, 0);
  --separator: 77, 77, 77;

  --back-user-buttons: rgba(255, 255, 255, 0.116);

  /*unread pill*/
  --unread-pill: rgb(145, 145, 151);
  --unread-pill-shadow: rgb(255, 255, 255);

  /*plugin colors*/
  --permission-header: rgb(0, 0, 0);
  --permission-role-side: rgba(0, 0, 0, 0.575);
  --permission-perm-side: rgba(0, 0, 0, 0.678);
  --image-utils-back: black;
  --image-utils-border: rgb(59, 59, 59);
  --back-channel-tabs: rgb(22, 22, 22);
  --back-channel-tabs-selected: rgb(46, 46, 46);

  /*discords integrated colors*/
  --interactive-normal: white;
  --interactive-active: white;
  --interactive-hover: white;
  --channels-default: white;
  --background-primary: rgba(0, 0, 0, 0.5);
  --background-secondary: rgba(35, 35, 39, 0.25);
  --background-secondary-alt: var(--back-color-boxes);
  --background-tertiary: rgb(0, 0, 0);
  --background-floating: rgb(7, 7, 7);
  --background-mentioned: rgba(255, 0, 0, 0.3);
  --background-modifier-hover: rgba(90, 90, 90, 0.2);
  --background-modifier-selected: rgba(45, 45, 45, 0.2);
  --background-modifier-selected-hover: rgb(135, 135, 135, 0.2);
  --info-warning-foreground: red;

  /*Text colors*/
  --text-normal: rgb(240, 240, 240);
  --text-link: #00ff15;
  --text-link-back: black;
  --text-focus: white;
  --dm-color: rgb(182, 182, 182);
  --dm-unread-color: rgb(255, 255, 255);
  --dm-muted-color: rgb(59, 59, 59);
  --dm-selected-color: rgb(189, 189, 189);
  --chat-header-name-color: rgb(182, 182, 182);

  /*servers*/
  --back-expanded-server-folder-icon: rgba(73, 73, 73, 0.548);
  --back-expanded-server-folder: rgba(73, 73, 73, 0.582);
  --back-server-no-img: rgba(66, 66, 66, 0.5);
  --back-server-no-img-hover: rgba(92, 92, 92, 0.5);
  --back-server-no-img-in-folder: rgba(94, 94, 94, 0.5);
  --back-server-no-img-hover-in-folder: rgba(116, 116, 116, 0.5);

  /*other stuff*/
  --channeltextarea-background: rgba(77, 77, 77, 0.425);
  --back-user-area: rgba(0, 0, 0, 0);
  --back-user-area-hover: rgba(77, 77, 77, 0.425);
  --chatbar-placeholder-color: rgb(112, 112, 112);
  --back-color: rgb(0, 0, 0);
  --gr-dm-headers: linear-gradient(to right, transparent, rgb(83, 83, 83));
  --back-selected-dm: black;
  --back-account: black;
  --create-server: rgba(0, 0, 0, 0.911);
  --create-server-text-color: rgb(255, 255, 255);
  --create-server-choices: black;
  --create-server-choices-border: rgb(255, 0, 0);
  --create-server-footer-button: black;
  --create-server-footer-button-hover: rgba(255, 255, 255, 0.123);
  --back-color-search-bar: rgba(83, 83, 83, 0.349);
  --screen-share-main: rgba(0, 0, 0, 0);
  --message-hover: rgba(95, 95, 95, 0.267);
  --typing-border: rgb(122, 122, 122);
  --border-zoom: rgb(121, 121, 121);
  --back-activity-panels: rgb(39, 39, 39);
  --back-gradient-opacity: 1;
  --back-gradient-top: 0, 0, 0;
  --back-gradient-bottom: 40, 40, 40;
  --profile-gradient-button-color: black;
  --back-upload-button: rgb(var(--border-color-1));
  --fill-upload-button: black;
  --mentioned-badge: rgba(255, 0, 0, 0.5);
  --back-call-buttons: rgba(255, 255, 255, 0.25);
  --call-button-green: rgba(0, 128, 0, 0.5);
  --call-button-red: rgba(255, 0, 0, 0.5);
  --jump-to-present-bar: rgba(0, 0, 0, 0.6);
  --jump-to-present-bar-hover: rgba(0, 0, 0, 0.8);
  --channels-roles-options-bg: rgba(0, 0, 0, 0.4);

  /*popouts*/
  --popout-header: black;
  --popout-body: rgba(0, 0, 0);
  --popout-footer: black;
  --popout-scroller: rgb(41, 41, 41);

  /*settings*/
  --back-bd-addon-cards: black;

  /*menu*/
  --menu-item-hover-color: rgb(170, 170, 170);
  --back-color-search-popup: rgba(0, 0, 0, 0.8);

  /*Memberlist*/
  --back-memberlist: 0, 0, 0;
  --back-memberlist-opacity: 0.4;

  /*Frienlist*/
  --back-friendlist-friends: rgba(0, 0, 0, 0.4);
  --back-friendlist-friends-hover: rgba(44, 44, 44, 0.4);
  
  /*forums*/
  --back-color-forum-posts: rgba(7, 7, 7, 0.726);
  --back-color-forum-posts-hover: rgba(34, 34, 34, 0.575);

  /*user popouts*/
  --user-popout: black;
  --user-popout-alt: rgba(0, 0, 255, 0.24);
  --back-small-user-popout-badges: rgba(0, 0, 0, 0.75);
  --user-popout-gradient-color-mix-addition: rgba(0, 0, 0, 0.3);

  /*plugin popups*/
  --back-color-tooltips: black;
  --back-channel-dms: black;
  --back-server-themes-choice-button: black;
  --back-friend-notifications: black;
  --back-better-message-links: black;
  --back-powercord-notices: black;
  --channelTabs-favs-popup-bg: rgba(0, 0, 0, 0.8);

  /*scroller (I think)*/
  --back-color-menu: rgb(0, 0, 0, .8);
  --back-role-scroller: black;

  /*message separator*/
  --message-separator-line: rgba(17, 0, 255, 0.5);
  --unread-message: rgb(255, 0, 0);
  --unread-message-line: rgb(255, 0, 0);

  /*emoji & gif*/
  --back-emoji-etc-picker: black;

  /*other stuff I tried to make work*/
  --scrollbar-auto-scrollbar-color-thumb: red;
  --scrollbar-auto-scrollbar-color-track: blue;

  /*Link Preview*/
  --linkpreview-background: rgb(0, 0, 0, .5);

  /*smallDMchannelList*/
  --back-sidebar: rgba(0, 0, 0, 0.8);

  /*Window width 700px or smaller*/
  --back-user-buttons-700: rgb(0,0,0,0.4);
  --back-user-buttons-hover-700: rgba(255, 255, 255, 0.2);

  /* Update banner*/
  --update-banner-background: rgba(255, 0, 0, 0.4);
}
.theme-midnight .bd-transparency,
.theme-dark .bd-transparency,
.bd-transparency #app-mount .theme-midnight,
.bd-transparency #app-mount .theme-dark,
:root.theme-midnight .bd-transparency,
:root.theme-dark .bd-transparency {
  /*Put any variable here you want to apply only if bd's transpareny settings is enabled*/
  /*boxes*/
  --back-color-boxes: rgba(0, 0, 0, 0.4);

  /*background gradient*/
  --back-gradient-opacity: 0.8;
  --back-gradient-top: 0, 0, 0;
  --back-gradient-bottom: 0, 0, 0;

  /*emoji & gif*/
  --back-emoji-etc-picker: rgba(0, 0, 0, 0.5);
  
  /*popouts*/
  --popout-header: rgba(0, 0, 0, 0.5);
  --popout-body: rgba(0, 0, 0, 0.5);
  --popout-footer: rgba(0, 0, 0, 0.5);
  --popout-scroller: rgb(0, 0, 0);
  
  /*other*/
  --backdrop-opacity: 0.4;

  /*idk*/
  --back-user-buttons: transparent;

  /* Update banner*/
  --update-banner-background: rgba(255, 0, 0, 0.2);
}
#app-mount .theme-light,
.theme-light,
:root.theme-light {
  /*title bar*/
  --title-bar-color: rgb(116, 116, 116);

  /*Theme Dependent Stuff*/
  --back-home-button: rgb(70, 70, 70);

  /*borders*/
  --border-color-1: 116, 116, 116;
  --border-opacity-1: 0.5;
  --border-color-hover: 150, 150, 150;
  --border-opacity-hover: 1;

  /*boxes*/
  --back-color-boxes: rgba(182, 182, 182, 0.2);
  --back-color-boxes-hover: rgba(141, 141, 141, 0.4);
  --back-color-danger-boxes: rgba(255, 0, 0, 0.5);
  --back-color-danger-boxes-hover: rgba(255, 0, 0, 0.7);

  /*buttons*/
  --back-color-danger-button: red;
  --back-color-button: #008549fa;
  --home-button-bg-color: white;
  
  /*switches*/
  --switch-off: rgba(255, 255, 255, 0.5);
  --switch-on: rgba(65, 65, 65, 0.829);

  /*badges*/
  --back-color-number-badges: rgb(177, 179, 199);

  /*playing card border color*/
  --playing-card-border: rgb(88, 88, 88);
  --spotify-color: rgb(0, 255, 0);
  --separator: 77, 77, 77;

  --back-user-buttons: rgba(255, 255, 255, 0.116);

  /*unread pill*/
  --unread-pill: rgb(110, 110, 110);
  --unread-pill-shadow: rgb(0, 0, 0);

  /*plugin colors*/
  --permission-header: rgb(255, 255, 255);
  --permission-role-side: rgba(255, 255, 255, 0.575);
  --permission-perm-side: rgba(255, 255, 255, 0.678);
  --image-utils-back: white;
  --image-utils-border: rgb(196, 196, 196);
  --back-channel-tabs: rgb(233, 233, 233);
  --back-channel-tabs-selected: rgb(209, 209, 209);

  /*discords integrated colors*/
  --interactive-normal: black;
  --interactive-active: black;
  --interactive-hover: black;
  --channels-default: black;
  --background-primary: rgba(255, 255, 255, 0.5);
  --background-secondary: rgba(220, 220, 220, 0.25);
  --background-secondary-alt: var(--back-color-boxes);
  --background-tertiary: rgb(255, 255, 255);
  --background-floating: rgb(248, 248, 248);
  --background-mentioned: rgba(255, 0, 0, 0.1);
  --background-modifier-hover: rgba(90, 90, 90, 0.2);
  --background-modifier-selected: rgba(45, 45, 45, 0.2);
  --background-modifier-selected-hover: rgb(110, 110, 110, 0.2);
  --info-warning-foreground: red;

  /*Text colors*/
  --text-normal: rgb(15, 15, 15);
  --text-link: #007a0a;
  --text-link-back: white;
  --text-focus: black;
  --dm-color: rgb(32, 32, 32);
  --dm-unread-color: black;
  --dm-muted-color: rgb(151, 151, 151);
  --dm-selected-color: rgb(65, 65, 65);
  --chat-header-name-color: rgb(32, 32, 32);
  
  /*server folders*/
  --back-expanded-server-folder-icon: rgba(133, 133, 133, 0.55);
  --back-expanded-server-folder: rgba(150, 150, 150, 0.6);
  --back-server-no-img: rgba(196, 196, 196, 0.5);
  --back-server-no-img-hover: rgba(151, 151, 151, 0.5);
  --back-server-no-img-in-folder: rgba(158, 158, 158, 0.5);
  --back-server-no-img-hover-in-folder: rgba(114, 114, 114, 0.5);

  /*other stuff*/
  --channeltextarea-background: rgba(143, 143, 143, 0.5);
  --back-user-area: rgba(0, 0, 0, 0);
  --back-user-area-hover: rgba(143, 143, 143, 0.5);
  --chatbar-placeholder-color: rgb(92, 92, 92);
  --back-color: white;
  --gr-dm-headers: linear-gradient(to right, transparent, rgb(83, 83, 83));
  --back-selected-dm: white;
  --back-account: white;
  --create-server: rgba(255, 255, 255, 0.9);
  --create-server-text-color: black;
  --create-server-choices: white;
  --create-server-choices-border: rgb(255, 0, 0);
  --create-server-footer-button: white;
  --create-server-footer-button-hover: rgba(0, 0, 0, 0.123);
  --back-color-search-bar: rgba(172, 172, 172, 0.35);
  --screen-share-main: rgba(255, 255, 255, 0);
  --message-hover: rgba(131, 131, 131, 0.25);
  --typing-border: rgb(123, 123, 123);
  --border-zoom: rgb(124, 124, 124);
  --back-activity-panels: rgb(216, 216, 216);
  --back-gradient-opacity: 1;
  --back-gradient-top: 255, 255, 255;
  --back-gradient-bottom: 175, 175, 175;
  --profile-gradient-button-color: white;
  --back-upload-button: rgb(116, 116, 116);
  --fill-upload-button: var(--background-primary);
  --mentioned-badge: rgb(255, 0, 0, 0.5);
  --call-button-green: rgba(0, 128, 0, 0.5);
  --call-button-red: rgba(255, 0, 0, 0.5);
  --jump-to-present-bar: rgba(255, 255, 255, 0.6);
  --jump-to-present-bar-hover: rgba(255, 255, 255, 0.8);
  --channels-roles-options-bg: rgba(255, 255, 255, 0.4);

  /*popouts*/
  --popout-header: black;
  --popout-body: rgba(0, 0, 0);
  --popout-footer: black;
  --popout-scroller: rgb(41, 41, 41);
  
  /*settings*/
  --back-bd-addon-cards: white;

  /*menu*/
  --menu-item-hover-color: rgb(170, 170, 170);
  --back-color-search-popup: rgba(255, 255, 255, 0.8);

  /*Memberlist*/
  --back-memberlist: 0, 0, 0;
  --back-memberlist-opacity: 0.4;
  
  /*Frienlist*/
  --back-friendlist-friends: rgba(255, 255, 255, 0.4);
  --back-friendlist-friends-hover: rgba(211, 211, 211, 0.4);
  
  /*forums*/
  --back-color-forum-posts: rgba(7, 7, 7, 0.726);
  --back-color-forum-posts-hover: rgba(34, 34, 34, 0.575);

  /*user popouts*/
  --user-popout: white;
  --user-popout-alt: rgba(0, 0, 255, 0.24);
  --back-small-user-popout-badges: rgba(255, 255, 255, 0.75);
  --user-popout-gradient-color-mix-addition: rgba(255, 255, 255, 0.3);

  /*plugin popups*/
  --back-color-tooltips: white;
  --back-channel-dms: white;
  --back-server-themes-choice-button: white;
  --back-friend-notifications: white;
  --back-better-message-links: white;
  --back-powercord-notices: white;
  --channelTabs-favs-popup-bg: rgba(255, 255, 255, 0.8);

  /*scroller (I think)*/
  --back-color-menu: rgb(255, 255, 255, .8);
  --back-role-scroller: black;

  /*message separator*/
  --message-separator-line: rgba(17, 0, 255, 0.5);
  --unread-message: rgb(255, 0, 0);
  --unread-message-line: rgb(255, 0, 0);

  /*emoji & gif*/
  --back-emoji-etc-picker: black;

  /*other stuff I tried to make work*/
  --scrollbar-auto-scrollbar-color-thumb: red;
  --scrollbar-auto-scrollbar-color-track: blue;

  /*Link Preview*/
  --linkpreview-background: transparent;

  /*smallDMchannelList*/
  --back-sidebar: rgb(0, 0, 0);

  /*Window width 700px or smaller*/
  --back-user-buttons-700: rgb(0,0,0,0.2);
  --back-user-buttons-hover-700: rgba(255, 255, 255, 0.2);

  /* Update banner*/
  --update-banner-background: rgba(255, 0, 0, 0.4);
}
.theme-light .bd-transparency,
:root.theme-light .bd-transparency,
.bd-transparency #app-mount .theme-light {
  /*Put any variable here you want to apply only if bd's transpareny settings is enabled*/
  /*boxes*/
  --back-color-boxes: rgba(255, 255, 255, 0.4);

  /*background gradient*/
  --back-gradient-opacity: 0.6;
  --back-gradient-top: 255, 255, 255;
  --back-gradient-bottom: 255, 255, 255;

  /*emoji & gif*/
  --back-emoji-etc-picker: rgba(255, 255, 255, 0.5);
  
  /*popouts*/
  --popout-header: rgba(255, 255, 255, 0.5);
  --popout-body: rgba(255, 255, 255, 0.5);
  --popout-footer: rgba(255, 255, 255, 0.5);
  --popout-scroller: rgb(255, 255, 255);
  
  /*other*/
  --backdrop-opacity: 0.4;

  /*idk*/
  --back-user-buttons: transparent;

  /* Update banner*/
  --update-banner-background: rgba(255, 0, 0, 0.2);
}

Actions

Download Source

About

Version: 1.3.7.1
Downloads: 37,934
Added: 10/07/2021
Updated: 02/24/2026
Hash: 67fa9ae9-bae4-f0b2-adbe-af9af3c02f21
Source: https://github.com/lolpowerluke/bd-themes/blob/main/AlanWalkerTheme/alanWalker.theme.css

Author

lolpowerluke GitHub

Live preview

Screenshot

Open source

FiveCord for Windows