GithubHelp home page GithubHelp logo

josh65-2201 / discord-windows-11-theme Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 1.0 2.73 MB

Windows 11 style theme for Discord made for Better Discord and Vencord

CSS 100.00%
discord betterdiscord-theme theme vencord-theme

discord-windows-11-theme's Introduction

image

Download

Latest version: 2024.07.27.0

Better Discord Open https://raw.githubusercontent.com/Josh65-2201/Discord-Windows-11-theme/main/Discord_Windows_11.theme.css > Right click > Save as > Go to BetterDiscord themes folder (%AppData%\BetterDiscord\themes) > Save
Vencord Offline - Manual update Open https://raw.githubusercontent.com/Josh65-2201/Discord-Windows-11-theme/main/Discord_Windows_11.theme.css > Right click > Save as > Go to Vencord themes folder (%AppData%\Vencord\themes) > Save

Online - Auto update Copy URL `https://raw.githubusercontent.com/Josh65-2201/Discord-Windows-11-theme/main/Discord_Windows_11.theme.css` > Open Discord settings > Click `Themes` > Click `Online themes` > Paste in theme links.



Functionality changes

Some controls have moved to conform with Windows 11 styles.

Moved settings

  • Toast/Notifications now have an global toggle in the themes settings
  • Mute and deafen settings are now shown only on the voice connected panel
  • Stickers and GIFs are now all in the emote menu
  • Search bars are on the title bar
  • User profile is now in the title bar next to window controls

Other

  • User/Members list will now auto hide at smallest window size. (Toggle doesn't do anything visibly at min size but will save state upon resize)
  • Due to layering issues the Window drag area is small bar at top of the window



Development

Guidelines

  • Any editor will work, Visual Studios Code is recommended.
  • Indents use tabs at 4 spaces.
  • New sections follow the line gaps
Main section 1 (E.G. Servers bar, Messages content)
	Sub section 1 (E.G. Server icon, Message)
		Part 1 (Position, Background color)
		Part 2 (Position, Background color)

	Sub section 2 (E.G. Server icon, Message)


Main section 2 (E.G. Servers bar, Messages content)

File structure

Note

File isn't updated to follow this yet

Theme imports and settings

Discord
    Title bar
        Discord icon
        Watermark text
        Search bar
            Search filters
        Account icon
        Window controls
    Servers bar
        Home button
        Server folders
        Server icons
            Selected highlight
            Unread message
            Mention
        Add server model
        Discovery page
        Discord Settings
            Pages in order 
        Server Settings
            Pages in order
    Home Page
        Friends
            Online
            All
            Pending
            Blocked
            Add friend
        Nitro
        Shop
        Family centre
            Activity
            My family
        DMs/groups
            Add to groupchat
            Sidebar user profile
        Activity feed
    Server page
        Channels list
            Server information
                Banner image
                Server type icon
                Title
                Boosts bar
                Boost model
            Events
            Channels and roles
                Customise
                Browse
            Members
                Mod view
            Channels
                Group
                Channel
            Current activity/game
            Voice chat connected
        Messages content
            Channel info
            Channel controls
                Threads
                Pins
                Inbox
            Messages
                Embeds
                Reactions
                Wave to user
            Enter message
                Text box
                Reply controls
                / commands
                Buttons
        Search results
        Members sidebar
            Role header
            Users
    User profile mini
        Profile icon
        Badges
        Roles
        Notes
    User profile full
        Profile icon
        Badges
        Categories
            User info
            Mutual servers
            Mutual groups
            Mutual friends
    Quick actions (Ctrl + T)
    Offline notice bar

Better Discord
    Mod loader
        Complie error content dialog
    Plugins

Vencord
    Mod loader
    Plugins

Common controls
    Toasts/Notifications
    Scrollbars
    Loading spinner
    Check box
    Radio buttons
    Toggle switches
    Sliders
    Drop down box
    Sidebar buttons
        Selected highlight
    Action buttons
        Main accented
        Secondary Other
    Text inputs
    Text selection
    Hyper links
    Tab selection
    Context menu

discord-windows-11-theme's People

Contributors

josh65-2201 avatar

Stargazers

avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

discord-windows-11-theme's Issues

Add light mode compatibility

Describe the solution you'd like

Where is it

  • Settings > toggle button background
  • Accented buttons text switch too --textAccent

Remove nitro shiny on buttons

Describe the issue
A clear and concise description of what the bug is.

Expected behavior
A clear and concise description of what you expected to happen.
button

Where is it

User profile
Emote/stickers page

Screenshots
If applicable, add screenshots to help explain your problem.

Versions

Discord:
Better discord:
Theme:

Add settings Icons again

Describe the issue

Expected behavior

Where is it

Screenshots

Versions

Discord:
Better discord:
Theme:

fix Settings page width sizes

Describe the issue
Plugin & themes repo, activity status doesnt fully support min width of window and will be parcialy missing on the right.

Expected behavior

Where is it

Screenshots

Versions
Discord:
Better discord:
Theme:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.