Google Dynamic Theme

dynamic-theme.scss

/*
  Welcome to the Dynamic editor!
  
  You can edit the SCSS here to create your own custom themes.
  Note: most styles are set in the light-theme-default
  and dark-theme-default sections.

  You can also check out some other templates we've created for you by either
  clicking on “All Templates” above or following this link:
  https://github.com/dynamic-labs/sdk-themes/tree/main/scss
  
  Copy paste our other templates into this page to get some additional inspiration.

  Have fun!
*/

@mixin dark-theme-variables {
  @media (prefers-color-scheme: dark) {
    :root [data-dynamic-theme="auto"] {
      @content;
    }
  }

  :root [data-dynamic-theme="dark"] {
    @content;
  }
}

@mixin light-theme-variables {
  :root {
    /* Fallback for browsers that don't support prefers-color-scheme */
    @content;
  }

  @media (prefers-color-scheme: light) {
    :root [data-dynamic-theme="auto"] {
      @content;
    }
  }

  :root [data-dynamic-theme="light"] {
    @content;
  }
}

@mixin bold-brand {
  & [data-dynamic-theme-brand="bold"],
  &[data-dynamic-theme-brand="bold"] {
    // has both with and without space to target root and non root elements
    @content;
  }
}

@mixin subtle-brand {
  & [data-dynamic-theme-brand="subtle"],
  &[data-dynamic-theme-brand="subtle"] {
    // has both with and without space to target root and non root elements
    @content;
  }
}

$SHADOW_DOWN_1: 0px 1px 2px rgba(24, 39, 75, 0.04);
$SHADOW_DOWN_2: 0px 12px 20px -6px rgba(24, 39, 75, 0.02),
  0px 16px 26px -4px rgba(24, 39, 75, 0.04);
$SHADOW_DOWN_3: 0px 24px 32px -24px rgba(0, 0, 0, 0.24);

$SHADOW_UP_1: 0px -8px 48px -8px rgba(109, 121, 165, 0.16);

$BRAND_HOVER_COLOR: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.08)
  ),
  #4779ff;
$BRAND_PRIMARY_COLOR: #4779ff;
$BRAND_SECONDARY_COLOR: rgba(71, 121, 255, 0.15);

$BORDER_RADIUS: 24px;

$TITLE: 18px;

$BODY_NORMAL: 15px;
$BODY_SMALL: 12px;
$BODY_MINI: 11px;

$BUTTON_PRIMARY: 14px;
$BUTTON_SECONDARY: 12px;

$NUMBERS_BIG: 14px;
$NUMBERS_MEDIUM: 12px;
$NUMBERS_SMALL: 10px;

