Feat: added css themes

orestbida · Sep 25, 2023 · 8d18429 · 8d18429
1 parent 9b24a17
commit 8d18429
Show file tree

Hide file tree

Showing 3 changed files with 423 additions and 125 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -355,37 +355,128 @@ <h4>Misc</h4>
 
  <br>
  <br>
- <section>
+ <div>
 
  <h4>Themes</h4>
 
  <div class="themes">
  <label for="default-light">
  <input type="radio" id="default-light" name="theme" checked>
- <span class="input-label">Light theme (default)</span>
+ <span class="input-label">
+ <span class="theme-type">(builtin)</span>
+ <span class="theme-name">Light theme</span>
+
+ </span>
  </label>
 
  <label for="cc--darkmode">
  <input type="radio" id="cc--darkmode" name="theme">
- <span class="input-label">Dark theme (default)</span>
+ <span class="input-label">
+ <span class="theme-type">(builtin)</span>
+ <span class="theme-name">Dark theme</span>
+ </span>
  </label>
 
- <label for="cc--dark-turquoise">
+ <label for="cc--dark-turquoise" aria-label="Dark Turquoise">
  <input type="radio" id="cc--dark-turquoise" name="theme">
- <span class="input-label">Dark Turquoise</span>
+ <span class="input-label">
+ <span class="theme-type">(custom)</span>
+ <span class="theme-name">Dark Turquoise</span>
+ </span>
  </label>
 
  <label for="cc--light-funky">
  <input type="radio" id="cc--light-funky" name="theme">
- <span class="input-label">Light Funky</span>
+ <span class="input-label">
+ <span class="theme-type">(custom)</span>
+ <span class="theme-name">Light Funky</span>
+ </span>
  </label>
 
- <label for="cc--elegant-black">
+ <!-- <label for="cc--elegant-black">
  <input disabled type="radio" id="cc--elegant-black" name="theme">
- <span class="input-label">Elegant Black 🚧</span>
- </label>
+ <span class="input-label">
+ <span class="theme-type">(custom)</span>
+ <span class="theme-name">Elegant Black 🚧</span>
+ </span>
+ </label> -->
  </div>
- </section>
+
+ <div class="custom-themes">
+
+ <!-- !!!--CustomBlock type="info" title="How to use custom themes" details
+ <ol>
+ <li>Copy the CSS inside a <code>&lt;style&gt;</code> tag or inside a <code>.css</code> file. </li>
+ <li>Add the theme's class to the <code>body</code> element; e.g. <code>&lt;body class="theme_funky"&gt;</code></li>
+ </ol>
+ --!!! -->
+
+ <!--SHIKI language="css" details title="Dark Turquoise (CSS)" lineNumbers
+ .cc--dark-turquoise {
+ color-scheme: dark;
+ --cc-bg: #161a1c;
+ --cc-primary-color: rgb(239, 244, 246);
+ --cc-secondary-color: #b1bdc3;
+ --cc-btn-primary-bg: #60fed2;
+ --cc-btn-primary-color: #000;
+ --cc-btn-primary-hover-bg: #4dd4ae;
+ --cc-btn-primary-hover-color: #000;
+ --cc-btn-secondary-bg: #242c31;
+ --cc-btn-secondary-color: var(--cc-primary-color);
+ --cc-btn-secondary-hover-bg: #d4dae0;
+ --cc-btn-secondary-hover-color: #000;
+ --cc-cookie-category-block-bg: #1e2428;
+ --cc-cookie-category-block-border: #1e2428;
+ --cc-cookie-category-block-hover-bg: #242c31;
+ --cc-cookie-category-block-hover-border: #242c31;
+ --cc-cookie-category-expanded-block-hover-bg: #242c31;
+ --cc-cookie-category-expanded-block-bg: #1e2428;
+ --cc-toggle-readonly-bg: #343e45;
+ --cc-overlay-bg: rgba(4, 6, 8, .85)!important;
+ --cc-toggle-on-knob-bg: var(--cc-bg);
+ --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg);
+ --cc-separator-border-color: #222a30;
+ --cc-footer-border-color: #212529;
+ --cc-footer-bg: #0f1112;
+ }
+ -->
+
+ <!--SHIKI language="css" details title="Light Funky (CSS)" lineNumbers
+ .cc--light-funky {
+ --cc-bg: #f9faff;
+ --cc-primary-color: #112954;
+ --cc-secondary-color: #112954;
+ --cc-btn-primary-bg: #3859d0;
+ --cc-btn-primary-color: var(--cc-bg);
+ --cc-btn-primary-hover-bg: #213657;
+ --cc-btn-primary-hover-color: #fff;
+ --cc-btn-secondary-bg: #dfe7f9;
+ --cc-btn-secondary-color: var(--cc-secondary-color);
+ --cc-btn-secondary-hover-bg: #c6d1ea;
+ --cc-btn-secondary-hover-color: #000;
+ --cc-cookie-category-block-bg: #ebeff9;
+ --cc-cookie-category-block-border: #ebeff9;
+ --cc-cookie-category-block-hover-bg: #dbe5f9;
+ --cc-cookie-category-block-hover-border: #dbe5f9;
+ --cc-cookie-category-expanded-block-hover-bg: #ebeff9;
+ --cc-cookie-category-expanded-block-bg: #ebeff9;
+ --cc-overlay-bg: rgba(219, 232, 255, 0.85)!important;
+ --cc-toggle-readonly-bg: #cbd8f1;
+ --cc-toggle-on-knob-bg: var(--cc-bg);
+ --cc-toggle-off-bg: #8fa8d6;
+ --cc-toggle-readonly-knob-bg: var(--cc-bg);
+ --cc-separator-border-color: #f1f3f5;
+ --cc-footer-border-color: #f1f3f5;
+ --cc-footer-bg: var(--cc-bg);
+ --cc-btn-border-radius: 1rem .6rem 1.3rem .5rem / .5rem 1rem;
+ --cc-modal-border-radius: var(--cc-btn-border-radius);
+ --cc-pm-toggle-border-radius: var(--cc-btn-border-radius);
+ }
+ -->
+ </div>
+ </div>
+
+
 
  <br>
  <br>