UI Refresh Refresh

By programmer2514 Version 1.7.0 Updated 05/21/2026 10.7K downloads

Enjoy Discord's UI refresh without the visual inconsistencies.

layout

Live preview

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

Screenshot

UIRefreshRefresh.theme.css

GitHub

Open source

https://raw.githubusercontent.com/programmer2514/BetterDiscord-UIRefreshRefresh/cef94f9bcc67156a47c8eb3ee4f8a70b85e0b743/UIRefreshRefresh.theme.css

1/**

2 * @name UI Refresh Refresh

3 * @author programmer2514

4 * @description Enjoy Discord's UI refresh without the visual inconsistencies.

5 * @version 1.7.0

6 */

8:root {

9 --uirr-forum-panel-width: 450px;

10}

12#app-mount {

13 border: 1px solid var(--border-subtle);

14 width: calc(100% - 2px) !important;

15 height: calc(100% - 2px) !important;

16}

18*[class] {

19 --app-border-frame: var(--border-subtle);

20 --border-muted: var(--border-subtle);

21}

23.visual-refresh {

24 --custom-guild-list-padding: min(var(--space-sm));

25}

27.sidebarListRounded__5e434,

28.sidebar__5e434,

29.page__5e434 {

30 border-radius: 0 !important;

31 border-left: none !important;

32}

34.guilds__5e434 {

35 border-top: 1px solid var(--border-subtle);

36 border-right: 1px solid var(--border-subtle);

37}

39.tree_ef3116 {

40 padding-top: var(--space-xs) !important;

41}

43.bar_c38106 {

44 display: flex;

45 justify-content: end;

46 width: 100%;

47 pointer-events: none;

48}

50.platform-win .title_c38106,

51.platform-linux .title_c38106 {

52 justify-content: start;

53 margin-left: var(--space-xs);

54}

56.platform-win .leading_c38106,

57.platform-linux .leading_c38106 {

58 height: calc(100% - 12px);

59 border-right: 1px solid var(--border-subtle);

60 margin-right: var(--space-xxs);

61 padding-right: var(--space-xxs);

62}

64.button__63abb {

65 padding: 0 var(--space-xxs) !important;

66}

68.title_edbb22 div:last-child::before {

69 content: ";Discord - ";;

70}

72.bar_c38106 >; * {

73 pointer-events: all;

74}

76.systemBar_c38106 {

77 transform: translate(-1px, 1px);

78}

80.winButtons_c38106 {

81 gap: 0;

82}

84.winButtons_c38106::before {

85 padding-right: var(--space-xxs);

86}

88.winButton_c38106 {

89 padding: 0 var(--space-xs);

90}

92.trailing_c38106 {

93 gap: var(--space-xs);

94}

96.clickable_c99c29 {

97 transform: scale(0.9);

98}

100

101.clickable__9293f,

102.clickable_c99c29,

103.inviteButton_f37cb1 {

104 transition: background-color 0.2s;

105 border-radius: 8px;

106}

107

108.clickable__81391,

109.buttonWrapper__24af7,

110.button__63abb {

111 transition: background-color 0.2s;

112}

113

114.clickable_c99c29 {

115 --custom-horizontal-padding: 2px;

116 transition: background-color 0.2s;

117 border-radius: 8px;

118 margin: 0px;

119 padding-top: calc(var(--space-xxs) + var(--custom-horizontal-padding));

120 padding-bottom: calc(var(--space-xxs) + var(--custom-horizontal-padding));

121 width: var(--space-32);

122 justify-content: center;

123}

124

125.clickable_c99c29 >; * {

126 height: var(--space-32);

127}

128

129.buttons__37e49 {

130 gap: var(--space-xxs);

131}

132

133.clickable__9293f:hover,

134.clickable_c99c29:hover,

135.clickable__81391:hover,

136.inviteButton_f37cb1:hover,

137.buttonWrapper__24af7:hover,

138.button__63abb:hover {

139 background-color: var(--interactive-background-selected) !important;

140}

141