@layer light-theme-default {
  // light theme is first, so it can be the default
  $google-blue: #4285F4;
  $google-red: #DB4437;
  $google-yellow: #F4B400;
  $google-green: #0F9D58;

  // Base Colors
  $BASE_1: #FFFFFF; // White background
  $BASE_2: #F5F5F5; // Light grey for secondary background
  $BASE_3: rgba(60, 64, 67, 0.05); // Light grey for borders and separators
  $BASE_4: rgba(60, 64, 67, 0.12); // Darker grey for shadows and emphasis
  $BASE_5: linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%); // Gradient background

  // Text Colors
  $TEXT_PRIMARY: #202124; // Primary text color (Google's dark grey)
  $TEXT_SECONDARY: rgba($TEXT_PRIMARY, 65%); // Secondary text color (lighter)
  $TEXT_TERTIARY: rgba($TEXT_PRIMARY, 40%); // Tertiary text color (even lighter)
  $TEXT_LINK: $google-blue; // Hyperlink color (Google blue)

   // Special Colors
  $CONNECTION_GREEN: $google-green; // Use Google green for connection-related elements
  $ERROR_1: $google-red; // Error color (Google red)
  $ERROR_2: rgba($google-red, 0.1); // Lighter error background

  // Overlays and Hover States
  $OVERLAY: rgba(60, 64, 67, 0.15); // Overlay color
  $HOVER: rgba(60, 64, 67, 0.03); // Hover state color

  // Loading Animation Gradient
  $LOADING_ANIMATION_GRADIENT: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0%) 0,
    rgba(255, 255, 255, 20%) 20%,
    rgba(255, 255, 255, 50%) 60%,
    rgba(255, 255, 255, 0%)
  );

  @include light-theme-variables {
    --dynamic-font-family-primary: "DM Sans", sans-serif;
    --dynamic-font-family-numbers: "Roboto Mono", monospace, sans-serif;
    --dynamic-base-1: #{$BASE_1};
    --dynamic-base-2: #{$BASE_2};
    --dynamic-base-3: #{$BASE_3};
    --dynamic-base-4: #{$BASE_4};
    --dynamic-base-5: #{$BASE_5};
    --dynamic-brand-hover-color: #{$BRAND_HOVER_COLOR};
    --dynamic-brand-primary-color: #{$BRAND_PRIMARY_COLOR};
    --dynamic-brand-secondary-color: #{$BRAND_SECONDARY_COLOR};
    --dynamic-connection-green: #{$CONNECTION_GREEN};
    --dynamic-border-radius: #{$BORDER_RADIUS};
    --dynamic-hover: #{$HOVER};
    --dynamic-error-1: #{$ERROR_1};
    --dynamic-error-2: #{$ERROR_2};
    --dynamic-footer-background-color: #{$BASE_2};
    --dynamic-footer-text-color: #{$TEXT_PRIMARY};
    --dynamic-footer-icon-color: #{$BRAND_PRIMARY_COLOR};
    --dynamic-loading-animation-gradient: #{$LOADING_ANIMATION_GRADIENT};
    --dynamic-overlay: #{$OVERLAY};
    --dynamic-shadow-down-1: #{$SHADOW_DOWN_1};
    --dynamic-shadow-down-2: #{$SHADOW_DOWN_2};
    --dynamic-shadow-down-3: #{$SHADOW_DOWN_3};
    --dynamic-shadow-up-1: #{$SHADOW_UP_1};
    --dynamic-text-link: #{$TEXT_LINK};
    --dynamic-text-primary: #{$TEXT_PRIMARY};
    --dynamic-text-secondary: #{$TEXT_SECONDARY};
    --dynamic-text-size-body-mini: #{$BODY_MINI};
    --dynamic-text-size-body-normal: #{$BODY_NORMAL};
    --dynamic-text-size-body-small: #{$BODY_SMALL};
    --dynamic-text-size-button-primary: #{$BUTTON_PRIMARY};
    --dynamic-text-size-button-secondary: #{$BUTTON_SECONDARY};
    --dynamic-text-size-numbers-big: #{$NUMBERS_BIG};
    --dynamic-text-size-numbers-medium: #{$NUMBERS_MEDIUM};
    --dynamic-text-size-numbers-small: #{$NUMBERS_SMALL};
    --dynamic-text-size-title: #{$TITLE};
    --dynamic-text-tertiary: #{$TEXT_TERTIARY};
    --dynamic-badge-background: #{$BASE_3};
    --dynamic-badge-color: #{$TEXT_SECONDARY};
    --dynamic-badge-dot-background: #{$BRAND_PRIMARY_COLOR};
    --dynamic-search-bar-background: ;
    --dynamic-search-bar-background-hover: ;
    --dynamic-search-bar-background-focus: #{$BASE_2};
    --dynamic-search-bar-border: 1px solid #{$BASE_3};
    --dynamic-search-bar-border-hover: 1px solid #{$BASE_4};
    --dynamic-search-bar-border-focus: 1px solid #{$BASE_4};
    --dynamic-modal-border: ;
    --dynamic-modal-width: 22.5rem; // 360px
    --dynamic-modal-padding: 1.5rem; // 24px
    --dynamic-footer-padding: 1.25rem 1.25rem 1.25rem 1.5rem; // 20px 24px
    --dynamic-footer-border: 1px solid #{$BASE_4};
    --dynamic-wallet-list-tile-padding: 0.75rem; // 12px
    --dynamic-wallet-list-tile-gap: 0.375rem; // 6px
    --dynamic-wallet-list-max-height: 16.25rem; // 260px
    --dynamic-wallet-list-tile-background: #{$BASE_2};
    --dynamic-wallet-list-tile-border: ;
    --dynamic-wallet-list-tile-shadow: #{$SHADOW_DOWN_1};
    --dynamic-wallet-list-tile-background-hover: #{$BASE_2};
    --dynamic-wallet-list-tile-border-hover: ;
    --dynamic-wallet-list-tile-shadow-hover: #{$SHADOW_DOWN_2};
    --dynamic-connect-button-background: #{$BASE_2};
    --dynamic-connect-button-color: #{$TEXT_PRIMARY};
    --dynamic-connect-button-border: 1px solid #{$BASE_4};
    --dynamic-connect-button-shadow: #{$SHADOW_DOWN_1};
    --dynamic-connect-button-background-hover: #{$HOVER};
    --dynamic-connect-button-color-hover: #{$TEXT_PRIMARY};
    --dynamic-connect-button-border-hover: 1px solid #{$BASE_4};
    --dynamic-connect-button-shadow-hover: #{$SHADOW_DOWN_2};
    --dynamic-tooltip-color: #{$TEXT_PRIMARY};
    --dynamic-tooltip-text-color: #{$BASE_2};
    @include bold-brand {
      --dynamic-footer-text-color: #{$BASE_2};
      --dynamic-footer-icon-color: rgba(247, 247, 249, 0.75);
      --dynamic-footer-border: ;
    }
  }
}

