Dark

The dark theme offers a sleek and modern interface with high contrast elements, making it ideal for low-light environments or users who prefer darker color schemes.
more information on the variables used, please refer to the corresponding documentation or variable reference guide variables

definitely check it out Theme Switcher

.dark {
    --color: white;

    --color-secondary: white;
    --background-color: black;
    --color-tertiary: var(--color-tertiary-dim);
    --scrollbar-bg: black;
    --color-primary: var(--color-primary-dim);
    --box-shadow-color: rgba(0, 0, 0, 0.3);
    --color-success: var(--color-success-dim);
    --error-color: var(--error-color-dim);
    --color-surface-gray: var(--color-surface-gray-dim);
    /**/
    color:white;

}

/* Additional */

.other {
    /* light */
}
.dark .other {
    /* Additional styles for elements within the dark theme */
}

The dark theme enhances readability and reduces eye strain by providing a clear contrast between text and background elements. It incorporates subtle shadows and accent colors to create depth and visual interest throughout the interface.

statement

<div class="no-t-light-flex">
 <!-- Content to be displayed flex in dark theme -->
</div>

<div class="no-t-light">
    <!-- Content to be displayed in dark theme -->
</div>

<div class="no-t-dark">
    <!-- Content to be hidden in light theme -->
</div>

/* custom Show dark theme button in dark theme */
.dark .theme-dark-only {
    display: block;
}

This HTML snippet demonstrates conditional rendering of content based on the theme. The .no-t-light-flex class applies flexbox layout to its content only in the light theme, while the .no-t-light class displays its content only in the light theme, and the .no-t-dark class hides its content in the dark theme.