Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creating a theme #32

Open
Pickysaurus opened this issue May 18, 2022 · 0 comments
Open

Creating a theme #32

Pickysaurus opened this issue May 18, 2022 · 0 comments

Comments

@Pickysaurus
Copy link
Collaborator

Pickysaurus commented May 18, 2022

Vortex comes with the ability to customise its appearance to suit you. Whether you want to improve the contrast of colours or just go for something whacky, you have the tools to make Vortex as unique as you like. You view all community submitted themes on Nexus Mods.

Getting Started

To get started, navigate to the “settings” section and select the “theme” tab.

themes1

To make your first theme you want to clone the default, so you can start editing it. You will be asked for a name, this can be whatever you like.

Now you will have unlocked the options to change the text and colours of Vortex for your new theme. The options presented to you will have the following effect on the style.

Font Options

themes2

Option Name Elements changed
Font Size This is the global font size of Vortex. Think of it as a minimum size. Headings will always be slightly larger than the size set here (if possible).
Margins This alters the spacing to the left and right of the text. A smaller number will put the borders closer to the text.
Font Family This option allows you to change the main font of vortex used in the text and side menu.
Font Family (Headings) This option changes the heading font, used mainly in tab headings.

Colour Options

1200px-themes3

Option Name Elements changed
brand-primary Buttons on theme page
Number bubble for downloads/notifications
Text on notification buttons
“Get more mods” button
Expand/Collapse arrows on the dropzone
Close button in error popup
brand-info Background of informational notifications
Header icon in informational popup
Background of certain dashlets
brand-bg Background of main Vortex window
Background of the notification area
Text area in error dialogues
Background of drop-down menus
brand-clickable Buttons around the UI
Menu active section label
Menu collapse/expand button
Download graph line
Toolbar background
Log out button on Nexus Mods account dashlet.
link-color Text-based links
Unresolved conflicts icon
brand-highlight Not currently used.
brand-warning Background of warning notifications (e.g. "There are unsolved file conflicts.")
Missing masters icon on the plugins page.
brand-menu Background of the content area.
Background of the side menu.
Background of pop-up windows (such as when managing conflicts).
text-color Primary text colour.
Header text in inactive tabs.
Switch for "dark theme" on themes page.
brand-success Background of success notifications (check for mod updates complete).
Enabled button on mods and plugins pages.
On/Off settings toggles (when on)
File conflict rules set icon (lightning bolt).
brand-danger Background of error notifications.
Uninstall button.
Header icon in error pop-up boxes.
brand-secondary Not currently used.
text-color-disabled Text in tabs that have no content to display ("Nothing to configure" in workarounds).
Arrow lines in the Manage Groups editor

Dark Theme

Vortex has 6 different shades of grey used on its master stylesheet. These can by default set to improve visibility on a light theme. Checking this box will reverse the way the grey colours are used (making the lightest grey the darkest and vice versa). If you are making a dark theme, turning this on will improve contrast and readability of the UI elements.

Elements not changed by colour selection

As of Vortex 0.16.8, the following elements are not styled and will not obey theme colours above.

  • Header of the currently active tab.
  • Right-click menu mouse-over colour
  • Folder icon in the dropzone.
  • Font size sliders on themes page.
  • Download graph gradient fill.

Edit CSS Manually

Vortex also has an option for you to insert your own CSS manually. When using this option, it is recommended to use the developer tools which enable the console. You can add custom styles for any pre-determined classes in Vortex.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant