mirror of
https://github.com/ColinDuquesnoy/QDarkStyleSheet.git
synced 2026-08-30 00:50:30 +08:00
Isabela Presedo-Floyd
3.9 KiB
3.9 KiB
Colors
Color System
The color system is the source of the colors that themes draw from. Each has a
range of values from 0 (black #000000) to 150 (white #ffffff). Not all
colors are or should be used in every theme, but the scales provide a chance to
see the colors in a larger context and makes it easy to switch out colors as desired.
The number assigned to each estimates how light or dark that color is. For parts of an interface that are interactive, have text, or have any other important information, please use colors combinations that have at least a difference of 20 where colors overlap. Depending on the colors, you may need more contrast to create a theme that meets accessibility standards about contrast or color blindness.
Gray
| System Name | Value | Sample |
|---|---|---|
| B0 | #000000 |
 |
| B10 | #19232D |
 |
| B20 | #262E38 |
|
| B30 | #37414F |
|
| B40 | #455364 |
|
| B50 | #54687A |
|
| B60 | #60798B |
|
| B70 | #788D9C |
|
| B80 | #9DA9B5 |
|
| B90 | #CBCACA |
|
| B100 | #D9D8D8 |
|
| B110 | #E1E1E1 |
|
| B120 | #EEEEEE |
|
| B130 | #F5F5F5 |
|
| B140 | #FAFAFA |
|
| B150 | #FFFFFF |
|
Blue
| System Name | Value | Sample |
|---|---|---|
| B0 | #000000 |
|
| B10 | #062647 |
|
| B20 | #26486B |
|
| B30 | #375A7F |
|
| B40 | #346792 |
|
| B50 | #1A72BB |
|
| B60 | #057DCE |
|
| B70 | #259AE9 |
|
| B80 | #37AEFE |
|
| B90 | #73C7FF |
|
| B100 | #9FD9FF |
|
| B110 | #C2E3FA |
|
| B120 | #CEEBFF |
|
| B130 | #DAF0FF |
|
| B140 | #F5FBFF |
|
| B150 | #FFFFFF |
Default Dark Mode
Background
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| BACKGROUND_1 | B10 | #19232D |
|
| BACKGROUND_2 | B20 | #262E38 |
|
| BACKGROUND_3 | B40 | #455364 |
|
| BACKGROUND_4 | B60 | #60798B |
|
| BACKGROUND_5 | B60 | #60798B |
Text
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| TEXT_1 | B150 | #FFFFFF |
|
| TEXT_2 | B140 | #FAFAFA |
|
| TEXT_3 | B120 | #EEEEEE |
|
| TEXT_4 | B100 | #D9D8D8 |
Inverse Text
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| INVERSE_TEXT_1 | B150 | #FFFFFF |
|
| INVERSE_TEXT_2 | B140 | #FAFAFA |
|
| INVERSE_TEXT_3 | B120 | #EEEEEE |
|
| INVERSE_TEXT_4 | B100 | #D9D8D8 |
Accent
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| ACCENT_1 | B50 | #1A72BB |
|
| ACCENT_2 | B70 | #259AE9 |
|
| ACCENT_3 | B90 | #73C7FF |
|
| ACCENT_4 | B110 | #C2E3FA |
Border
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| BORDER_1 | B40 | #455364 |
|
| BORDER_2 | B50 | #54687A |
|
| BORDER_3 | B60 | #60798B |
|
| BORDER_4 | B70 | #788D9C |
Feedback
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| SUCCESS_1 | B40 | #008760 |
|
| SUCCESS_2 | B70 | #20C997 |
|
| SUCCESS_3 | B110 | #B0F5E1 |
|
| ERROR_1 | B40 | #D4140B |
|
| ERROR_2 | B70 | #E74C3C |
|
| ERROR_3 | B110 | #FFC3BD |
|
| WARN_1 | B40 | #CE4B01 |
|
| WARN_2 | B70 | #F37E12 |
|
| WARN_3 | B110 | #FFDDA7 |
Icon
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| ICON_1 | B140 | #FAFAFA |
|
| ICON_2 | B70 | #259AE9 |
|
| ICON_3 | B70 | #20C997 |
|
| ICON_4 | B70 | #E74C3C |
|
| ICON_5 | B70 | #F37E12 |
|
| ICON_6 | B30 | #37414F |
Highlight
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| HIGHLIGHT_1 | B50 | #54687A |
|
| HIGHLIGHT_2 | B60 | #60798B |
|
| HIGHLIGHT_3 | B70 | #788D9C |
|
| HIGHLIGHT_4 | B80 | #9DA9B5 |
Find
| Palette Name | System Name | Value | Sample |
|---|---|---|---|
| FIND_1 | B50 | #1A72BB |
|
| FIND_2 | B60 | #057DCE |
|
| FIND_3 | B70 | #259AE9 |
|
| FIND_4 | B80 | #37AEFE |