Provide SCSS file

Hello,

This is some SCSS code for light and dark function, please try and check it.

// Define base colors
$primary-color: #3498db; // A shade of blue
$secondary-color: #e74c3c; // A shade of red

// Lighten and darken functions
$primary-light: lighten($primary-color, 20%);
$primary-dark: darken($primary-color, 20%);

$secondary-light: lighten($secondary-color, 20%);
$secondary-dark: darken($secondary-color, 20%);

// Apply colors to elements
body {
  font-family: Arial, sans-serif;
}

.container {
  margin: 0 auto;
  padding: 20px;
  text-align: center;

  .primary {
    background-color: $primary-color;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;

    &.light {
      background-color: $primary-light;
    }

    &.dark {
      background-color: $primary-dark;
    }
  }

  .secondary {
    background-color: $secondary-color;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;

    &.light {
      background-color: $secondary-light;
    }

    &.dark {
      background-color: $secondary-dark;
    }
  }
}

Thanks