|
95 | 95 | "contributors": [], |
96 | 96 | "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" |
97 | 97 | }, |
| 98 | + { |
| 99 | + "title": "Dark Theme", |
| 100 | + "description": "SCSS mixin to change styles for dark themes.", |
| 101 | + "author": "gihanrangana", |
| 102 | + "tags": [ |
| 103 | + "scss", |
| 104 | + "css", |
| 105 | + "mixin", |
| 106 | + "snippet", |
| 107 | + "dark-theme", |
| 108 | + "layout" |
| 109 | + ], |
| 110 | + "contributors": [], |
| 111 | + "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" |
| 112 | + }, |
98 | 113 | { |
99 | 114 | "title": "Flex Center", |
100 | 115 | "description": "A mixin to center content using flexbox.", |
|
0 commit comments