decred.org/dcrdex@v1.0.5/client/webserver/site/src/css/colors.scss (about)

     1  // This file defines the color scheme used in the light and dark themes.
     2  
     3  body:not(.dark) {
     4    // body & text
     5    --body-bg: #fafafa;
     6    --body-bg-lower-opacity: #fafafa88;
     7    --section-bg: #f6f6f6;
     8    --form-bg: #f0f0f0;
     9    --tertiary-bg: #7772;
    10    --text-color: #333;
    11    --text-color-secondary: #4a4949;
    12    --text-danger: #d22;
    13    --text-warning: #f82e;
    14    --text-grey: #777;
    15    --border-color: #ddd;
    16    --hint-color: #4397cd;
    17  
    18    // links
    19    --link-color: #2a71d5;
    20    --link-color-hover: #144487;
    21    --subtle-link-color: #05053b;
    22    --subtle-link-hover: #07075e;
    23  
    24    // popup notes
    25    --popup-notes-bg: black;
    26    --popup-notes-color: #dfe2e1;
    27  
    28    // buttons
    29    --btn-feature-bg: #6bc5ff;
    30    --btn-feature-hover-bg: #a3dbff;
    31    --btn-feature-border-color: #759cb5;
    32    --btn-featur-hover-border-color: #9bc3dd;
    33    --btn-danger-hover-color: white;
    34    --btn-border-color: #ddd;
    35    --btn-hover-border-color: #ddd;
    36    --btn-go-bg: #0b5831;
    37    --btn-go-hover-bg: #0b5831;
    38    --btn-go-color: #fff;
    39  
    40    // forms
    41    --forms-bg: #fafafa99;
    42    --form-input-bg: #fff;
    43    --form-input-border: #999;
    44    --form-input-border-focus: #555;
    45    --form-input-bg-active: #3095db;
    46    --form-opt-selected-bg: #0001;
    47    --form-selected-tab-bg: white;
    48  
    49    // market view
    50    --indicator-good: #179717;
    51    --buy-color: #207a46;
    52    --sell-color: #99302b;
    53    --market-buygreen-bg: #207a4699;
    54    --market-sellred-bg: #99302b99;
    55    --market-sell-color: #99302b;
    56    --market-btn-color: #555;
    57    --market-btn-selected-color: black;
    58    --market-markettab-selected-bg: #7773;
    59    --market-orderopt-bg: #fff1;
    60    --market-numorders-bg: #c5c5e6;
    61  
    62    // loader
    63    --loader-bg: #e0e0e077;
    64  
    65    // logo
    66    --dex-url: url("/img/softened-icon.png");
    67  }
    68  
    69  
    70  body.dark {
    71    // body & text
    72    --body-bg: #040b14;
    73    --body-bg-lower-opacity: #040b1488;
    74    --section-bg: #071627;
    75    --form-bg: #0a1e34;
    76    --tertiary-bg: #78787822;
    77    --text-color: #dfe2e1;
    78    --text-color-secondary: #a1a1a1;
    79    --text-danger: #ec6a6a;
    80    --text-warning: #f82e;
    81    --text-grey: #999;
    82    --border-color: #383f4b;
    83    --hint-color: #64b2e5;
    84  
    85    // links
    86    --link-color: #388bff;
    87    --link-color-hover: #5e9ffa;
    88    --subtle-link-color: #e6e6ff;
    89    --subtle-link-hover: #d1d1ff;
    90  
    91    // popup notes
    92    --popup-notes-bg: white;
    93    --popup-notes-color: #333;
    94  
    95    // buttons
    96    --btn-border-color: #7777;
    97    --btn-hover-border-color: #777;
    98    --btn-feature-bg: #0a4972;
    99    --btn-feature-hover-bg: #176699;
   100    --btn-feature-border-color: #1e618d;
   101    --btn-featur-hover-border-color: #85a5ba;
   102    --btn-danger-hover-color: white;
   103    --btn-go-bg: #0b5831;
   104    --btn-go-hover-bg: #0b5831;
   105    --btn-go-color: #fff;
   106  
   107    // forms
   108    --forms-bg: #05141f99;
   109    --form-input-bg: #0009;
   110    --form-input-border: #555;
   111    --form-input-border-focus: #4271ce;
   112    --form-input-bg-active: #27278d;
   113    --form-opt-selected-bg: #fff1;
   114    --form-selected-tab-bg: #39447c;
   115  
   116    // market view
   117    --indicator-good: #29bb77;
   118    --buy-color: #29bb77;
   119    --sell-color: #e95e5e;
   120    --market-buygreen-bg: #29bb7799;
   121    --market-sellred-bg: #e95e5e99;
   122    --market-sell-color: #e95e5e;
   123    --market-btn-color: #aaa;
   124    --market-btn-selected-color: #eee;
   125    --market-markettab-selected-bg: #fff1;
   126    --market-orderopt-bg: #0001;
   127    --market-numorders-bg: #141488;
   128  
   129    // loader
   130    --loader-bg: #13202b77;
   131  
   132    // logo
   133    --dex-url: url("/img/softened-icon-dark.png");
   134  }
   135  
   136  .greyscale {
   137    filter: grayscale(1);
   138  }
   139  
   140  .blurry-bg {
   141    -webkit-backdrop-filter: blur(4px);
   142    backdrop-filter: blur(4px);
   143  }
   144  
   145  .body-bg {
   146    background-color: var(--body-bg);
   147  }
   148  
   149  .section-bg {
   150    background-color: var(--section-bg);
   151  }
   152  
   153  .text-good {
   154    color: var(--indicator-good);
   155  }