discord-theme

Small and simplified discord design css kit

Quick Start

You can do these to get started quickly:

• npm install discord-theme

• yarn add discord-theme

What's include

discordtheme/
├── css/
│   └── main.min.csss
└── js/
    └── main.min.js

Setup

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/main.min.css">

Examples

Input

<input class="dinput" name="input" value="This is text">

Select

<div class="custom-select-wrapper">
   <div class="custom-select">
    <div class="custom-select-trigger"><span>Select</span>
      <div class="arrow"></div>
    </div>
   <div class="custom-options">
    <span class="custom-option selected" data-value="value1">Value1</span>
    <span class="custom-option" data-value="value2">Value2</span>
    <span class="custom-option" data-value="value3">Value3</span>
   </div>
  </div>
</div>

Checkbox

<label class="check width-40"> <!-- width-10, width-15, width-20, width-25, width-35, width-40, width-45, width-50 -->
  Check box
<input type="checkbox" id="ch">
  <span class="checkmark"></span>
</label>

Multi-checkbox

<label class="multicheckbox">Item 1
  <input type="checkbox" name="checkboxitem1">
  <span class="checkmarkcustom"></span>
</label>

<label class="multicheckbox">Item 2
  <input type="checkbox" name="checkboxitem2">
  <span class="checkmarkcustom"></span>
</label>

<label class="multicheckbox">Item 3
  <input type="checkbox" name="checkboxitem3">
  <span class="checkmarkcustom"></span>
</label>

<label class="multicheckbox">Item 4
  <input type="checkbox" name="checkboxitem2">
  <span class="checkmarkcustom"></span>
</label>

Slider

<div class="width-20"> <!-- width-10, width-15, width-20, width-25, width-35, width-40, width-45, width-50 -->
  <input type="range" min="1" max="100" value="0" class="slider" id="myRange">
  <span id="rangeValue" class="dtext">1%</span>
</div>
<!-- Please don't change class and id values! -->

Buttons

  <a href="#" class="dbtn">Button</a>
  <a href="#" class="dbtn-red">Button</a>
  <a href="#" class="dbtn-outline">Button</a>
  <a href="#" class="dbtn-red">Button</a>
  <a href="#" class="dbtn-outline-red">Button</a>
  <a href="#" class="dbtn-link">Button</a>
  <a href="#" class="dbtn-link-blue">Link Button</a>

Little Checkbox

  <label class="checkbox">
    <input type="checkbox" name="rule">
      <span class="checkbox">
        <span></span>
      </span>
  </label>

Contributors

Thanks to contributors!

• Creator Rex#0134