142.clickable__9293f:hover >; *,

143.clickable_c99c29:hover >; *,

144.clickable__81391:hover >; *,

145.inviteButton_f37cb1:hover >; *,

146.buttonWrapper__24af7:hover >; * {

147 opacity: 1;

148 animation: buttonWiggle 800ms linear 0s 1 normal none;

149 color: var(--interactive-active) !important;

150}

151

152.clickable__9293f:active >; *,

153.clickable_c99c29:active >; *,

154.clickable__81391:active >; *,

155.inviteButton_f37cb1:active >; *,

156.buttonWrapper__24af7:active >; * {

157 animation: buttonJump 400ms linear 0s 1 normal none;

158}

159

160.scrollableContainer__74017 {

161 background: var(--bg-overlay-floating, var(--background-base-low));

162}

163

164.searchBar_c322aa {

165 background: var(--bg-overlay-floating, var(--background-base-low));

166 border: 1px solid var(--border-subtle);

167}

168

169.wrapper__44df5 {

170 margin-bottom: var(--space-xs);

171}

172

173.chatLayerWrapper__01ae2 {

174 position: absolute;

175 z-index: 100;

176}

177

178.threadSidebarOpen_f75fb0 ~ .chatLayerWrapper__01ae2 {

179 top: var(--custom-channel-header-height) !important;

180 height: calc(100% - var(--custom-channel-header-height)) !important;

181}

182

183.chatLayerWrapper__01ae2 >; * {

184 border-radius: 0;

185 width: var(--uirr-forum-panel-width) !important;

186 transition: width var(--cui-transition-speed);

187 border: 1px solid var(--border-subtle);

188}

189

190.floating__01ae2 {

191 filter: none;

192}

193

194.resizeHandle__01ae2 {

195 display: none;

196}

197

198div:not([class])[style^=";min-width";] {

199 display: none;

200}

201

202section.container__9293f {

203 padding-left: var(--space-sm) !important;

204}

205

206section.container__9293f:has(.hoverableContainer__754bd) {

207 padding-left: var(--space-xxs) !important;

208}

209

210.header_f37cb1 {

211 padding: var(--space-sm);

212}

213

214.outer_c0bea0:not(.custom-theme-background) {

215 background-color: var(--background-base-lower) !important;

216}

217

218.outer_c0bea0:not(.custom-theme-background) .overlay_c0bea0 {

219 background-color: var(--background-base-low) !important;

220 border: 1px solid var(--border-subtle) !important;

221}

222

223.container_fc561d,

224.header_ab6641,

225.channelHeader__35a7e,

226.container_d404a3,

227.container__0f711,

228.messagesPopout_e8b59c,

229.messagesPopoutWrap_e8b59c {

230 background-color: var(--background-base-low) !important;

231}

232

233.container__0f711 {

234 margin-right: -8px !important;

235}

236

237.header_e8b59c {

238 border-bottom: none;

239}

240

241.top_aa8da2 {

242 padding: 0 var(--space-sm);

243 gap: var(--space-md) !important;

244}

245

246.headerTabs_ab6641 {

247 margin-right: 0 !important;

248 padding-right: var(--space-xs);

249}

250

251.messages__1ccd1 {

252 background-color: var(--background-base-lower) !important;

253 padding: var(--space-sm) var(--space-md) var(--space-sm) 0;

254}

255

256.messageContainer__95796 {

257 background-color: var(--background-base-lower) !important;

258 padding: var(--space-md) var(--space-xl) var(--space-lg) var(--space-xxs);

259}

260

261.showAllButtonContainer__1ccd1 {

262 margin-top: var(--space-xs);

263}

264

265.container_fc561d {

266 transform: translateY(-4px);

267 border: 1px solid var(--border-subtle);

268 box-shadow: none;

269}

270

271.wrapper__1405b,

272.wrapper__1405b >; * {

273 flex-wrap: wrap;

274 justify-content: center;

275}

276

277div:has(>; .wrapper__1405b) {

278 flex-shrink: 0 !important;

279 max-width: 100%;

280}

