Scss dark theme #113

Original file line number	Diff line number	Diff line change
Expand Up		@@ -95,6 +95,21 @@
		"contributors": [],
		"code": "@mixin aspect-ratio($width, $height) {\n position: relative;\n width: 100%;\n padding-top: ($height / $width) * 100%;\n > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n}\n"
		},
	{
	"title": "Dark Theme",
	"description": "SCSS mixin to change styles for dark themes.",
	"author": "gihanrangana",
	"tags": [
	"scss",
	"css",
	"mixin",
	"snippet",
	"dark-theme",
	"layout"
	],
	"contributors": [],
	"code": "@mixin isDark($type: 'module') {\n $root: &;\n\n @if $type == 'module' {\n :global {\n @at-root body[theme='dark'] #{$root} {\n @content;\n }\n }\n } @else {\n &[theme='dark'] {\n @content;\n }\n }\n}\n\n// Usage:\n.container{\n\tbackground: #f0f0f0;\n\t@include isDark {\n\t\tbackground: #222;\n\t}\n}\n"
	},
		{
		"title": "Flex Center",
		"description": "A mixin to center content using flexbox.",
Expand Down

10 changes: 10 additions & 0 deletions public/icons/csharp.svg

Show comments View file Open in desktop

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

32 changes: 32 additions & 0 deletions snippets/scss/layouts/dark-theme.md

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,32 @@
	---
	title: Dark Theme
	description: SCSS mixin to change styles for dark themes.
	author: gihanrangana
	tags: scss, css, mixin, snippet, dark-theme, layout
	---

	```scss
	@mixin isDark($type: 'module') {
	$root: &;

	@if $type == 'module' {
	:global {
	@at-root body[theme='dark'] #{$root} {
	@content;
	}
	}
	} @else {
	&[theme='dark'] {
	@content;
	}
	}
	}

	// Usage:
	.container{
	background: #f0f0f0;
	@include isDark {
	background: #222;
	}
	}
	```

Navigation Menu