├── .github └── workflows │ └── static.yml ├── README.md ├── discord-mica.theme.css └── src └── main.css /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v5 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | I chose wrong backdrop type when I was writing this theme. So picture you see is actually Mica tabbed not Mica 3 | 4 | # Discord Mica 5 |
6 | 7 | #### Discord Mica focus on brining Mica material and WinUI 3 standard to Discord. Also keeping Discord aesthetic at the same time. Without fancy animations or overwhelming colorful background. Provide just enough customization. 8 | 9 | ## Requirement 10 | * ![BetterDiscord](https://betterdiscord.app/) or ![Vencord](https://github.com/Vendicated/Vencord) (You should know this one) 11 | * ![MicaForEveryone](https://github.com/MicaForEveryone/MicaForEveryone) (For Mica backdrop) 12 | 13 | ## Get Started 14 | 1. Patch your Discord with BetterDiscord or Vencord 15 | 2. Add Discord process to MicaForEveryone and set backdrop type to Mica 16 | 3. Enable transparency in BetterDiscord settings 17 | 18 | That's it :D 19 | 20 | ## Note 21 | * You could use any backdrop material, like Acrylic, with a Discord-Mica theme. However, this is not recommended since Acrylic is a transparent material, which blurs the contents behind windows. This can be performance-heavy and cause visibility issues. Acrylic should only be used in small areas. 22 | * Both Mica and Mica Tabbed are tested recommended. 23 | * I don't recommend enabling the blur-behind feature. Mica does a great job creating contrast between background and foreground elements. However, with certain backgrounds, it can still cause visibility issues and is also performance-intensive, similar to Acrylic. 24 | * The screenshot I took above is actually Mica tabbed. I did not realize I was using Mica tabbed when I was writing this theme. And I was trying to replicate Mica look. If you want to get a similar appearance you can use the dark-bg values in the comments 25 | * You may want to add more blur effects with a backdrop filter, but when transparency is enabled, backdrop-filter breaks. I recommend tweaking colors to make elements fit into the wallpaper, instead of using transparent elements without blur. 26 | * **Mica with WinDynamicWallpaper is AWESOME** 27 | 28 | ## Customization 29 | You can find all the customizable variables in the :root field of /src/main.css. Below is a list of common variables you may want to use 30 | `--dark/light-bg` Allows you to tweak transparency of the background for personal preference or accessibility 31 | `--dark/light-accent` Allows you to tweak accent color of primary button or toggles. You can get current accent color in Windows color settings. And retrieve it with PowerToy color picker. 32 | -------------------------------------------------------------------------------- /discord-mica.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Discord Mica 3 | * @author Coolkie 4 | * @version 1.0 5 | * @description Discord with mica :) 6 | * @source https://github.com/PL7963/Discord-Mica/blob/main/src/main.css 7 | * @website http://github.com/PL7963/ 8 | * @invite mh5Tzm43m9 9 | */ 10 | 11 | @import url("https://discord-mica.pages.dev/src/main.css"); 12 | 13 | :root { 14 | /*Dark mode*/ 15 | --dark-bg: transparent; /*rgba(240,185,190,0.113); to achieve screenshot looking*/ 16 | --dark-flyout: rgba(30,30,30); 17 | --dark-accent: rgb(76, 194, 255); 18 | --dark-accent-hovered: rgb(65, 163, 214); /*also disabled button*/ 19 | --dark-accent-font-color: black; 20 | --dark-button: rgb(45,45,45); 21 | --dark-button-border: rgb(60, 60, 60); 22 | --dark-button-font-color: white; 23 | --dark-background-accent: rgba(50,50,50,0.9); 24 | --dark-status-panel: rgba(30,30,30,0.4); 25 | 26 | /*Light mode*/ 27 | --light-bg: transparent; 28 | --light-flyout: rgb(255, 255, 255); 29 | --light-accent: rgb(0, 120, 212); 30 | --light-accent-hovered: rgb(0, 94, 167); /*also disabled button*/ 31 | --light-accent-font-color: white; 32 | --light-button: rgb(251,251,251); 33 | --light-button-border: rgb(204, 204, 231); 34 | --light-button-font-color: black; 35 | --light-background-accent: rgba(160,160,160,0.9); 36 | --light-status-panel: rgba(255,255,255,0.4); 37 | 38 | /* Titlebar */ 39 | --custom-app-top-bar-height: calc(24px + var(--space-sm)); /* Set to 0 if you don't want to use Discord title-bar */ 40 | --title-bar-icon: flex; /* Set to none to remove icons */ 41 | } 42 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /*Dark mode*/ 3 | --dark-bg: transparent; 4 | --dark-layer1: 255,255,255; 5 | --dark-flyout: rgba(30,30,30); 6 | --dark-select: 255,255,255; 7 | --dark-accent: rgb(76, 194, 255); 8 | --dark-accent-hovered: rgb(65, 163, 214); /*also disabled button*/ 9 | --dark-accent-font-color: black; 10 | --dark-button: rgb(45,45,45); 11 | --dark-button-border: rgb(60, 60, 60); 12 | --dark-button-font-color: white; 13 | --dark-dm-about: rgba(0,0,0,0.4); 14 | --dark-background-accent: rgba(50,50,50,0.9); 15 | --dark-status-panel: rgba(30,30,30,0.4); 16 | 17 | /*Light mode*/ 18 | --light-bg: transparent; 19 | --light-layer1: 255,255,255; 20 | --light-flyout: rgb(255, 255, 255); 21 | --light-select: 0,0,0; 22 | --light-accent: rgb(0, 120, 212); 23 | --light-accent-hovered: rgb(0, 94, 167); /*also disabled button*/ 24 | --light-accent-font-color: white; 25 | --light-button: rgb(251,251,251); 26 | --light-button-border: rgb(204, 204, 231); 27 | --light-button-font-color: black; 28 | --light-dm-about: rgba(255,255,255,0.35); 29 | --light-background-accent: rgba(160,160,160,0.9); 30 | --light-status-panel: rgba(255,255,255,0.4); 31 | 32 | /* Titlebar */ 33 | --custom-app-top-bar-height: calc(24px + var(--space-sm)); 34 | --title-bar-icon: flex; 35 | } 36 | 37 | .visual-refresh.theme-dark { 38 | --app-bg: var(--dark-bg); 39 | 40 | /*Layer 1*/ 41 | --background-primary: rgba(var(--dark-layer1),0.05); /* Activity Card Empty */ 42 | --background-surface-high: rgba(var(--dark-layer1),0.05); /* Activity Card */ 43 | --background-base-low: rgba(var(--dark-layer1),0.05); /* Follow channel */ 44 | --background-secondary-alt: rgba(var(--dark-layer1),0.05); 45 | --input-background: rgba(var(--dark-layer1),0.05); 46 | --background-secondary: rgba(var(--dark-layer1),0.05); 47 | --background-tertiary: rgba(var(--dark-layer1),0.06); 48 | --channeltextarea-background: rgba(var(--dark-layer1),0.05); 49 | --bg-mod-subtle: rgba(var(--dark-layer1),0.1); 50 | 51 | /*Flyout*/ 52 | --background-floating: var(--dark-flyout); 53 | 54 | /*Select or hover*/ 55 | --layer1: var(--dark-layer1); 56 | --flyout: var(--dark-flyout); 57 | --background-modifier-selected: rgba(var(--dark-select),0.07); 58 | --background-modifier-active: rgba(var(--dark-select),0.07); 59 | --background-modifier-hover: rgba(var(--dark-select),0.05); 60 | 61 | /*variables*/ 62 | --accent: var(--dark-accent); 63 | --accent-hovered: var(--dark-accent-hovered); 64 | --accent-font: var(--dark-accent-font-color); 65 | --button: var(--dark-button); 66 | --button-border: var(--dark-button-border); 67 | --button-font-color: var(--dark-button-font-color); 68 | --dm-about: var(--dark-dm-about); 69 | --background-accent: var(--dark-background-accent); 70 | --status-panel: var(--dark-status-panel); 71 | } 72 | .visual-refresh.theme-light{ 73 | --app-bg: var(--light-bg); 74 | 75 | /* Layer 1 */ 76 | --background-primary: rgba(var(--light-layer1),0.7); /* Activity Card Empty */ 77 | --background-surface-high: rgba(var(--light-layer1), 0.7); /* Activity Card */ 78 | --background-base-low: rgba(var(--light-layer1),0.7); /* Follow channel */ 79 | --background-surface-higher: rgba(var(--light-layer1), 0.4); 80 | --background-secondary-alt: rgba(var(--light-layer1), 0.1); 81 | --input-background: rgba(var(--light-layer1), 0.7); 82 | --background-secondary: rgba(var(--light-layer1), 0.7); 83 | --background-tertiary: rgba(var(--light-layer1), 0.7); 84 | --channeltextarea-background: rgba(var(--light-layer1), 0.4); 85 | --bg-mod-subtle: rgba(0,0,0,0.1); 86 | 87 | /* Flyout */ 88 | --background-floating: var(--light-flyout); 89 | 90 | /* Select or hover */ 91 | --layer1: var(--light-layer1); 92 | --flyout: var(--light-flyout); 93 | --background-modifier-selected: rgba(var(--light-select), 0.07); 94 | --background-modifier-active: rgba(var(--light-select), 0.07); 95 | --background-modifier-hover: rgba(var(--light-select), 0.05); 96 | 97 | /* Variables */ 98 | --accent: var(--light-accent); 99 | --accent-hovered: var(--light-accent-hovered); 100 | --accent-font: var(--light-accent-font-color); 101 | --button: var(--light-button); 102 | --button-border: var(--light-button-border); 103 | --button-font-color: var(--light-button-font-color); 104 | --dm-about: var(--light-dm-about); 105 | --background-accent: var(--light-background-accent); 106 | --status-panel: var(--light-status-panel); 107 | } 108 | 109 | .app__160d8, 110 | .bg__960e4, 111 | .appMount__51fd7, 112 | .wrapper_ef3116, 113 | .visual-refresh .chat_f75fb0, 114 | .chatContent_f75fb0, /*Server Chat*/ 115 | .scroller__99e7c, .privateChannels__35e86, /*DMs Sidebar*/ 116 | .themed__9293f, .nowPlayingColumn__133bf, /*DMs misc*/ 117 | .visual-refresh .tabBody__133bf, 118 | .container__7d20c, 119 | .container__133bf, 120 | #app-mount .container__2637a, .sidebar_c48ade /*Server Sidebar*/, 121 | .visual-refresh .clickable_f37cb1, .visual-refresh .hasBanner_f37cb1 .header_f37cb1, /*Server name*/ 122 | :where(.visual-refresh) .themedBackground__74017, /*Server Textarea*/ 123 | .visual-refresh .container_f369db, /* Forum */ 124 | .panels_c48ade, .container__37e49, /*User Profile*/ 125 | .visual-refresh .sidebar_c48ade:after, 126 | .footer__214dc /*Discovery*/, 127 | .visual-refresh .contentRegionScroller__23e6b, .visual-refresh .sidebarRegionScroller__23e6b, .visual-refresh .standardSidebarView__23e6b, .contentRegion__23e6b, .layer__960e4 /*Settings*/, 128 | .fieldList__1fed1, 129 | .children__9293f:after, 130 | .visual-refresh .wrapper_d852db, .visual-refresh .wrapper_fc8177 /* Skeleton loading */, 131 | .visual-refresh .content__908e2 /*Divider*/ { 132 | background-color: transparent !important; 133 | background: transparent !important; 134 | } 135 | 136 | /*Server*/ 137 | .visual-refresh .channelTextArea_f75fb0 { 138 | background-color: var(--channeltextarea-background); 139 | } 140 | 141 | /*Buttons*/ 142 | .lookFilled__201d5.colorBrand__201d5 { 143 | background-color: var(--accent); 144 | color: var(--accent-font); 145 | } 146 | .lookFilled__201d5.colorBrand__201d5:hover { 147 | background-color: var(--accent-hovered); 148 | } 149 | .lookFilled__201d5.colorBrand__201d5:disabled{ 150 | background-color: var(--accent-hovered); 151 | } 152 | .lookFilled__201d5.colorPrimary__201d5, .lookFilled__201d5.colorPrimary__201d5:disabled { 153 | background-color: var(--button); 154 | color: var(--button-font-color); 155 | outline: solid var(--button-border) 1.5px; 156 | } 157 | 158 | /*Toggle*/ 159 | .container__87bf1.checked__87bf1{ 160 | background-color: var(--accent) !important; 161 | } 162 | .container__87bf1.checked__87bf1:hover{ 163 | background-color: var(--accent-hovered) !important; 164 | } 165 | 166 | /*Special Flyout*/ 167 | .messagesPopoutWrap__45690, 168 | .container__2692d, 169 | .container_fc561d, 170 | .contentWrapper__08434, 171 | .header_fed6d3, 172 | .wrapper__4e6ce, 173 | .popout__3f413, 174 | .wrapper_c0e32c, 175 | .quickswitcher_ac6cb0, 176 | .vc-notification-root, 177 | .container_cc2dff, .reactors_cc2dff, 178 | .emojiRow_e7d73e .emojiAliasInput_e7d73e .emojiInput_e7d73e, 179 | .main__949ab, 180 | .streamPreview__6da2d { 181 | background-color: var(--flyout); 182 | } 183 | 184 | /*Thread*/ 185 | .container__01ae { 186 | background-color: rgba(var(--layer1),0.05); 187 | } 188 | .floating__01ae2 { 189 | backdrop-filter: brightness(0.65) blur(16px) saturate(1.5); 190 | } 191 | 192 | /*Misc*/ 193 | .overlayBackground_c69a7b { 194 | background-color: var(--dm-about); 195 | } 196 | .resizeHandle__01ae2 { 197 | width: 0px; 198 | } 199 | .container__0f2e8 { /*Serverr Activity Status*/ 200 | background-color: rgba(var(--dark-layer1),0.05); 201 | outline: solid 1px rgba(255,255,255,0.1); 202 | } 203 | .scroller_ac6cb0 { /*Global search*/ 204 | border-radius: 5px; 205 | margin-right: 0px; 206 | } 207 | .visual-refresh .form_f75fb0 { 208 | margin-top: 0; 209 | } 210 | .jumpToPresentBar__0f481 { 211 | padding-bottom: 0; 212 | } 213 | .lottieIcon__5eb9b.buttonIcon_e131a9 { /* VoiceChat Soundboard icon */ 214 | --__lottieIconColor: white !important; 215 | } 216 | .container_e131a9 { /* VoiceChat border radius */ 217 | border-radius: 8px; 218 | } 219 | .title_c38106, .leading_c38106, .trailing_c38106, .winButtons_c38106 { /* Titlebar */ 220 | display: var(--title-bar-icon); 221 | } 222 | .visual-refresh .sidebarListRounded_c48ade { /* Remove sidebar backdrop-filter WHO PUTS BACKDROP FILTER HERE?? */ 223 | backdrop-filter: none; 224 | -webkit-backdrop-filter: none; 225 | } 226 | .panels_c48ade, .container__37e49 { /*User Profile*/ 227 | background: var(--status-panel) !important; 228 | } 229 | .visual-refresh .stackedBars__74017 { /* Reply Bar */ 230 | background: transparent; 231 | } 232 | 233 | /*meow*/ 234 | :root { 235 | --background-primary: transparent; 236 | --custom-channel-members-bg: transparent; 237 | --bg-base-primary: transparent; 238 | --home-background: transparent; 239 | --scrollbar-auto-track: transparent; 240 | --deprecated-store-bg: transparent; 241 | } 242 | 243 | body{ 244 | background-color: var(--app-bg) !important; 245 | } 246 | 247 | /* Fix semicolon bug */ 248 | .app_a3002d { 249 | color: transparent; 250 | } 251 | --------------------------------------------------------------------------------