281

282.content_e9e3ed,

283.contentHeader_e9e3ed {

284 background-color: var(--background-base-lowest);

285}

286

287.panel__6131a {

288 margin: 0;

289 padding: var(--space-xl) var(--space-sm) var(--space-md) var(--space-sm);

290 min-width: calc(100% - var(--space-xxl));

291 width: calc(100% - var(--space-xxl));

292 max-width: calc(100% - var(--space-xxl));

293}

294

295.top_aa8da2 {

296 gap: var(--space-xl);

297 max-width: 100%;;

298}

299

300.top_aa8da2 >; .item_aa8da2 {

301 margin: 0 !important;

302 padding: 0 var(--space-xxs) var(--space-sm) !important;

303}

304

305.item__88a69 {

306 border: 1px solid var(--input-border);

307 background: var(--input-background);

308}

309

310.bd-addon-store {

311 gap: 10px;

312}

313

314.bd-addon-store-card {

315 max-width: none;

316 border: 1px solid var(--border-subtle);

317 background-color: var(--background-base-low) !important;

318}

319

320.bd-addon-store-card:hover {

321 background-color: var(--background-base-lower) !important;

322}

323

324.bd-addon-store-modal {

325 max-height: 90vh !important;

326 overflow: hidden !important;

327}

328

329.bd-addon-card {

330 background-color: var(--background-base-low) !important;

331}

332

333.bd-addon-header {

334 background-color: var(--card-background-default) !important;

335}

336

337.bf-visible,

338.bf-hover:hover {

339 overflow: visible !important;

340}

341

342.bf-toolbar {

343 right: -4px;

344}

345

346.bf-toolbar::before {

347 background: var(--background-base-low) !important;

348 border-radius: var(--radius-sm) !important;

349 border: 1px solid var(--border-subtle);

350 height: calc(100% - 16px) !important;

351}

352

353.bf-toolbar .format {

354 padding: 0px !important;

355 width: var(--space-32) !important;

356 height: var(--space-32) !important;

357 max-height: var(--space-32) !important;

358 margin-right: var(--space-xxs) !important;

359 margin-top: -2px;

360 justify-content: center;

361}

362

363.bf-toolbar .format:hover {

364 background-color: var(--interactive-background-selected);

365 transition: background-color 0.2s;

366 border-radius: 8px;

367}

368

369.bf-arrow {

370 bottom: -1px !important;

371}

372

373.theme-light .bf-toolbar .format >; *,

374.theme-light .bf-toolbar .bf-arrow {

375 filter: invert(1);

376}

377

378.bf-toolbar .format >; * {

379 width: 22px !important;

380 height: auto !important;

381}

382

383.bf-toolbar .format:hover >; * {

384 opacity: 1;

385 animation: buttonWiggle 800ms linear 0s 1 normal none;

386}

387

388.bf-toolbar .format:active >; * {

389 animation: buttonJump 400ms linear 0s 1 normal none;

390}

391

392main >; section.container__9293f,

393:not(.headerWrapper_cb9592) >; .subtitleContainer_f75fb0,

394.user-profile-sidebar .inner_c0bea0,

395.content_f75fb0,

396.tabBody__133bf {

397 border-left: 1px solid var(--border-subtle);

398}

399

400.callContainer_cb9592 {

401 border-left: 1px solid var(--border-subtle);

402 border-top: none !important;

403}

404

405.colorable_f1ceac.disconnect_f1ceac {

406 border: 1px solid var(--status-danger);

407}

408

409.colorable_f1ceac.disconnect_f1ceac:hover {

410 border: 1px solid var(--red-460);

411}

412

413.noChat_cb9592:has(>; .callContainer_cb9592) {

414 border-top: 1px solid var(--border-subtle);

415}

416

417.sidebar__409aa {

418 border-right: 1px solid var(--border-subtle);

419}

420

421.accountProfileCard__1fed1 {

422 border: 1px solid var(--border-subtle);

423}

424

