Git Product home page Git Product logo

riddim-glitch / virtual-boy Goto Github PK

View Code? Open in Web Editor NEW
10.0 10.0 22.0 388 KB

Virtual Boy is a Discord theme based on the failed console with the same name that was made by nintendo. By default, it features a black and red color scheme. But the colors may be altered to fit the users personal desires!

Home Page: https://betterdiscord.app/theme/Virtual%20Boy

JavaScript 1.81% SCSS 98.19%
discord discord-theme

virtual-boy's Introduction

⋆˖⁺⛧₊༓•✧ Skye's GitHub Profile ✧•༓₊⛧⁺˖⋆

icon About Me:

My name is Skye, I am also known as "Riddim-GLiTCH" or "RDG" for short.

I'm a 23 year old Transfem.

I am an amateur themer and wannabe programmer. Currently in the process of learning CSS, JS, TS, and C#.

Discord Presence

virtual-boy's People

Contributors

huderon avatar its-x3non avatar riddim-glitch avatar saltssaumure avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

virtual-boy's Issues

TODO: Fix status tool tips on profile popouts with a nitro banner.

As showcased in the screenshot below, user popouts with a nitro banner will have the description for the status show up in the far left and upper most corner.
image-7.png
This is faulty behavior.

Thanks to Pastel Love for helping with discovering more details about this bug

[TODO] Add Theme Settings as seen in the latest release cadidate for BetterDiscord, for support in Future Versions.

An example of which can be seen here.

/**
 * @name DevTheme
 * @description Development theme for testing
 * @author Zerebos
 * @version 1.0.0
 *
 * @var checkbox fontEnable "Text Shadow: Enables text to have shadows" 0
 * @var range    fontSize   "Text Size"    [1, 0.1, 2, 0.01]
 * @var color    fontColor  "Text Color"   #ccc
 * @var select   fontName   "Font"    ["Arial", "Consolas*", "Times New Roman"]
 * @var text     bkgdImg    "Modal Background"   var(--modal-background)
 */

* {
  color: var(--fontColor)!important;
  font-size: calc(var(--fontSize) * 1em)!important;
  font-family: var(--fontName);
  /* offset-x | offset-y | blur-radius | color */
  text-shadow: calc(var(--fontEnable) * 2px) calc(var(--fontEnable) * 2px) calc(var(--fontEnable) * 10px) black;
}


.bd-addon-modal {
  background: var(--bkgdImg, var(--modal-background));
}

A preview of the in-app appearance of such settings:
A preview of the in-app appearance of such settings

The new theme settings will appear under META as @var. With the following formatting.
@var [TypeOfSetting¹] [FlagName²] [TextToDisplay³] [Options⁴]

  1. The type of setting used. The currently known types to me are
  • Checkbox (Self explanatory)
  • Range (Will provide the end user with a slider to set a variable between two different values)
  • Color (Will provide the end user with a color picker to set options such as accent color)
  • Select (Will provide the end user with a Dropdown menu with various options to chose from. Can be used for different styles within a theme, for example, different built-in fonts.)
  • Text (Will provide the end user with a text entry field, can be used for a custom titlebar text, inserting a custom background image through linking a CDN, or setting a querry to fetch certain data for an API of sorts.)
  1. The name of the flag. This can be called as a var() later in the theme.
  2. Self explanatory. Can be used to display a warning or a description about the current setting.
  3. This value depends on the TypeOfSetting value. can be used to set a default value for Checkbox, a range to choose between for Range, a default value for Color, the available option for Select, and a default value for Text.

These settings will be saved in .config/betterdiscord/data/[release-branch]/data under ThemeSettings.json and will be called whenever a theme of a matching name is loaded (see @name).

[Enhancement] New theme direction: Virtual Boy

new theme direction: Virtual boy
Changes:

  • Change the font to Press Start P2 from google fonts
  • Rename the theme to Virtual Boy
  • Un-round the rest of the corners to make everything squared
  • Make sure to properly colorize the rest of the elements.

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.