themes-df.scss

//themes css

// Joy Theme
html[layout="joy"] {
  --primary-hs: 210, 97%; // template primary color // #024f9d
  --primary: hsl(var(--primary-hs), 31%);
  --df-common-bg: var(--df-e9e8d9);
}

// Green Theme
html[data-theme="Green"] {
  --primary-hs: 148, 100%; // template primary color // #008a40
  --primary: hsl(var(--primary-hs), 27%);
  --df-common-bg: var(--primary-100);
  --df-body-bg: var(--primary-0); // body bg

  img {
    filter: unset;
  }
}

// Orange Theme
html[data-theme="Orange"] {
  --primary-hs: 32, 91%; // template primary color // #e57f0b
  --primary: hsl(var(--primary-hs), 47%);
  --df-common-bg: var(--primary-100);
  --df-body-bg: var(--primary-0); // body bg

  .category-card .category-card-main .eye-icon,
  .bookmark-icon {
    filter: invert(1);
  }
}

// Dark Mode
html[data-theme="Darkmode"],
html[data-theme="JOYFUL"][data-mode="DARKMODE"] {
  // Dark Theme color variation
  --primary-hs: 49, 100%; // template primary color // #ffd829
  --primary: hsl(var(--primary-hs), 58%);

  //common variables
  --df-333: #333;
  --df-222: #222;
  --text-color: var(--white);
  --df-background: var(--df-222);
  --df-common-bg: var(--df-222);

  //declared variables
  --df-body-bg: var(--black); // body bg
  --df-card-bg: var(--df-333);
  --df-related-card-bg: var(--df-333);
  --df-sidebar-menu-text: var(--gray-300);
  --df-sidebar-menu-active-bg: var(--df-333);
  --df-tab-text: var(--text-color);
  --df-btn-default-color: var(--black);
  --df-tag-bg: var(--black);

  --open-btn-bg: var(--df-222);
  --open-btn-color: var(--white);

  lib-lib-entry {
    .df-header img {
      filter: unset !important;
    }

    .discussion-forum-content .discuss-right-panel {
      background: var(--df-common-bg);
      padding: 1rem;
    }