425@media (min-width: 1216px) {

426 .threadSidebarOpen_f75fb0 .content_f75fb0 >; * {

427 flex-shrink: 100;

428 }

429

430 .threadSidebarOpen_f75fb0 .content_f75fb0::after {

431 content: ";";;

432 display: block;

433 width: 450px;

434 height: 100%;

435 }

436}

437

438@keyframes buttonWiggle {

439 0%,

440 100% {

441 transform: rotate(0deg);

442 transform-origin: 50% 100%;

443 }

444

445 20%,

446 40% {

447 transform: rotate(3deg);

448 }

449

450 60%,

451 80% {

452 transform: rotate(-3deg);

453 }

454}

455

456@keyframes buttonJump {

457 0%,

458 100% {

459 transform: translateY(0px);

460 }

461

462 20%,

463 30% {

464 transform: translateY(1px);

465 }

466

467 60%,

468 80% {

469 transform: translateY(-1px);

470 }

471}

472

/**
 * @name UI Refresh Refresh
 * @author programmer2514
 * @description Enjoy Discord's UI refresh without the visual inconsistencies.
 * @version 1.7.0
 */

:root {
    --uirr-forum-panel-width: 450px;
}

#app-mount {
    border: 1px solid var(--border-subtle);
    width: calc(100% - 2px) !important;
    height: calc(100% - 2px) !important;
}

*[class] {
    --app-border-frame: var(--border-subtle);
    --border-muted: var(--border-subtle);
}

.visual-refresh {
    --custom-guild-list-padding: min(var(--space-sm));
}

.sidebarListRounded__5e434,
.sidebar__5e434,
.page__5e434 {
    border-radius: 0 !important;
    border-left: none !important;
}

.guilds__5e434 {
    border-top: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}

.tree_ef3116 {
    padding-top: var(--space-xs) !important;
}

.bar_c38106 {
    display: flex;
    justify-content: end;
    width: 100%;
    pointer-events: none;
}

.platform-win .title_c38106,
.platform-linux .title_c38106 {
    justify-content: start;
    margin-left: var(--space-xs);
}

.platform-win .leading_c38106,
.platform-linux .leading_c38106 {
    height: calc(100% - 12px);
    border-right: 1px solid var(--border-subtle);
    margin-right: var(--space-xxs);
    padding-right: var(--space-xxs);
}

.button__63abb {
    padding: 0 var(--space-xxs) !important;
}

.title_edbb22 div:last-child::before {
    content: "Discord - ";
}

.bar_c38106 > * {
    pointer-events: all;
}

.systemBar_c38106 {
    transform: translate(-1px, 1px);
}

.winButtons_c38106 {
    gap: 0;
}

.winButtons_c38106::before {
    padding-right: var(--space-xxs);
}

.winButton_c38106 {
    padding: 0 var(--space-xs);
}

.trailing_c38106 {
    gap: var(--space-xs);
}

.clickable_c99c29 {
    transform: scale(0.9);
}


.clickable__9293f,
.clickable_c99c29,
.inviteButton_f37cb1 {
    transition: background-color 0.2s;
    border-radius: 8px;
}

.clickable__81391,
.buttonWrapper__24af7,
.button__63abb {
    transition: background-color 0.2s;
}

.clickable_c99c29 {
    --custom-horizontal-padding: 2px;
    transition: background-color 0.2s;
    border-radius: 8px;
    margin: 0px;
    padding-top: calc(var(--space-xxs) + var(--custom-horizontal-padding));
    padding-bottom: calc(var(--space-xxs) + var(--custom-horizontal-padding));
    width: var(--space-32);
    justify-content: center;
}

.clickable_c99c29 > * {
    height: var(--space-32);
}

.buttons__37e49 {
    gap: var(--space-xxs);
}

.clickable__9293f:hover,
.clickable_c99c29:hover,
.clickable__81391:hover,
.inviteButton_f37cb1:hover,
.buttonWrapper__24af7:hover,
.button__63abb:hover {
    background-color: var(--interactive-background-selected) !important;
}