@layer dark-theme-default {
  // Google's color palette for brand colors
  $google-blue: #4285F4;
  $google-red: #DB4437;
  $google-yellow: #F4B400;
  $google-green: #0F9D58;

  // Base Colors for Dark Theme
  $BASE_1: #202124; // Google's dark grey for primary background
  $BASE_2: #303134; // A slightly lighter grey for secondary elements
  $BASE_3: rgba(255, 255, 255, 0.08); // For borders and separators
  $BASE_4: rgba(255, 255, 255, 0.15); // For shadows and emphasis
  $BASE_5: linear-gradient(180deg, #24272f 0%, #14161c 100%); // Gradient background

  // Text Colors for Dark Theme
  $TEXT_PRIMARY: #E8EAED; // Light grey for primary text
  $TEXT_SECONDARY: rgba($TEXT_PRIMARY, 65%); // Secondary text color
  $TEXT_TERTIARY: rgba($TEXT_PRIMARY, 40%); // Tertiary text color
  $TEXT_LINK: $google-blue; // Hyperlink color (Google blue)

  // Special Colors for UI elements
  $CONNECTION_GREEN: $google-green; // Use Google green for connection-related elements
  $ERROR_1: $google-red; // Error color (Google red)
  $ERROR_2: rgba($google-red, 0.2); // Lighter error background

  // Overlays and Hover States for Dark Theme
  $OVERLAY: rgba(0, 0, 0, 0.25); // Overlay color
  $HOVER: rgba(255, 255, 255, 0.1); // Hover state color

  // Loading Animation Gradient
  $LOADING_ANIMATION_GRADIENT: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0%) 0,
    rgba(255, 255, 255, 1%) 20%,
    rgba(255, 255, 255, 5%) 60%,
    rgba(255, 255, 255, 0%)
  );

  @include dark-theme-variables {
    --dynamic-font-family-primary: "DM Sans", sans-serif;
    --dynamic-font-family-numbers: "Roboto Mono", monospace, sans-serif;
    --dynamic-base-1: #{$BASE_1};
    --dynamic-base-2: #{$BASE_2};
    --dynamic-base-3: #{$BASE_3};
    --dynamic-base-4: #{$BASE_4};
    --dynamic-base-5: #{$BASE_5};
    --dynamic-brand-hover-color: #{$BRAND_HOVER_COLOR};
    --dynamic-brand-primary-color: #{$BRAND_PRIMARY_COLOR};
    --dynamic-brand-secondary-color: #{$BRAND_SECONDARY_COLOR};
    --dynamic-connection-green: #{$CONNECTION_GREEN};
    --dynamic-border-radius: #{$BORDER_RADIUS};
    --dynamic-hover: #{$HOVER};
    --dynamic-error-1: #{$ERROR_1};
    --dynamic-error-2: #{$ERROR_2};
    --dynamic-footer-background-color: #{$BASE_1};
    --dynamic-footer-text-color: #{$TEXT_PRIMARY};
    --dynamic-footer-icon-color: #{$BRAND_PRIMARY_COLOR};
    --dynamic-loading-animation-gradient: #{$LOADING_ANIMATION_GRADIENT};
    --dynamic-overlay: #{$OVERLAY};
    --dynamic-shadow-down-1: #{$SHADOW_DOWN_1};
    --dynamic-shadow-down-2: #{$SHADOW_DOWN_2};
    --dynamic-shadow-down-3: #{$SHADOW_DOWN_3};
    --dynamic-shadow-up-1: #{$SHADOW_UP_1};
    --dynamic-text-link: #{$TEXT_LINK};
    --dynamic-text-primary: #{$TEXT_PRIMARY};
    --dynamic-text-secondary: #{$TEXT_SECONDARY};
    --dynamic-text-size-body-mini: #{$BODY_MINI};
    --dynamic-text-size-body-normal: #{$BODY_NORMAL};
    --dynamic-text-size-body-small: #{$BODY_SMALL};
    --dynamic-text-size-button-primary: #{$BUTTON_PRIMARY};
    --dynamic-text-size-button-secondary: #{$BUTTON_SECONDARY};
    --dynamic-text-size-numbers-big: #{$NUMBERS_BIG};
    --dynamic-text-size-numbers-medium: #{$NUMBERS_MEDIUM};
    --dynamic-text-size-numbers-small: #{$NUMBERS_SMALL};
    --dynamic-text-size-title: #{$TITLE};
    --dynamic-text-tertiary: #{$TEXT_TERTIARY};
    --dynamic-badge-background: #{$BASE_3};
    --dynamic-badge-color: #{$TEXT_SECONDARY};
    --dynamic-badge-dot-background: #{$BRAND_PRIMARY_COLOR};
    --dynamic-search-bar-background: ;
    --dynamic-search-bar-background-hover: ;
    --dynamic-search-bar-background-focus: #{$BASE_2};
    --dynamic-search-bar-border: 1px solid #{$BASE_3};
    --dynamic-search-bar-border-hover: 1px solid #{$BASE_4};
    --dynamic-search-bar-border-focus: 1px solid #{$BASE_4};
    --dynamic-modal-border: ;
    --dynamic-modal-width: 22.5rem; // 360px
    --dynamic-modal-padding: 1.5rem; // 24px
    --dynamic-footer-padding: 1.25rem 1.25rem 1.25rem 1.5rem; // 20px 24px
    --dynamic-footer-border: 1px solid #{$BASE_4};
    --dynamic-wallet-list-tile-padding: 0.75rem; // 12px
    --dynamic-wallet-list-tile-gap: 0.375rem; // 6px
    --dynamic-wallet-list-max-height: 16.25rem; // 260px
    --dynamic-wallet-list-tile-background: #{$BASE_3};
    --dynamic-wallet-list-tile-border: ;
    --dynamic-wallet-list-tile-shadow: #{$SHADOW_DOWN_1};
    --dynamic-wallet-list-tile-background-hover: #{$BASE_4};
    --dynamic-wallet-list-tile-border-hover: ;
    --dynamic-wallet-list-tile-shadow-hover: #{$SHADOW_DOWN_2};
    --dynamic-connect-button-background: #{$BASE_1};
    --dynamic-connect-button-color: #{$TEXT_PRIMARY};
    --dynamic-connect-button-border: 1px solid #{$BASE_4};
    --dynamic-connect-button-shadow: #{$SHADOW_DOWN_1};
    --dynamic-connect-button-background-hover: #24272e;
    --dynamic-connect-button-color-hover: #{$TEXT_PRIMARY};
    --dynamic-connect-button-border-hover: 1px solid #{$BASE_4};
    --dynamic-connect-button-shadow-hover: #{$SHADOW_DOWN_2};
    --dynamic-tooltip-color: #{$TEXT_PRIMARY};
    --dynamic-tooltip-text-color: #{$BASE_1};
    @include bold-brand {
      --dynamic-footer-text-color: #{$TEXT_PRIMARY};
      --dynamic-footer-icon-color: #{$TEXT_TERTIARY};
      --dynamic-footer-border: ;
    }
  }
}