.clickable__9293f:hover > *,
.clickable_c99c29:hover > *,
.clickable__81391:hover > *,
.inviteButton_f37cb1:hover > *,
.buttonWrapper__24af7:hover > * {
    opacity: 1;
    animation: buttonWiggle 800ms linear 0s 1 normal none;
    color: var(--interactive-active) !important;
}

.clickable__9293f:active > *,
.clickable_c99c29:active > *,
.clickable__81391:active > *,
.inviteButton_f37cb1:active > *,
.buttonWrapper__24af7:active > * {
    animation: buttonJump 400ms linear 0s 1 normal none;
}

.scrollableContainer__74017 {
    background: var(--bg-overlay-floating, var(--background-base-low));
}

.searchBar_c322aa {
    background: var(--bg-overlay-floating, var(--background-base-low));
    border: 1px solid var(--border-subtle);
}

.wrapper__44df5 {
    margin-bottom: var(--space-xs);
}

.chatLayerWrapper__01ae2 {
    position: absolute;
    z-index: 100;
}

.threadSidebarOpen_f75fb0 ~ .chatLayerWrapper__01ae2 {
    top: var(--custom-channel-header-height) !important;
    height: calc(100% - var(--custom-channel-header-height)) !important;
}

.chatLayerWrapper__01ae2 > * {
    border-radius: 0;
    width: var(--uirr-forum-panel-width) !important;
    transition: width var(--cui-transition-speed);
    border: 1px solid var(--border-subtle);
}

.floating__01ae2 {
    filter: none;
}

.resizeHandle__01ae2 {
    display: none;
}

div:not([class])[style^="min-width"] {
    display: none;
}

section.container__9293f {
    padding-left: var(--space-sm) !important;
}

section.container__9293f:has(.hoverableContainer__754bd) {
    padding-left: var(--space-xxs) !important;
}

.header_f37cb1 {
    padding: var(--space-sm);
}

.outer_c0bea0:not(.custom-theme-background) {
    background-color: var(--background-base-lower) !important;
}

.outer_c0bea0:not(.custom-theme-background) .overlay_c0bea0 {
    background-color: var(--background-base-low) !important;
    border: 1px solid var(--border-subtle) !important;
}

.container_fc561d,
.header_ab6641,
.channelHeader__35a7e,
.container_d404a3,
.container__0f711,
.messagesPopout_e8b59c,
.messagesPopoutWrap_e8b59c {
    background-color: var(--background-base-low) !important;
}

.container__0f711 {
    margin-right: -8px !important;
}

.header_e8b59c {
    border-bottom: none;
}

.top_aa8da2 {
    padding: 0 var(--space-sm);
    gap: var(--space-md) !important;
}

.headerTabs_ab6641 {
    margin-right: 0 !important;
    padding-right: var(--space-xs);
}

.messages__1ccd1 {
    background-color: var(--background-base-lower) !important;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
}

.messageContainer__95796 {
    background-color: var(--background-base-lower) !important;
    padding: var(--space-md) var(--space-xl) var(--space-lg) var(--space-xxs);
}

.showAllButtonContainer__1ccd1 {
    margin-top: var(--space-xs);
}

.container_fc561d {
    transform: translateY(-4px);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
}

.wrapper__1405b,
.wrapper__1405b > * {
    flex-wrap: wrap;
    justify-content: center;
}

div:has(> .wrapper__1405b) {
    flex-shrink: 0 !important;
    max-width: 100%;
}

.content_e9e3ed,
.contentHeader_e9e3ed {
    background-color: var(--background-base-lowest);
}

.panel__6131a {
    margin: 0;
    padding: var(--space-xl) var(--space-sm) var(--space-md) var(--space-sm);
    min-width: calc(100% - var(--space-xxl));
    width: calc(100% - var(--space-xxl));
    max-width: calc(100% - var(--space-xxl));
}

.top_aa8da2 {
    gap: var(--space-xl);
    max-width: 100%;;
}

.top_aa8da2 > .item_aa8da2 {
    margin: 0 !important;
    padding: 0 var(--space-xxs) var(--space-sm) !important;
}

.item__88a69 {
    border: 1px solid var(--input-border);
    background: var(--input-background);
}

.bd-addon-store {
    gap: 10px;
}

.bd-addon-store-card {
    max-width: none;
    border: 1px solid var(--border-subtle);
    background-color: var(--background-base-low) !important;
}

.bd-addon-store-card:hover {
    background-color: var(--background-base-lower) !important;
}

.bd-addon-store-modal {
    max-height: 90vh !important;
    overflow: hidden !important;
}

.bd-addon-card {
    background-color: var(--background-base-low) !important;
}

.bd-addon-header {
    background-color: var(--card-background-default) !important;
}

.bf-visible,
.bf-hover:hover {
    overflow: visible !important;
}

.bf-toolbar {
    right: -4px;
}

.bf-toolbar::before {
    background: var(--background-base-low) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-subtle);
    height: calc(100% - 16px) !important;
}

.bf-toolbar .format {
    padding: 0px !important;
    width: var(--space-32) !important;
    height: var(--space-32) !important;
    max-height: var(--space-32) !important;
    margin-right: var(--space-xxs) !important;
    margin-top: -2px;
    justify-content: center;
}

.bf-toolbar .format:hover {
    background-color: var(--interactive-background-selected);
    transition: background-color 0.2s;
    border-radius: 8px;
}

.bf-arrow {
    bottom: -1px !important;
}

.theme-light .bf-toolbar .format > *,
.theme-light .bf-toolbar .bf-arrow {
    filter: invert(1);
}

.bf-toolbar .format > * {
    width: 22px !important;
    height: auto !important;
}

.bf-toolbar .format:hover > * {
    opacity: 1;
    animation: buttonWiggle 800ms linear 0s 1 normal none;
}

.bf-toolbar .format:active > * {
    animation: buttonJump 400ms linear 0s 1 normal none;
}

main > section.container__9293f,
:not(.headerWrapper_cb9592) > .subtitleContainer_f75fb0,
.user-profile-sidebar .inner_c0bea0,
.content_f75fb0,
.tabBody__133bf {
    border-left: 1px solid var(--border-subtle);
}

.callContainer_cb9592 {
    border-left: 1px solid var(--border-subtle);
    border-top: none !important;
}

.colorable_f1ceac.disconnect_f1ceac {
    border: 1px solid var(--status-danger);
}

.colorable_f1ceac.disconnect_f1ceac:hover {
    border: 1px solid var(--red-460);
}

.noChat_cb9592:has(> .callContainer_cb9592) {
    border-top: 1px solid var(--border-subtle);
}

.sidebar__409aa {
    border-right: 1px solid var(--border-subtle);
}

.accountProfileCard__1fed1 {
    border: 1px solid var(--border-subtle);
}

@media (min-width: 1216px) {
    .threadSidebarOpen_f75fb0 .content_f75fb0 > * {
        flex-shrink: 100;
    }

    .threadSidebarOpen_f75fb0 .content_f75fb0::after {
        content: "";
        display: block;
        width: 450px;
        height: 100%;
    }
}

@keyframes buttonWiggle {
  0%,
  100% {
	transform: rotate(0deg);
	transform-origin: 50% 100%;
  }

  20%,
  40% {
	transform: rotate(3deg);
  }

  60%,
  80% {
	transform: rotate(-3deg);
  }
}

@keyframes buttonJump {
  0%,
  100% {
	transform: translateY(0px);
  }

  20%,
  30% {
	transform: translateY(1px);
  }

  60%,
  80% {
	transform: translateY(-1px);
  }
}

Actions

Download Source

About

Version: 1.7.0
Downloads: 10,748
Added: 03/27/2025
Updated: 05/21/2026
Hash: d3030049-d835-914f-d51d-e91b200eefdd
Source: https://github.com/programmer2514/BetterDiscord-UIRefreshRefresh

Author

programmer2514 GitHub

Live preview

Screenshot

Open source

FiveCord for Windows